如何在Three.js中改变面部颜色

问题描述

我正在尝试更改网格单个面上的颜色。这是在WebGL上下文中。我可以改变整个网格颜色，而不是单个面。以下相关代码：

I am attempting to change the color on a single face of a mesh. This is in a WebGL context. I can change the entire mesh color, just not a single Face. Relevant code below:

// Updated Per Lee!

var camera = _this.camera;
var projector = new THREE.Projector();
var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1,                                  - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
projector.unprojectVector( vector, camera );

var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
var intersects = ray.intersectObjects( kage.scene.children );

if ( intersects.length > 0 ) {
    face = intersects[0].face;
    var faceIndices = ['a', 'b', 'c', 'd'];
    var numberOfSides = ( face instanceof THREE.Face3 ) ? 3 : 4;
    // assign color to each vertex of current face
    for( var j = 0; j < numberOfSides; j++ )  {
        var vertexIndex = face[ faceIndices[ j ] ];
    // initialize color variable
    var color = new THREE.Color( 0xffffff );
    color.setRGB( Math.random(), 0, 0 );
    face.vertexColors[ j ] = color;
    }
}

我还初始化了对象，在本例中是一个Cube如下所示：

I also initialize the object, in this case a Cube as follows:

// this material causes a mesh to use colors assigned to vertices
var material = new THREE.MeshBasicMaterial( {
    color: 0xf0f0f0,
    shading: THREE.FlatShading,
    vertexColors: THREE.VertexColors
});

var directionalLight = new THREE.DirectionalLight(0xEEEEEE);
directionalLight.position.set(10, 1, 1).normalize();
kage.scene.add(directionalLight);

var cube = new THREE.Mesh(new THREE.CubeGeometry(300, 300, 300,1,1,1), material);
cube.dynamic = true;
kage.scene.add(cube);

无论光线颜色如何，更改材质都会使立方体变白。
交集逻辑仍然有效，这意味着我选择了正确的面，但是唉颜色没有变化。

Changing the material makes the cube white regardless of the light color.The intersection logic still works, meaning i select the correct face, but alas the color does not change.

我是Stackoverflow的新手[好问一个问题是，所以希望我的编辑不会混淆]

I'm new to Stackoverflow [well asking a question that is, so hopefully my edits are not confusing]

推荐答案

• 将库更新到r53。


• 在
  材料中添加 vertexColors：THREE.FaceColors 。



• 最后使用 face.color.setRGB（Math.random（），
Math.random（），Math.random（） ）。

  现在无需遍历4
  边的循环（a，b，c，d） THREE.Face4 或3边（a，b，c）为
  THREE.Face3 。

  Now no need to traverse loop for 4sides (a,b,c,d) for THREE.Face4 or 3 sides (a,b,c) forTHREE.Face3.

  这适用于WebGL和Canvas渲染。

  This works in both WebGL and Canvas rendering.

  这篇关于如何在Three.js中改变面部颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！