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

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++;
    }



你可能感兴趣的:(threejs uv贴图面的纹理始终是第一张纹理的错误原因)