Three.js 无法渲染 THREE.Points Geometry 中的法线 [英] three.js fails to render the normals in a THREE.Points Geometry

问题描述

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

I am quite new to threejs. I am currently working on a project that needs to render a point cloud using three.js via the Qt5 Canvas3D. According to the examples of threejs.org, I use a BufferGeometry and set its attributes(position and normal). Then I use a THREE.Points and THREE.PointsMaterial to wrap it. The result is that I can render the points in the scene, however, the normals set on each vertex seem to be ignored. The code snippet is shown below:

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

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

How to render the point cloud with normals set on vertices? What am I missing? Any suggestions would be appreciated. Thanks!

推荐答案

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

You want to render a point cloud and have it interact with lights.

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

To do so, you must create a custom ShaderMaterial.

在这个答案中，您会找到一个与 THREE.Points 一起使用的自定义 ShaderMaterial 示例.

In this answer you will find an example of a custom ShaderMaterial that is used with THREE.Points.

three.js r.75

three.js r.75

这篇关于Three.js 无法渲染 THREE.Points Geometry 中的法线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！