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

Question

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!

@WestLangley Thanks for your reply! If PointMaterial cannot help me do the rendering things, which is I need to render a point cloud with normals on each vertex in order to interact with the lights, how can I achieve that? Writing my own fragment shader using ShaderMaterial? — Jimmy Chen, Apr 12 '16 at 14:15

score 2 · Accepted Answer · edited May 23 '17 at 12:16

2

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

edited May 23 '17 at 12:16

Community

1
1

answered Apr 12 '16 at 14:22

WestLangley

102,557
10
276
276

Thanks @WestLangley, I am going to use ShaderMaterial. – Jimmy Chen Apr 13 '16 at 04:36

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

1 Answers1

Linked