three.js利用顶点信息及faceVertexUvs为立方体的每个面贴图

通过以上方法才可以利用UV为Mesh添加纹理

利用以下代码可以为不同面贴上不同的纹理,也可以修改为所有面共用一个纹理

point//顶点
pointindex//顶点索引
var cubeGeometry = new THREE.Geometry();
var verticesOfCube = point;
var indicesOfFaces = pointindex;
cubeGeometry.vertices = verticesOfCube;
cubeGeometry.faces = indicesOfFaces;
cubeGeometry.computeFaceNormals();

//给立方体设置贴图
var materials = [];  //创建一个贴图数组
//设置贴图数组
for(var i = 0;i < cubeGeometry.faces.length/2;i++){
    materials[i] = new THREE.MeshBasicMaterial({
    map:THREE.ImageUtils.loadTexture('../threejs/img/' + (i+1) + '.png',
        {},function(){
             renderer.render(scene,camera);
             })
          })
       }
var faceId = 0;
var uv = [new THREE.Vector2(0, 0), new THREE.Vector2(1, 0), new THREE.Vector2(1, 1), new THREE.Vector2(0, 1)];
//设置纹理坐标
for (var m = 0; m < cubeGeometry.faces.length; m += 2) {
	cubeGeometry.faces[m].materialIndex = faceId;
	cubeGeometry.faces[m + 1].materialIndex = faceId;
	cubeGeometry.faceVertexUvs[0][m] = [uv[2], uv[3], uv[0]];
	cubeGeometry.faceVertexUvs[0][m + 1] = [uv[2], uv[0], uv[1]];
	faceId++;
}
var cubeMaterial = new THREE.MeshFaceMaterial(materials);
cube = new THREE.Mesh(cubeGeometry,cubeMaterial);
scene.add(cube);

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值