在 Three.js 中动态改变顶点颜色 [英] Dynamically change Vertex Color in Three.js

问题描述

我使用 Three.js 57 版本.现在我正在使用 JSONLoader 制作动画.我成功获得了动画.但我想为动画中的每一帧更新网格的完整顶点颜色.这在three.js中可能吗

I am using Three.js 57 version. Now I am working in animation using JSONLoader. I got the animation successfully. But I want to update full vertex color of mesh for each frame in animation. Is this possibe in three.js

提前致谢

推荐答案

CanvasRenderer 目前不支持顶点颜色.

Vertex colors are currently not supported in CanvasRenderer.

以下是 WebGLRenderer 需要遵循的模式:

Here is the pattern you need to follow for WebGLRenderer:

在为网格创建材质时设置THREE.VertexColors；

Set THREE.VertexColors when you create the material for the mesh;

material.vertexColors = THREE.VertexColors;

还要确保为几何图形的每个面定义了 vertexColors.

Also make sure that vertexColors are defined for each face of your geometry.

geometry.faces[ faceIndex ].vertexColors[ vertexIndex ] = new THREE.Color( 0xff0000 );

然后在渲染循环中，要更改顶点颜色，请执行以下操作:

Then in your render loop, to change a vertex color, do this:

geometry.faces[ faceIndex ].vertexColors[ vertexIndex ].setHSL( Math.random(), 0.5, 0.5 );
mesh.geometry.colorsNeedUpdate = true;

three.js r.59

three.js r.59

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