我怎样才能通过Vertex和amp;面对Three.js着色器的法线？

Question

如果我理解正确， THREE.Geometry 方法， .computeFaceNormals（） ＆amp; .computeVertexNormals（） ，每个都为'innate'属性数组赋值，“normal”。

所以，如果我想使用两个 vertex-＆amp;在一个着色器中使用face-normals，我必须：

1. 计算面部法线
2. 将结果（从'normals'）克隆到新的属性数组（即'fNormals'）
3. 计算顶点法线
4. 渲染...

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

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();

编辑：好的，意识到一些错误＆amp;我调试时编辑这个。仍然不确定如何处理生成的法线...

感谢您的任何见解 -

Answer 1

您可以在mesh.geometry.faces[].normal中访问面部法线。

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
}

如果将属性绑定到faces：

，这应该有效

attributes: {
    fNormal: { type: "v3", value: [], boundTo: 'faces' }
},

您可以在webgl_materials_wireframe

中找到有关如何使用自定义属性的示例