Javascript 我如何通过Vertex&；将面法线设置为3.js着色器？

如果我理解正确，三个.Geometry方法，.computeFaceNormals（）&.computeVertexNormals（），每个方法都将值分配给“固有”属性数组“normal”

因此，如果我想在单个着色器中同时使用顶点法线和面法线，我必须：

计算面法线

将结果（从“法线”）克隆到新的属性数组（即“fNormals”）

计算顶点法线

渲染

到目前为止，使用这种方法，我正在尝试：

var shader = new THREE.ShaderMaterial(
    {
        attributes: {
            fNormal: { type: "v3", value: [] }
        },
        //uniforms, vertexShader, etc...
    } );

//load a mesh & assign the shader to it...

//setup both vertex & face normals for use in shader

mesh.geometry.computeFaceNormals();

//clone above face-normals to 'fNormal' array:

for (var i=0; i < mesh.geometry.attributes[ 'normal' ].length; i++){
  var cloned = mesh.geometry.attributes[ 'normal' ].value[i];
  shader.attributes[ 'fNormal' ].value[i] = cloned;
}

//now calculate vertex normals & place them in the 'normal' attribute:
mesh.geometry.computeVertexNormals();

var shader=new THREE.ShaderMaterial(
{
属性：{
fNormal:{type:“v3”，值：[]}
},
//制服、顶点着色器等。。。
} );
//加载网格并将着色器指定给它。。。
//设置顶点和面法线以在着色器中使用
mesh.geometry.computeFaceNormals（）；
//将面法线上方的克隆到“fNormal”数组：
对于（var i=0；i

编辑：好的，意识到一些错误&在调试时编辑它。仍然不确定如何处理生成的法线

---

感谢您提供的任何见解-

您可以在

网格.geometry.faces[]中访问面法线

for (var i=0; i < mesh.geometry.faces.length; i++){
    shader.attributes.fNormal.value[i] = mesh.geometry.faces[i].normal;
    //I don't think you need to clone the normal vertex here
}

您可以在
中找到一个如何使用自定义属性的示例是的，当您的回答证实了这一点时，我刚刚进入正确的轨道。谢谢直到现在我才意识到“庞德托”。不过，我还是感到困惑：当我需要的是一个等于顶点数的数组时，这不是设置了一个等于面数的长度数组吗？@Jackalope你可以看到，当
boundTo==='faces'
时，它实际上使用了面上所有三个顶点的法线值。
attributes: {
    fNormal: { type: "v3", value: [], boundTo: 'faces' }
},