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中，您会找到与ShaderMaterial一起使用的自定义THREE.Points的示例。

three.js r.75

three.js无法在THREE.Points Geometry中渲染法线

1 个答案: