Question

我在使用Three.js时学习OOP。我知道，这很难做到。所以我在场景中创建了一个盒子。现在我想改变那个立方体一面的颜色。

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 100, window.innerWidth/window.innerHeight, 0.1, 1000 );
camera.position.set(5, 5, 10);

var geo = new THREE.BoxGeometry(5,2,5);
var mat = new THREE.MeshBasicMaterial({color:0xff0ff0, side:THREE.DoubleSide});

var mesh = new THREE.Mesh( geo, mat);
scene.add(mesh);

//Right there i want to chance color of the face. Its not working
mesh.geometry.faces[5].color.setHex( 0xffffff ); 

var edge = new THREE.WireframeHelper( mesh, 0x00ff00 );
scene.add(edge);

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
renderer.render(scene, camera);

编辑：它对我不起作用的原因是我使用的颜色 0xffffff 。除非颜色为0xffffff，否则此程序将起作用。

Answer 1

在您的情况下，如果您想要更改多维数据集的一个面的颜色，则需要在材质中指定vertexColors。

var geo = new THREE.BoxGeometry( 5, 2, 5 );

var mat = new THREE.MeshBasicMaterial( { color:0xff0ff0, vertexColors: THREE.FaceColors } );

var mesh = new THREE.Mesh( geo, mat );

mesh.geometry.faces[ 5 ].color.setHex( 0x00ffff );

渲染的面部颜色将是指定的面部颜色由材质颜色着色。

如果在网格渲染至少一次后更改了面部颜色，则必须设置：

mesh.geometry.colorsNeedUpdate = true;

three.js r.80

改变立方体一面的颜色 - THREE.js

1 个答案: