THREE.Points() jumping/flickering when used with big X,Y coordinates and OrbitControls

Questions
,
1

Here is a fiddle with the problem:

Rotate the scene and you will see the Point jumping around (while the axisHelper stays at its position, as it should).

I noticed that if I use small numbers for X,Y (e.g. 0, 0) I do not have such a problem. For example, uncomment lines 3,4 (and comment out 6, 7) in the above fiddle to test it.

Why is there such a problem with Points and big X,Y numbers?

Thank you in advance,
Konstantinos

2

This could be related to a floating point precision issue. Consider to use a simple plane mesh to replace the point like in the following example: Edit fiddle - JSFiddle - Code Playground

The line dot.quaternion.copy(camera.quaternion); ensures the plane always looks towards the camera.

3

You can stick with Points and use the code below:

const dotGeometry = new THREE.BufferGeometry();
dotGeometry.setAttribute( 'position', new THREE.Float32BufferAttribute([0,0,0], 3 ) );

const dotMaterial = new THREE.PointsMaterial( { size: 0.1, color: 'red' } );
const dot = new THREE.Points( dotGeometry, dotMaterial );
dot.position.set(...pointPosition)

The key is, as Michael’s fiddle shows, to store the big numbers in the transformation matrix (dot.position / dot.matrix) rather than the vertex attributes (dotGeometry.attributes)