1. 程式人生 > >學習Three.js——網格(Mesh)

學習Three.js——網格(Mesh)

網格

幾何體是不能被渲染的,只有幾何體和材質結合成網格才能被渲染到螢幕上

常見屬性和方法

position:表示網格的絕對位置

設定position的方法有3個:

  1. mesh.position.x = x;mesh.position.y=y;mesh.position.z=z
  2. mesh.position.set(x,y,z)
  3. mesh.position = new THREE.Vector3(x,y,z)

rotation:表示物體繞x,y,z軸旋轉的弧度(注意是弧度不是角度)

設定rotation的方法和position類似:

  1. mesh.rotation.x = x;mesh.rotation.y=y;mesh.rotation.z=z
  2. mesh.rotation.set(x,y,z)
  3. mesh.rotation = new THREE.Vector3(x,y,z)

scale表示物體在x,y,z軸縮放的大小,設定方法和上面的類似

translate:物體相對於原來的位置在x,y,z軸移動的距離

設定translate的方法:

  1. mesh.translate(x,y,z)
  2. mesh.translateX(x);mesh.trainslateY(y);mesh.translateZ(z)

visible:若設定為false,那麼將不會被渲染

建立具有多種材質的網格

首先,先定義多個材質

var materials = [
    new THREE.MeshLambertMaterial({opacity:0.6,color:0x44ff44,transparent:true}),
    new THREE.MeshBasicMaterial({color:0xffffff,wireframe:true})
];

然後使用THREE.SceneUtils.createMultiMaterialObject()方法建立網格

var mesh = THREE.SceneUtils.createMultiMaterialObject(geom,materials);

注意,這個網格實質上是一個網格組,組內的子元素(網格)都是相互獨立的,要對所有子元素使用某個方法,可以使用

mesh.children.forEach(function (e) {
    ...
});

網格組和合並

組合

建立一個組物件(Group),使用add()方法將網格加入到組。注意,對單個物件的位置,放縮等處理都是相對於組的父物件的。

var group - new THREE.Object3D();//或者new THREE.Group()
group.add(sphere);
group.add(cube);
scene.add(group);

合併

使用merge()方法,將幾何體合併,合併後的幾何體看作是一個幾何體。

geometry1.merge(geometry2,geometry.matrix)