前言
小編之前發布過關於幾何形狀和材質，相信大家看過學習之後，我們就能使用他們來創建物體了。最常用的一種物體就是網格（Mesh），網格是由頂點、邊、面等組成的物體；其他物體包括線段（Line）、骨骼（Bone）、粒子系統（ParticleSystem）等。創建物體需要指定幾何形狀和材質，其中，幾何形狀決定了物體的頂點位置等信息，材質決定了物體的顏色、紋理等信息。
1.創建網格
在前幾篇中，我們學習瞭如何創建幾何形狀與材質，而網格的創建非常簡單，只要把幾何形狀與材質傳入其構造函數。最常用的物體是網格（Mesh），它代表包含點、線、面的幾何體，其構造函數是：
Mesh(geometry, material)
下面，讓我們通過一個具體的例子了解如何創建網格：
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);如果material和geometry之後不會復用的話，也可以合在一起寫為：
var mesh = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3), new THREE.MeshLambertMaterial({ color: 0xffff00 }));scene.add(mesh);添加光照後，得到的效果為：
如果不指定material，則每次會隨機分配一種wireframe為true的材質，每次刷新頁面後的顏色是不同的，一種可能的效果是：
源碼：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>3.js測試9.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 init() { var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('mainCanvas') }); renderer.setClearColor(0x000000); var scene = new THREE.Scene(); // camera var camera = new THREE.OrthographicCamera(-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(camera); 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(geometry, material); scene.add(mesh); var light = new THREE.DirectionalLight(0xffffff); light.position.set(20, 10, 5); scene.add(light); // render renderer.render(scene, camera); } </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.material = new THREE.MeshLambertMaterial({ color: 0xff0000});最終顯示的顏色是紅色：
源碼：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>3.js測試9.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 init() { var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('mainCanvas') }); renderer.setClearColor(0x000000); var scene = new THREE.Scene(); // camera var camera = new THREE.OrthographicCamera(-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(camera); 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.material = new THREE.MeshLambertMaterial({ color: 0xff0000 }); var light = new THREE.DirectionalLight(0xffffff); light.position.set(20, 10, 5); scene.add(light); // render renderer.render(scene, camera); } </script></html>2.2 位置、縮放、旋轉
位置、縮放、旋轉是物體三個常用屬性。由於THREE.Mesh基礎自THREE.Object3D，因此包含scale、rotation、position三個屬性。它們都是THREE.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);
縮放對應的屬性是scale，旋轉對應的屬性是rotation，具體方法與上例相同，分別表示沿x、y、z三軸縮放或旋轉。
源碼：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>3.js測試9.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 init() { var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('mainCanvas') }); renderer.setClearColor(0x000000); var scene = new THREE.Scene(); // camera var camera = new THREE.OrthographicCamera(-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(camera); 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.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(light); drawAxes(scene); // render renderer.render(scene, camera); } 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>本文的內容到這就結束了，文章通過詳細實例及圖片介紹了Three.js中的網格，希望本文對大家學習Three.js有所幫助。