更改立方体面部的颜色

Dav*_*mes 10 javascript mesh colors three.js face

我实际上发现了这个问题,但它说material.color并不存在.我需要知道如何更改我正在绘制的立方体的各个面的颜色:

var newCube = new THREE.Mesh(new three.CubeGeometry(size, size, size), new three.MeshNormalMaterial({ vertexColors: three.FaceColors }));
Run Code Online (Sandbox Code Playgroud)

Wes*_*ley 34

以下是设置和更改立方体面部颜色的方法:

var geometry = new THREE.BoxGeometry( size, size, size );
for ( var i = 0; i < geometry.faces.length; i ++ ) {
    geometry.faces[ i ].color.setHex( Math.random() * 0xffffff );
}

var material = new THREE.MeshBasicMaterial( { color: 0xffffff, vertexColors: THREE.FaceColors } );
Run Code Online (Sandbox Code Playgroud)

如果在渲染几何体后geometry.faces[i].color更改,则必须进行设置geometry.colorsNeedUpdate = true.(这不是必需的canvasRenderer.)

three.js r.84

  • 对于较新的 ThreeJs 版本有解决方案吗? (2认同)

Wil*_*ilt 7

对于最终到此处并希望看到此代码正常工作的人来说,这是一个小提琴.

我做了一个盒子并将3种颜色绑在脸上:

// colors
red = new THREE.Color(1, 0, 0);
green = new THREE.Color(0, 1, 0);
blue = new THREE.Color(0, 0, 1);
var colors = [red, green, blue];

for (var i = 0; i < 3; i++) {
    geometry.faces[4 * i].color = colors[i];
    geometry.faces[4 * i + 1].color = colors[i];
    geometry.faces[4 * i + 2].color = colors[i];
    geometry.faces[4 * i + 3].color = colors[i];
}
Run Code Online (Sandbox Code Playgroud)

面部颜色在animate循环中更改.