javascript - Three.js 无法渲染 THREE.Points 几何体中的法线

Question

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

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

如何渲染在顶点上设置法线的点云？我缺少什么？任何建议，将不胜感激。谢谢!

Answer 1

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

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

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

三.js r.75