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

最新推荐文章于 2023-12-13 19:44:55 发布

HelloEarth_

最新推荐文章于 2023-12-13 19:44:55 发布

阅读量3.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： Three.js

本文链接：https://blog.csdn.net/HelloEarth_/article/details/98635255

Three.js 专栏收录该内容

3 篇文章

订阅专栏

通过以上方法才可以利用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);