Three.js - 修复扭曲几何体时扭曲的光照答案

【问题标题】：Three.js - fixing distorted lighting when twisting the geometryThree.js - 修复扭曲几何体时扭曲的光照
【发布时间】：2018-08-14 23:58:05
【问题描述】：

我正在研究一种几何形状，它基本上是一根绕 z 轴扭曲特定角度的杆。这是通过根据它们沿 z 方向的位置修改 ExtrudeGeometry 的顶点来完成的：

function twistMesh(mesh, helixAngle){
    var vertices = mesh.geometry.vertices;
    for (var i = 0; i < vertices.length; i++) {
        var angle = helixAngle*vertices[i].z/100;
        var updateX = vertices[i].x * Math.cos(angle)
                                    - vertices[i].y * Math.sin(angle);
        var updateY = vertices[i].y * Math.cos(angle)
                                    + vertices[i].x * Math.sin(angle);
        vertices[i].x = updateX;
        vertices[i].y = updateY;
    }
    return mesh;
}

可以在here 找到一个工作示例。

我遇到的问题是光照没有随着修改的顶点一起更新，即看起来好像入射到表面上的光被同样修改了。

我已经读到，在修改更新调用时需要通过设置：

mesh.geometry.verticesNeedUpdate = true;
mesh.geometry.normalsNeedUpdate = true;

但是，这似乎并不能解决我看到的照明问题。

以这种方式扭曲我的几何图形时，如何更新或以其他方式“修复”扭曲的光照？

【问题讨论】：

标签： three.js

【解决方案1】：

更新顶点后，还需要更新顶点法线。

您可以手动执行此操作，您将拥有最多的控制权，或者您可以使用内置方法：

mesh.geometry.computeVertexNormals();

更新小提琴：http://jsfiddle.net/pamv8krb/144/

three.js r.95

【讨论】：