三.js每张脸不同的纹理材质答案

【问题标题】：Three.js different texture material on each face三.js每张脸不同的纹理材质
【发布时间】：2021-12-17 10:11:01
【问题描述】：

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

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

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

我已将一组材质传递给网格，一侧是纹理，另一侧是不同的颜色。

这一切都可以正常工作...但是，如果我尝试将纹理材料放在任何组[0]和组[1]之外的任何面组上，那么它就不起作用，而是只显示一种颜色。

在这个例子中，我将纹理设置为第三个材质；它不再起作用：https://jsfiddle.net/2ay716mz/1/

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

【问题讨论】：

标签： three.js

【解决方案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,
];

Click here for live demo

【讨论】：

实际出现的问题是需要先将单个材质设置为单独的变量，然后再放入数组中。如果你举个例子，然后切换它，使一些材料只是纯色；它仍然有效。但是，如果您将材质对象直接放入数组中，而不先将它们声明为单独的变量，则它不再起作用。不确定这是错误还是 javascript 怪癖。