Question

很难找到这个问题的最新答案。好像许多解决方案正在使用MeshFaceMaterial，这些解决方案早已从three.js（大约53版，目前在84版）中消失了。

从我已经完成的研究来看，创建一个Box，将其变成一个Sphere然后进行映射似乎是一个更好的策略。

以下是我所拥有的：

我在vars t1和t2

加载了纹理

var geometry = new THREE.BoxGeometry(1,1,1);

for (var i in geometry.vertices) {
    var vertex = geometry.vertices[i];
    vertex.normalize().multiplyScalar(1);
}

var mat1 = new THREE.MeshLambertMaterial({ map: t1 });
var mat2 = new THREE.MeshLambertMaterial({ map: t2 });

var materials = [mat1, mat2];
var mats = new THREE.MultiMaterial(materials);

var cube = new THREE.Mesh(geometry, mats);

scene.add(cube);

问题：

这导致我的控制台中的Uncaught TypeError: Cannot read property 'visible' of undefined
出于着色的原因，我想使用MeshPhongMaterial而不是MeshLambertMaterial

任何提示都将非常感谢！

Answer 1

查看几何体面内的materialIndex值。这些值是materials数组的索引。

在您的示例中，您会看到他们的值从0到5（对应于框的两侧），但由于只提供了两种材料，因此您会看到错误。

要解决您的问题，您只需更改几何面上的materialIndex值，以便它们仅引用您的两种材质。

例如：

for (var i = 0; i < geometry.faces.length; i += 1) {
  var face = geometry.faces[i];
  face.materialIndex = face.materialIndex % 2;
}

Three.js：将两个纹理映射到一个立方体

1 个答案: