javascript - MeshFaceMaterial 不适用于某些几何形状

Question

三.js

我正在尝试创建一个每面都有不同颜色的二十面体。

        var IcoGeom=new THREE.IcosahedronGeometry(1);
        var IcoCol=[];
        for (var i=0;i<IcoGeom.faces.length;i++) {
            IcoCol.push(new THREE.MeshBasicMaterial({color:SkyColorRandomizer()}));
        }
        var IcoMat=new THREE.MeshFaceMaterial(IcoCol);   
        var myObj=new THREE.Mesh(IcoGeom, IcoMat);

SkyColorRandomizer只是一个返回随机颜色的函数。

现在，问题来了:它将所有二十面体着色为相同的颜色(每次都是随机的)，因此它无法按预期工作。现在，如果您将 IcoGeom 更改为 BoxGeometry，它工作得非常好，并且将立方体的面全部着色为不同的颜色，这非常奇怪。另一件事是:如果你进入 myObj.material.materials 你会看到它们都有不同的颜色，但我只是不明白为什么它在二十面体的情况下不起作用，但在立方体上却完美地工作。

感谢任何帮助:)

Answer 1

如果您使用MeshFaceMaterial，则必须为每个面分配一个materialIndex，如下所示:

geometry.faces[ i ].materialIndex = i;

但是，为每个面分配不同颜色的更好方法是设置面颜色:

geometry.faces[ i ].color.set( Math.random() * 0xffffff );

...

var mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors } ) );