CODEWITHSUNDEEP
javascriptthree.jsqtquick2
Jimmy Chen
Jimmy Chen

Reputation: 520

three.js fails to render the normals in a THREE.Points Geometry

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!

Upvotes: 1

Views: 900

Answers (1)

WestLangley
WestLangley

Reputation: 104833

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

To do so, you must create a custom ShaderMaterial.

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

three.js r.75

Upvotes: 2

Related Questions