머리말
자료는 객체 정점 정보와 무관하게 렌더링 효과와 관련된 속성입니다. 재료를 설정하면 물체의 색상, 텍스처 맵, 조명 모드 등을 변경할 수 있습니다.
MeshbasicMaterial : 빛의 감각이없고, 지오메트리에게 간단한 색상 또는 디스플레이 와이어 프레임을 제공합니다.
MeshlambertMaterial : 이 재료는 빛에 반응하며 희미하고 비 후생적인 물체를 만드는 데 사용됩니다.
Meshphongmaterial : 이 재료는 또한 빛에 반응하며 밝은 금속 물체를 만드는 데 사용됩니다.
1. 기본 재료
기본 재료 객체를 사용하십시오. 렌더링 후 물체의 색상은 항상 조명으로 인해 밝고 어둡거나 그림자 효과가없는 재료의 색상입니다. 지정된 재료에 대한 색상이 없으면 색상은 무작위입니다. 생성자는 다음과 같습니다.
3.meshlambertmaterial (opt)
그중에서도 opt는 기본적으로 기본적으로 또는 각 속성을 포함하는 값입니다. 예를 들어, 불투명도가 0.75 인 새로운 노란색 재료를 만듭니다.
새로운 3.meshbasicmaterial ({color : 0xffff00, 불투명도 : 0.75});큐브에 적용하십시오 ( "Three.js Learning Geometry"참조 : 효과는 다음과 같습니다.
소스 코드 :
<! docType html> <html> <head> <meta charset = "utf-8"> <title> 3.js 테스트 7.1 </title> </head> <body onload = "init ()"> <canvas id = "maincanvas"> </canvas> </body> <script type = "text/javascript" src = "JS/Three.min.js"> </script> <script type = "text/javaScript"> function () {var renderer = new Three.WebGlrenderer ({canvas : document.getElementByid ( 'maincanvas')}); renderer.setClearColor (0x0000000); var scene = new Three.Scene (); // 카메라 var 카메라 = 새로운 3.othographiccamera (-5, 5, 3.75, -3.75, 0.1, 100); Camera.Position.set (25, 25, 25); Camera.LOOKAT (New Three.Vector3 (0, 0, 0)); scene.add (카메라); // light var light = new Three.Pointlight (0xffffff, 1, 100); light.position.set (10, 15, 5); scene.add (빛); var 자료 = 새로운 3.meshbasicmaterial ({color : 0xffff00, 불투명도 : 0.75}); var cube = new Three.Mesh (New Three.CubeGeometry (5, 5, 5), 재료); scene.add (큐브); 렌더러. 렌더 (장면, 카메라); } </script> </html>더 일반적으로 사용되는 몇 가지 기본 임액 의 특성 :
・ 표시 : 표시되는지 여부에 관계없이 기본값은 사실입니다
・ 측면 : 얼굴 앞쪽 또는 뒷면을 렌더링하면 기본값은 앞쪽 3입니다.
・ 와이어 프레임 : 면 대신 선을 렌더링할지, 기본값으로 거짓으로
・ 색상 : 16 진수 RGB 색상, 빨간색이 0xff0000으로 표시되면
MAP : 텍스처 맵을 사용하십시오
기본 재료의 경우 장면의 광원이 변경 되더라도 해당 재료를 사용하는 물체는 항상 모든 색상에서 동일한 효과를 갖습니다. 물론 이것은 현실적이지 않으므로 Lambert 조명 모델과 Phong 조명 모델과 같은보다 현실적인 조명 모델 을 소개 할 것입니다.
2. 램버 재료 및 Phong 재료
Lambert Material (MeshlambertMaterial)은 Lambert 조명 모델을 준수하는 재료입니다. Lambert 조명 모델의 주요 특징은 확산 반사 만 고려하지만 사양 반사의 효과를 고려하지 않는다는 것입니다. 따라서, 반사가 필요한 금속 및 거울과 같은 물체에는 적합하지 않으며 대부분의 다른 물체의 확산 반사 효과에 적합합니다.
조명 모델 공식은 다음과 같습니다.
idiffuse = kd * id * cos (theta)
그중에서도, idiffuse는 빛의 확산 강도, kd는 객체 표면의 확산 반사 속성, ID는 빛의 강도이며, 세타는 빛의 입사각 아크입니다.
물론 Three.JS를 사용하는 Lambert 자료의 경우 직접 사용하기 위해 위의 공식을 이해할 필요가 없습니다.
노란색 램버트 재료를 만드는 방법은 다음과 같습니다.
New Three.MeshlambertMaterial ({color : 0xffff00})조명을 사용한 후 다음과 같은 효과를 얻을 수 있습니다.
색상은 산란 된 빛을 반사하는 재료의 능력을 표현하는 데 사용되며 재료의 색상을 설정하는 데 가장 일반적으로 사용되는 속성입니다. 또한 Ambient and Emissive를 사용하여 재료의 색상을 제어 할 수 있습니다.
Ambient는 주변 빛을 향한 반사 능력을 나타냅니다. 이 값은 Ambientlight가 설정된 경우에만 유효합니다. 주변 광에 대한 재료의 반사 능력은 재료의 실제 색상을 얻기 위해 주변 광 강도를 곱합니다.
Emissive는 재료의 자체 푸는 색으로 광원의 색상을 표현하는 데 사용할 수 있습니다. 광원이 아니라 빛의 영향을받지 않는 색상입니다. 빨간색의 자기 발광 :
New Three.MeshlambertMaterial ({Emitsive : 0xff0000})효과는 다음과 같습니다.
붉은 자체 발광과 노란색 산란 빛을 모두 사용하는 경우 :
새로운 3.meshlambertmaterial ({color : 0xffff00, emitive : 0xff0000})효과는 다음과 같습니다.
구체의 영향 :
램버 소재의 고유 한 특성을 요약하십시오.
주변 : 재료의 주변 색상을 설정하여 Ambientlight 광원과 함께 사용하십시오. 이 색상은 주변 조명을 곱합니다. 즉, 광원에 반응합니다.
방사선 : 광원이 아니라 빛의 영향을받지 않는 색상으로 재료에 의해 방출되는 색상을 설정하십시오. 기본값은 검은 색입니다.
소스 코드 :
<! docType html> <html> <head> <meta charset = "utf-8"> <title> 3.js test7.2 </title> </head> <body onload = "init ()"> <canvas id = "maincanvas"> </canvas> </body> <script type = "text/javascript" src = "JS/Three.min.js"> </script> <script type = "text/javaScript"> function () {var renderer = new Three.WebGlrenderer ({canvas : document.getElementByid ( 'maincanvas')}); renderer.setClearColor (0x0000000); var scene = new Three.Scene (); // 카메라 var 카메라 = 새로운 3.othographiccamera (-5, 5, 3.75, -3.75, 0.1, 100); Camera.Position.set (25, 25, 25); Camera.LOOKAT (New Three.Vector3 (0, 0, 0)); scene.add (카메라); // light var light = new Three.Pointlight (0xffffff, 1, 100); light.position.set (10, 15, 5); scene.add (빛); var material = new Three.MeshlambertMaterial ({color : 0xffff00, emitive : 0xff0000}); var cube = new Three.Mesh (New Three.CubeGeometry (5, 5, 5), 재료); scene.add (큐브); // var sphere = new Three.Mesh (새로운 3.spheregeometry (3, 20, 8), 자료); // scene.add (sphere); 렌더러. 렌더 (장면, 카메라); } </script> </html>3. PHONG 재료
Phong 재료 (Meshphongmaterial)는 Phong 조명 모델을 준수하는 재료입니다. Lambert와는 달리 Phong 모델은 Specular Reflection의 효과를 고려하므로 금속 및 미러 성능에 특히 적합합니다.
확산 반사 부분과 Lambert 조명 모델은 동일하며 스펙 컬러 반사 부분의 모델은 다음과 같습니다.
Ispecular = Ks * Is * (cos(alpha)) ^ n
그중에서도, ispecular는 사양 표면에 반영된 광도, KS는 재료 표면의 사양 반사 계수이며, 광원 강도, 알파는 반사 된 빛과 시야 사이의 각도이며, N은 하이라이트 인덱스이며, 하이라이트 스팟이 클수록 하이라이트 스팟이 작다.
확산 반사 부분은 Lambert 모델과 일치하기 때문에 스펙 컬러 반사 계수가 지정되지 않았지만 확산 반사 만 설정되면 효과는 Lambert의 효과와 동일합니다.
새로운 3.meshphongmaterial ({color : 0xffff00});마찬가지로, 방사성 및 주변 값을 모두 지정할 수 있으며 여기에서 설명되지 않습니다. 사양 반사 계수는 아래에 지정되어 있습니다. 먼저, 우리는 Ppecular Reflection 만 사용하고, 하이라이트를 빨간색으로 설정하고, 구체에 적용합니다.
var material = new Three.meshphongmaterial ({ppecular : 0xff0000}); var sphere = new Three (new Three.SphereGeometry (3, 20, 8), 재료);효과는 다음과 같습니다.
조명 모델의 N- 값은 Shininess 속성을 통해 제어 할 수 있습니다. Shininess 값이 클 때 하이라이트의 점수가 작고 기본값은 30입니다. 1000으로 설정하면 :
New Three.meshphongmaterial ({ppecular : 0xff0000, Shininess : 1000});효과는 다음과 같습니다.
노란색 미러 라이트, 빨간색 산란 빛을 사용하십시오.
재료 = 새로운 3.meshphongmaterial ({color : 0xff0000, Specular : 0xffff00, Shininess : 100});Phong 재료의 고유 한 특성을 요약하십시오.
주변 : 재료의 주변 색상을 설정하여 Ambientlight 광원과 함께 사용하십시오. 이 색상은 주변 조명을 곱합니다. 즉, 광원에 반응합니다.
방사선 : 광원이 아니라 빛의 영향을받지 않는 색상으로 재료에 의해 방출되는 색상을 설정하십시오. 기본값은 검은 색입니다
Specular : 재료의 밝기와 하이라이트의 색상을 지정합니다. 컬러 특성과 동일한 색상으로 설정되면 또 다른 금속 같은 재료가 얻어집니다. 회색 회색으로 설정하면 플라스틱처럼 보입니다.
Shininess : 하이라이트 부분의 밝기를 지정하고 기본값은 30입니다.
소스 코드 :
<! docType html> <html> <head> <meta charset = "utf-8"> <title> 3.js test7.3 </title> </head> <init onload = "init ()"> <canvas id = "maincanvas"> </canvas> </body> <script type = "text/javascript" src = "JS/Three.min.js"> </script> <script type = "text/javaScript"> function () {var renderer = new Three.WebGlrenderer ({canvas : document.getElementByid ( 'maincanvas')}); renderer.setClearColor (0x0000000); var scene = new Three.Scene (); // 카메라 var 카메라 = 새로운 3.othographiccamera (-5, 5, 3.75, -3.75, 0.1, 100); Camera.Position.set (25, 25, 25); Camera.LOOKAT (New Three.Vector3 (0, 0, 0)); scene.add (카메라); // light var light = new Three.Pointlight (0xffffff, 1, 200); light.position.set (10, 15, 25); scene.add (빛); var material = new Three.MeshPhongMaterial ({// Specular : 0xff0000, Color : 0xff0000, Specular : 0xffff00, Shininess : 100}); // var cube = new Three.Mesh (new Three.CubeGeometry (5, 5, 5), 자료); // scene.add (Cube); var sphere = new Three.Mesh (New Three.SphereGeometry (3, 20, 8), 재료); scene.add (구); 렌더러. 렌더 (장면, 카메라); } </script> </html>요약
이 기사의 내용은 여기서 끝납니다. 이 기사는 자세한 예와 그림을 통해 Lamber와 Phong을 3.js로 소개합니다. 모든 사람의 학습에 도움이되기를 바랍니다. 편집자는 관련 기사를 3.js에 차례로 분류 할 것입니다. 3.js에 관심이있는 친구들은 Wulin.com을 계속 지원하십시오.