three.js 无法在 THREE.Points 几何中渲染法线答案

【问题标题】：three.js fails to render the normals in a THREE.Points Geometrythree.js 无法在 THREE.Points 几何中渲染法线
【发布时间】：2016-04-12 22:22:45
【问题描述】：

我对threejs 很陌生。我目前正在开发一个需要通过 Qt5 Canvas3D 使用three.js 渲染点云的项目。根据threejs.org 的示例，我使用了一个BufferGeometry 并设置了它的属性（位置和法线）。然后我使用 THREE.Points 和 THREE.PointsMaterial 来包装它。结果是我可以渲染场景中的点，但是，在每个顶点上设置的法线似乎被忽略了。代码sn-p如下所示：

var vertexPositions = [
[10, 10, 0, 1, 0, 0],
[10, -10, 0, 1, 0, 0],
[-10, -10, 0, 1, 0, 0]
];
geometry = new THREE.BufferGeometry();
    var vertices = new Float32Array( vertexPositions.length * 3 );
    for ( var i = 0; i < vertexPositions.length; i++ )
        {
            vertices[ i*3 + 0 ] = vertexPositions[i][0];
            vertices[ i*3 + 1 ] = vertexPositions[i][1];
            vertices[ i*3 + 2 ] = vertexPositions[i][2];
        }
    var normals = new Float32Array( vertexPositions.length * 3 );
    for ( i = 0; i < vertexPositions.length; i++ )
        {
            normals[ i*3 + 0 ] = vertexPositions[i][3];
            normals[ i*3 + 1 ] = vertexPositions[i][4];
            normals[ i*3 + 2 ] = vertexPositions[i][5];
        }
    var colors = new Float32Array( vertexPositions.length * 3 );
    for ( i = 0; i < vertexPositions.length; i++ )
        {
            colors[ i*3 + 0 ] = 1;
            colors[ i*3 + 1 ] = 0;
            colors[ i*3 + 2 ] = 0;
        }
    geometry.addAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
    geometry.addAttribute( 'normal', new THREE.BufferAttribute( normals, 3 ) );
    geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );
    material = new THREE.PointsMaterial({size:50, vertexColors:THREE.VertexColors});

    mesh = new THREE.Points(geometry, material);
    scene.add(mesh);

如何在顶点上设置法线来渲染点云？我错过了什么？任何建议，将不胜感激。谢谢！

【问题讨论】：

PointsMaterial 不使用任何法线。
@WestLangley 感谢您的回复！如果 PointMaterial 无法帮助我进行渲染，即我需要在每个顶点上渲染带有法线的点云以便与灯光交互，我该如何实现呢？使用 ShaderMaterial 编写我自己的片段着色器？

标签： javascript three.js qtquick2

【解决方案1】：

您想要渲染点云并让它与灯光交互。

为此，您必须创建一个自定义ShaderMaterial。

在this answer 中，您将找到与THREE.Points 一起使用的自定义ShaderMaterial 示例。

three.js r.75

【讨论】：

谢谢@WestLangley，我将使用ShaderMaterial。