Three.js 每张脸上都有不同的纹理 material

Question

我有一个 BufferGeometry 对象，我希望能够为每个面分配不同的纹理。

在我这里的示例中：https://jsfiddle.net/2ay716mz/（工作示例）

我已经设置了一个立方体（使用自定义 BufferGeometry 而不是 BoxGeometry 因为我需要其他不是立方体的对象）。

我给mesh传了一个material的数组，一面是贴图，另一面都是不同的颜色。

这一切都正常工作...但是如果我尝试将纹理 material 放在除组 [0] 和组 [1] 之外的任何面组上，则它不起作用并且只是显示一种颜色。

在这个示例中，我将纹理设置为 third material；它不再有效：https://jsfiddle.net/2ay716mz/1/

我该如何解决这个问题？或者这是一个错误，应该报告给 three.js github?

Answer 1

我这边效果很好。您只需为要使用的每个纹理分配一个新的 material：

const texLoader = new THREE.TextureLoader();

const texURL1 = 'https://upload.wikimedia.org/wikipedia/commons/9/93/Gfp-jagged-rock-texture.jpg';
const texURL2 = 'https://threejs.org/examples/textures/patterns/circuit_pattern.png';
const texURL3 = 'https://threejs.org/examples/textures/decal/decal-normal.jpg';
const texURL4 = 'https://threejs.org/examples/models/gltf/LeePerrySmith/Map-COL.jpg';
const texURL5 = 'https://threejs.org/examples/models/gltf/LeePerrySmith/Map-SPEC.jpg';
const texURL6 = 'https://threejs.org/examples/textures/cube/pisa/px.png';

const mat1 = new THREE.MeshBasicMaterial({color: 0xffffff, map: texLoader.load(texURL1)});
const mat2 = new THREE.MeshBasicMaterial({color: 0xffffff, map: texLoader.load(texURL2)});
const mat3 = new THREE.MeshBasicMaterial({color: 0xffffff, map: texLoader.load(texURL3)});
const mat4 = new THREE.MeshBasicMaterial({color: 0xffffff, map: texLoader.load(texURL4)});
const mat5 = new THREE.MeshBasicMaterial({color: 0xffffff, map: texLoader.load(texURL5)});
const mat6 = new THREE.MeshBasicMaterial({color: 0xffffff, map: texLoader.load(texURL6)});

var material = [
    mat1,
    mat2,
    mat3,
    mat4,
    mat5,
    mat6,
];

Click here for live demo

Three.js 每张脸上都有不同的纹理 material

Three.js different texture material on each face

three.js