改变立方体一个面的颜色 - THREE.js [英] Change color of one face of the cube - THREE.js

问题描述

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

I am learning OOP while using Three.js. I know, a hard way to do it. So i created a box in the scene. Now i want to change color of one face of that cube.

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，否则此程序将正常工作.

the reason it did not work for me was the color i used 0xffffff. This program will work unless color is 0xffffff.

推荐答案

在你的情况下，如果你想改变立方体的一个面的颜色，你需要在你的材料.

In your case, if you want to change the color of one face of the cube, you will need to specify vertexColors in your material.

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 ); 

渲染的人脸颜色将是指定的人脸颜色被材质颜色着色.

The rendered face color will be the specified face color tinted by the material color.

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

If you change a face color after the mesh has been rendered at least once, you will have to set:

mesh.geometry.colorsNeedUpdate = true;

three.js r.80

three.js r.80

这篇关于改变立方体一个面的颜色 - THREE.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！