Question

我正在尝试为网格创建顶点动画。想象一下顶点着色器，但是用软件代替硬件。

基本上我所做的是将变换矩阵应用于每个顶点。网格没关系，但法线看起来并不好看。我尝试使用 computeVertexNormals（）和 computeFaceNormals（），但它不起作用。

以下代码是我用于动画的代码（ initialVertices 是CubeGeometry生成的初始顶点）：

for (var i=0;i<mesh1.geometry.vertices.length; i++)
{
    var vtx=initialVertices[i].clone();
    var dist = vtx.y;

    var rot=clock.getElapsedTime() - dist*0.02;

    matrix.makeRotationY(rot);

    vtx.applyMatrix4(matrix);
    mesh1.geometry.vertices[i]=vtx;
}
mesh1.geometry.verticesNeedUpdate = true;

这里有两个例子，一个正常使用 CanvasRenderer ：

http://kile.stravaganza.org/lab/js/dynamic/canvas.html

以及 WebGL 无效的：

http://kile.stravaganza.org/lab/js/dynamic/webgl.html

知道我缺少什么吗？

Answer 1

你遗漏了几件事。

（1）您需要设置材质的环境反射率。将其设置为等于漫反射，或color。

是合理的

var material = new THREE.MeshLambertMaterial( {
    color:0xff0000,
    ambient:0xff0000
} );

（2）如果要移动顶点，则需要以正确的顺序更新质心，面法线和顶点法线。查看源代码。

mesh1.geometry.computeCentroids();
mesh1.geometry.computeFaceNormals();
mesh1.geometry.computeVertexNormals();

（3）当您使用WebGLRenderer时，您需要设置所需的更新标志：

mesh1.geometry.verticesNeedUpdate = true;
mesh1.geometry.normalsNeedUpdate = true;

提示：在紧密循环中避免使用new和clone是个好主意。

three.js r.63

面对动态几何体的法线

1 个答案: