How to stop one object "sliding" atop another as camera moves

Questions
1

I have a perspective camera with the standard settings shown here.

I have a TV model loaded at a fixed position:

export const TV_POSITION = new THREE.Vector3(0, TV_Y, TV_Z);
tv.position.set(TV_POSITION.x, TV_POSITION.y, TV_POSITION.z);

I then create a circle which should be positioned in the middle of the TV.

    const circle = new THREE.Shape();
    const x = 0;
    const y = 0;
    const radius = 10;
    circle.absarc(x, y, radius);

    const segments = 100;
    const geometry = new THREE.ShapeGeometry(circle, segments / 2);

    const material = new THREE.MeshBasicMaterial({
      color: "white",
      side: THREE.DoubleSide,
      depthWrite: false
    });

    const mesh = new THREE.Mesh(geometry, material);
    mesh.position.z = TV_POSITION.z
    mesh.position.y = TV_POSITION.y + this.tvHeight/2
    mesh.position.x = TV_POSITION.x

    var geo = new THREE.EdgesGeometry(mesh.geometry );
    var mat = new THREE.LineBasicMaterial( { color: 0x000000 } );
    var wireframe = new THREE.LineSegments( geo, mat );
    mesh.add(wireframe)

    this.scene.remove(this.Yaxis);
    this.scene.remove(this.Xaxis);
    this.scene.add(mesh);

The camera is set to look at the TV

this.camera.lookAt(TV_POSITION.x, TV_POSITION.y, TV_POSITION.z)

When the camera is facing the TV directly, I see a circle in the middle of the TV like this:

noslide
noslide1258Ă—860 64.7 KB

But if the camera is looking at the TV from a non-direct angle, the circle seems to slide around to the side of the TV. Here it has slid far to the left

slide
slide1920Ă—1000 101 KB

This does not seem to be how I perceive similar visual stimuli in the world. If I move around one object that is in the center of another it seems to remain at the center as I move.

Assuming I am not misunderstanding intended behavior of three.js, is there a way to “fix” the circle to the TV so that it does not slide like this as the camera moves?

Thanks!

2

You want place circle into point of camera raycast to tv?

3

A sliding effect can be a result of the circle being away from the surface of the TV screen.

4

Created an example to illustrate what I mean. Use the mouse to rotate the scene. The upper TV has a sliding effect because the circle is away from the TV surface.

https://codepen.io/boytchev/full/vYzWqJb

image

3 Likes
5

Pavel that was totally it. What happened was I adjusted the z position of the white square that was the TV “screen” so the circle was visible. The z position was adjusted by 10 pixels. This created a 10-pixel gap. When I greatly reduced this gap to .02 pixels the sliding went away.

Thanks for your quick and knowledgeable help!

1 Like