javascript 更改立方体面的颜色

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/14924187/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 22:56:36  来源:igfitidea点击:

Change the colors of a cube's faces

javascriptcolorsthree.jsmeshface

提问by David Gomes

I actually found thisquestion, but it says material.colordoesn't exist. I need to know how to change the colors of the various faces of a cube I'm drawing:

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

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

回答by WestLangley

Here is how you set and change the colors of a cube's faces:

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

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: true } );

If geometry.faces[i].coloris changed after the geometry has been rendered, you must set geometry.colorsNeedUpdate = true. ( This is not required for canvasRenderer. )

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

three.js r.84

三.js r.84

回答by Wilt

Here is a fiddlefor people who end up here and want to see this code working.

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

I made a box and tied 3 colors to the faces:

我做了一个盒子,在脸上绑了 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];
}

The face colors are changed in the animateloop.

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



Also check a related question herewith a great answerdemonstrating the use of material indices and groups on THREE.BufferGeometryinstances.

还可以在这里查看一个相关问题,其中有一个很好的答案,演示了在THREE.BufferGeometry实例上使用材料索引和组。