學習Three.js——網格(Mesh)
阿新 • • 發佈:2018-12-23
網格
幾何體是不能被渲染的,只有幾何體和材質結合成網格才能被渲染到螢幕上
常見屬性和方法
position
:表示網格的絕對位置
設定position的方法有3個:
mesh.position.x = x;mesh.position.y=y;mesh.position.z=z
mesh.position.set(x,y,z)
mesh.position = new THREE.Vector3(x,y,z)
rotation
:表示物體繞x,y,z軸旋轉的弧度(注意是弧度不是角度)
設定rotation的方法和position類似:
mesh.rotation.x = x;mesh.rotation.y=y;mesh.rotation.z=z
mesh.rotation.set(x,y,z)
mesh.rotation = new THREE.Vector3(x,y,z)
scale
表示物體在x,y,z軸縮放的大小,設定方法和上面的類似
translate
:物體相對於原來的位置在x,y,z軸移動的距離
設定translate的方法:
mesh.translate(x,y,z)
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)