Recently delving into the world of threejs, I find myself faced with a project that demands rendering a point cloud using three.js through the Qt5 Canvas3D. Following the examples on threejs.org, I opt for a BufferGeometry where I set the attributes (position and normal) and then encapsulate it with THREE.Points and THREE.PointsMaterial. While this successfully allows me to display the points in the scene, I'm encountering an issue where the normals set on each vertex appear to be disregarded. Here's a snippet of the code I'm dealing with:
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);
My quest now is to figure out how to successfully render the point cloud with normals set on the vertices. What might I be overlooking or missing in my approach? Any guidance or suggestions on this conundrum would be deeply appreciated. Many thanks in advance!