Three.js学习笔记-实现cube各个面材质不一样

方法1

为实现六面体各个面材质不一样上网看到好多个MeshFaceMaterials(materials)实现的,现在版本95该api给废弃了。
现在该功能给直接添加到Mesh()当中了
查看英文官网文档Mesh
Mesh( geometry : Geometry, material : Material )
- material 是单个材质或者一个数组材质

经我测试发现当material为数组时实现的就是废弃的这个api实现的功能。数组中材质的顺序分别对应cube的面为[右，左，上，下，前后] 可以理解为[z轴正向，z轴负向，z轴正向，z轴负向，z轴正向，z轴负向]

var cubeGeo = new THREE.CubeGeometry(1,1,1);
var materials = [material1,material2,material3,...,material6];
var cube = new THREE.Mesh(cubeGeo,materilas);

优点：在面上从横向重复材质

var texture= new THREE.TextureLoader().load('texture.png');
                texture.wrapS = THREE.RepeatWrapping;
                texture.wrapT = THREE.RepeatWrapping;
                texture.repeat.set(2, 4 );

方法2

将立方体的各个面上的材质制作成一个sprite,然后去操作这个spritesprite及子部分长宽均为2的幂不然会报错
我这只是简答的测试了一下，我的sprite上下结构，上面部分的是透明，下面部分一张图

var texture= new THREE.TextureLoader().load('assset/server.png');
var material= new THREE.MeshLambertMaterial({map: texture});
//color: 0x44ffff,wireframe: true 展示出各个面的线条(各个面由三角形构成，可以通过在生成Geometry时通过控制分段数来控制线条的数量)

var frontServ = [new THREE.Vector2(0,0),new THREE.Vector2(1,0),new THREE.Vector2(1,0.5),new THREE.Vector2(0,0.5)]; 下部分
var nfrontServ = [new THREE.Vector2(0,0.5),new THREE.Vector2(1,0.5),new THREE.Vector2(1,1),new THREE.Vector2(0,1)];上部分

var serv1= new THREE.BoxGeometry(1,0.4,0.45);
serv1.faceVertexUvs[0] = [];
    //右
    serv1.faceVertexUvs[0][0] = [nfrontServ[3],nfrontServ[0],nfrontServ[2]];
    serv1.faceVertexUvs[0][1] = [nfrontServ[3],nfrontServ[0],nfrontServ[2]];
    //左
    serv1.faceVertexUvs[0][2] = [nfrontServ[3],nfrontServ[0],nfrontServ[2]];
    serv1.faceVertexUvs[0][3] = [nfrontServ[3],nfrontServ[0],nfrontServ[2]];
    //上
    serv1.faceVertexUvs[0][4] = [nfrontServ[3],nfrontServ[0],nfrontServ[2]];
    serv1.faceVertexUvs[0][5] = [nfrontServ[3],nfrontServ[0],nfrontServ[2]];
    //下
    serv1.faceVertexUvs[0][6] = [nfrontServ[3],nfrontServ[0],nfrontServ[2]];
    serv1.faceVertexUvs[0][7] = [nfrontServ[3],nfrontServ[0],nfrontServ[2]];
    //前
    serv1.faceVertexUvs[0][8] = [frontServ[3],frontServ[0],frontServ[2]];
    serv1.faceVertexUvs[0][9] = [frontServ[0],frontServ[1],frontServ[2]];
    //后
    serv1.faceVertexUvs[0][10] = [nfrontServ[3],nfrontServ[0],nfrontServ[2]];
    serv1.faceVertexUvs[0][11] = [nfrontServ[3],nfrontServ[0],nfrontServ[2]];

上面代码中需要注意：
将朝向前的面改成下面代码也行

//前
    serv1.faceVertexUvs[0][8] = [frontServ[1],frontServ[2],frontServ[0]];
    serv1.faceVertexUvs[0][9] = [frontServ[2],frontServ[3],frontServ[0]];

自己尝试了一下发现，在展示cube的线条时，朝前的面的两个三角形共享一条从左下到右上的对角线，我们从左下开始逆时针依次将四个点设为0，1，2，3；发现设定面的两个三角形各个点的渲染顺序分别为 302，012和120,230时才会展示出正确的贴图；也可以让贴图旋转90°，只不过此时两个三角形点的渲染顺序为013，123和231，301
如下图

至于如何去控制单个面的重复有时间研究一下再补充把

Three.js学习笔记-实现cube各个面材质不一样

方法1

方法2

猜你喜欢