Three.js每个面使用不同的纹理材料

Question

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

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

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

我向网格传递了一组材质，其中一侧是纹理，其他侧都是不同的颜色。

这一切都有效...但是，如果我尝试将纹理材质放在除group[0]和group[1]之外的任何面组上，则它不起作用，只显示颜色。

请参见此示例，其中我将纹理设置为第三个材质；它不再起作用：https://jsfiddle.net/2ay716mz/1/ 我该如何解决这个问题？还是这是一个错误，应该报告给three.js的github？

- David B

Answer 1

我这边运行正常。你只需要为想要使用的每个纹理分配一个新材质即可：

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,
];

点击此处查看实时演示

- Marquizzo

---

实际上问题出在需要先将各个材料设置为独立的变量，然后再放入数组中。如果你拿你的例子并将一些材料改为纯色, 它仍然可以工作。但是如果你没有先声明它们为单独的变量, 而是直接将材料对象放入数组中，则不再起作用。不知道这是一个错误还是JavaScript的怪癖。 - David B