如何在 Three.js 中改变面部颜色 [英] How to change face color in Three.js
问题描述
我正在尝试更改网格单个面上的颜色.这是在 WebGL 上下文中.我可以更改整个网格颜色,而不是单个 Face.相关代码如下:
//更新 Per Lee!var 相机 = _this.camera;var 投影仪 = new THREE.Projector();var vector = new THREE.Vector3( ( event.clientX/window.innerWidth ) * 2 - 1, - ( event.clientY/window.innerHeight ) * 2 + 1, 0.5 );投影仪.unprojectVector(矢量,相机);var ray = new THREE.Ray(camera.position, vector.subSelf(camera.position).normalize());var intersects = ray.intersectObjects( kage.scene.children );if ( intersects.length > 0 ) {脸=相交[0].脸;var faceIndices = ['a', 'b', 'c', 'd'];var numberOfSides = (face instanceof THREE.Face3) ?3 : 4;//为当前面的每个顶点分配颜色for( var j = 0; j
我还初始化了对象,在本例中是一个 Cube,如下所示:
//这种材质使网格使用指定给顶点的颜色var material = new THREE.MeshBasicMaterial({颜色:0xf0f0f0,底纹:THREE.FlatShading,顶点颜色:THREE.VertexColors});var directionalLight = new THREE.DirectionalLight(0xEEEEEE);directionalLight.position.set(10, 1, 1).normalize();kage.scene.add(定向光);var cube = new THREE.Mesh(new THREE.CubeGeometry(300, 300, 300,1,1,1), material);立方体动态 = 真;kage.scene.add(cube);
改变材质使立方体变成白色,而不管光的颜色如何.交集逻辑仍然有效,这意味着我选择了正确的人脸,但可惜颜色没有改变.
我是 Stackoverflow 的新手 [问一个问题,所以希望我的编辑不会令人困惑]
- 将库更新到 r53.
- 添加
vertexColors: THREE.FaceColors
材料. 最后使用
face.color.setRGB(Math.random(),Math.random(), Math.random())
.现在不需要遍历4个循环
THREE.Face4
的边 (a,b,c,d) 或 3 个边 (a,b,c)THREE.Face3
.这适用于 WebGL 和 Canvas 渲染.
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;
}
}
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.
I'm new to Stackoverflow [well asking a question that is, so hopefully my edits are not confusing]
- Update library to r53.
- Add
vertexColors: THREE.FaceColors
in material. And finally use
face.color.setRGB( Math.random(), Math.random(), Math.random())
.Now no need to traverse loop for 4 sides (a,b,c,d) for
THREE.Face4
or 3 sides (a,b,c) forTHREE.Face3
.This works in both WebGL and Canvas rendering.
这篇关于如何在 Three.js 中改变面部颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!