three - mesh

643 阅读2分钟

网格

几何体是不能被渲染的,只有几何体和材质结合成网格才能被渲染到屏幕上

常见属性和方法

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);

这种方法当网格对象的数量非常多时,性能就会成为一个瓶颈。实际上在组里的每个对象还是独立的,需要对它们分别进行处理和渲染。但使用THREE.Geometry.merge 函数就可以在某种程度上帮组你解决这个问题。 使用merge()方法,将几何体合并,合并后的几何体看作是一个几何体。

geometry1.merge(geometry2,geometry.matrix)