I thought why not give it a try:
I didn’t think three.js already included that. But I also lack the overview to recognize it immediately. So I would have done a lot of work for nothing if I had tried to implement the algorithm.
Once again an efficient solution!
I played around a little.
With THREE.LineSegments
you see the sphere very beautiful.
// ****************** + *********************
const lsGeo = new THREE.BufferGeometry( );
const lsPos = new Float32Array( 200 * 3 );
lsGeo.setAttribute( 'position', new THREE.BufferAttribute( lsPos, 3 ) );
for ( i = 0; i < pts.length; i ++ ) {
lsPos[ i * 6 ] = pts[ i ].x;
lsPos[ i * 6 + 1 ] = pts[ i ].y;
lsPos[ i * 6 + 2 ] = pts[ i ].z;
lsPos[ i * 6 + 3 ] = unitPts[ i ].x;
lsPos[ i * 6 + 4 ] = unitPts[ i ].y;
lsPos[ i * 6 + 5 ] = unitPts[ i ].z;
}
const lsMaterial = new THREE.LineBasicMaterial({ color: "white"});
const ls = new THREE.LineSegments( lsGeo, lsMaterial );
scene.add( ls );
// *******************************************
One would still have to display the colors according to the distance from the origin.