머리말
편집자는 이전에 기하학적 모양과 재료에 대해 발표했습니다. 나는 당신이 읽고 배운 후에 우리는 그것들을 사용하여 물체를 만들 수 있다고 생각합니다. 가장 일반적으로 사용되는 물체는 메쉬이며, 정점, 가장자리,면 등으로 구성된 물체입니다. 다른 객체에는 라인 세그먼트, 뼈, 입자 시스템 등이 있습니다. 물체를 만들려면 기하학적 모양과 재료를 지정해야합니다. 그중에서도 기하학적 모양은 물체의 정점 및 기타 정보의 위치를 결정하고 자료는 객체의 색상, 질감 및 기타 정보를 결정합니다.
1. 그리드를 만듭니다
이전 기사에서는 기하학적 모양과 재료를 만드는 방법을 배웠고 메쉬를 만드는 것은 매우 간단합니다. 기하학적 모양과 재료를 생성자로 전달하십시오. 가장 일반적으로 사용되는 물체는 메쉬로, 점, 선 및 표면이 포함 된 형상을 나타냅니다. 생성자는 다음과 같습니다.
메쉬 (기하학, 재료)
여기에서는 특정 예제로 그리드를 만드는 방법을 배우겠습니다.
var material = new Three.MeshlambertMaterial ({color : 0xffff00}); var geometry = new Three.CubeGeometry (1, 2, 3); var mesh = new Three.Mesh (Geometry, Matere); Scene.add (mesh);나중에 재료와 지오메트리가 재사용되지 않으면 다음과 같이 쓸 수도 있습니다.
var mesh = new Three.Mesh (new Three.CubeGeometry (1, 2, 3), New Three.MeshlambertMaterial ({color : 0xffff00}); scene.add (mesh);조명을 추가 한 후 결과는 다음과 같습니다.
재료가 지정되지 않으면 매번 실제 와이어 프레임이있는 재료가 무작위로 할당됩니다. 페이지를 새로 고침 후 색상이 다릅니다. 한 가지 가능한 효과는 다음과 같습니다.
소스 코드 :
<! docType html> <html> <head> <meta charset = "utf-8"> <title> 3.js 테스트 9.1 </title> </head> <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 (-2.5, 2.5, 1.875, -1.875, 0.1, 100); Camera.Position.set (5, 5, 20); Camera.LOOKAT (New Three.Vector3 (0, 0, 0)); scene.add (카메라); var material = new Three.MeshlambertMaterial ({color : 0xffff00}); // var material = new Three.MeshBasicMaterial ({// color : 0xffff00, // WireFrame : true //}); var geometry = new Three.CubeGeometry (1, 2, 3); var mesh = new Three.Mesh (지오메트리, 재료); scene.add (mesh); var light = new Three.DirectionAllight (0xffffff); light.position.set (20, 10, 5); scene.add (빛); // 렌더 렌더러 렌더 (장면, 카메라); } </script> </html>2. 속성을 수정하십시오
2.1 재료를 수정하십시오
생성자에 재료를 지정하는 것 외에도 메쉬가 생성 된 후에도 재료를 수정할 수도 있습니다.
var material = new Three.MeshlambertMaterial ({color : 0xffff00}); var Geometry = new Three.CubeGeometry (1, 2, 3); var mesh = new Three.Mesh (Geometry, Material); scene.add (mesh); mesh.mesh.material = new Three.MeshlambertMaterial ({color : 0xff0000});최종 색상은 빨간색입니다.
소스 코드 :
<! docType html> <html> <head> <meta charset = "utf-8"> <title> 3.js test9.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 (-2.5, 2.5, 1.875, -1.875, 0.1, 100); Camera.Position.set (5, 5, 20); Camera.LOOKAT (New Three.Vector3 (0, 0, 0)); scene.add (카메라); var material = new Three.MeshlambertMaterial ({color : 0xffff00}); var geometry = new Three.CubeGeometry (1, 2, 3); var mesh = new Three.Mesh (지오메트리, 재료); scene.add (mesh); mesh.mesh.material = new Three.MeshlambertMaterial ({color : 0xff0000}); var light = new Three.DirectionAllight (0xffffff); light.position.set (20, 10, 5); scene.add (빛); // 렌더러 렌더러 렌더러 (장면, 카메라); } </script> </html>2.2 위치, 줌, 회전
위치, 스케일링 및 회전은 객체의 세 가지 일반적인 특성입니다. 3.mesh는 3.object3d를 기반으로하기 때문에 스케일, 회전 및 위치의 세 가지 속성이 포함되어 있습니다. vector3 인스턴스는 모두 세 가지이므로 값을 수정하는 방법은 동일하며 여기서는 예를 들어 위치합니다.
Three.vector3에는 세 가지 속성이 있습니다 : x, y 및 z. 속성 중 하나만 설정하면 다음 방법을 사용할 수 있습니다.
mesh.position.z = 1;
여러 속성을 동시에 설정 해야하는 경우 다음 두 가지 방법을 사용할 수 있습니다.
mesh.position.set (1.5, -0.5, 0);
또는:
mesh.position = new Three.Vector3 (1.5, -0.5, 0);
스케일링의 해당 속성은 스케일이며, 해당 회전 속성은 회전입니다. 특정 방법은 위의 예와 동일하며, 이는 각각 3 개의 축 x, y 및 z를 따라 스케일링 또는 회전을 나타냅니다.
소스 코드 :
<! docType html> <html> <head> <meta charset = "utf-8"> <title> 3.js test9.3 </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 (-2.5, 2.5, 1.875, -1.875, 0.1, 100); Camera.Position.set (5, 5, 20); Camera.LOOKAT (New Three.Vector3 (0, 0, 0)); scene.add (카메라); var material = new Three.MeshlambertMaterial ({color : 0xffff00}); var geometry = new Three.CubeGeometry (1, 2, 3); var mesh = new Three.Mesh (지오메트리, 재료); scene.add (mesh); mesh.position.set (1.5, -0.5, 0); mesh.position = new Three.Vector3 (1.5, -0.5, 0); mesh.position.z = 1; var light = new Three.DirectionAllight (0xffffff); light.position.set (20, 10, 5); scene.add (빛); drawaxes (장면); // 렌더 렌더러 렌더 (장면, 카메라); } function drawaxes (scene) {// x-axis var xgeo = new Three.geometry (); xgeo.vertices.push (new Three.Vector3 (0, 0, 0)); xgeo.vertices.push (new Three.Vector3 (1, 0, 0)); var xmat = new Three.LineBasicMaterial ({color : 0xff0000}); var xaxis = new Three.Line (XGEO, XMAT); scene.add (xaxis); // y axis var ygeo = new Three.geometry (); ygeo.vertices.push (new Three.Vector3 (0, 0, 0)); ygeo.vertices.push (new Three.Vector3 (0, 1, 0)); var ymat = new Three.LineBasicMaterial ({color : 0x00ff00}); var yaxis = new Three.line (ygeo, ymat); scene.add (yaxis); // z-axis var zgeo = new Three.geometry (); zgeo.vertices.push (new Three.Vector3 (0, 0, 0)); zgeo.vertices.push (new Three.Vector3 (0, 0, 1)); var zmat = new Three.LineBasicMaterial ({color : 0x00ccff}); var zaxis = new Three.line (Zgeo, Zmat); scene.add (zaxis); } </script> </html>이 기사의 내용은 여기서 끝납니다. 이 기사는 세부 예와 그림을 통해 3.js로 그리드를 소개합니다. 이 기사가 모두에게 Three.js를 배우는 데 도움이되기를 바랍니다.