threejs uv贴图面的纹理始终是第一张纹理的错误原因

最新推荐文章于 2025-06-23 22:10:48 发布

_________MAN

最新推荐文章于 2025-06-23 22:10:48 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/guoguicheng1314/article/details/79127983

本文介绍在Three.js中如何正确地为环面模型的各部分指定不同的颜色纹理。通过显式设置UV坐标，确保每个面片可以正确使用所指定的颜色材质。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var waitGeometry = new THREE.TorusGeometry(radius, tube, radialSegments, tubularSegments, 2 * Math.PI);
var waitMaterial = [];
for (var i = 0; i < waitGeometry.faces.length / 2; i++) {
    waitMaterial[i] = new THREE.MeshBasicMaterial({color: 0xcccccc});
}
var wait = new THREE.Mesh(waitGeometry, waitMaterial);
wait.lookAt(vr.camera.position)
wait.name = "__wait";

scene.add(wait);
//修改纹理(不会起作用)
for (var i = 0; i < waitGeometry.faces.length / 2; i++) {
    if(i%2==0)
        waitMaterial[i] = new THREE.MeshBasicMaterial({color: 0xff0000});
    else
        waitMaterial[i] = new THREE.MeshBasicMaterial({color: 0x00ff00});
}
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 i = 0, l = waitGeometry.faces.length; i < l; i += 2) {
    waitGeometry.faces[i].materialIndex = faceId;
    waitGeometry.faces[i + 1].materialIndex = faceId;
    waitGeometry.faceVertexUvs[0][i] = [uv[3], uv[0], uv[2]];
    waitGeometry.faceVertexUvs[0][i + 1] = [uv[0], uv[1], uv[2]];
    faceId++;
}

以上代码修改纹理是不会起作用的，原因是在创建模型的时候并没有显式去处理uv贴图，所以系统默认为模型值采取第一张纹理，这就是为什么一修改第一张face的materialIndex=0时，整个模型都改变的原因，所以，需要在第6行前加入显式uv指定代码


    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 i = 0, l = waitGeometry.faces.length; i < l; i += 2) {
        waitGeometry.faces[i].materialIndex = faceId;
        waitGeometry.faces[i + 1].materialIndex = faceId;
        waitGeometry.faceVertexUvs[0][i] = [uv[3], uv[0], uv[2]];
        waitGeometry.faceVertexUvs[0][i + 1] = [uv[0], uv[1], uv[2]];
        faceId++;
    }