javascript - 动态几何体上的面法线

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) 您需要设置 Material 的环境反射率。将其设置为等于漫反射率或颜色是合理的。

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 是个好主意吗？

三.js r.63