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:
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
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!