What are some simple ways to have an object stay at the fixed position on the screen, regardless of the camera's state?

Hello, I tried making some of the objects in the scene stay in the same position in relation to the camera (same position on the screen), regardless of its rotation around the centre, but none of the things I tried worked properly.

Here are some more details:

There’s a perspective camera constantly looking at (0,0,0) set up with OrbitControls, but without panning. There are some boxes in the centre of the screen which you can drag around (with DragControls) and you can rotate the camera around them or zoom in/out. But if you drag a box behind the dashed line (as seen below) then that box should start following the camera to create the illusion of it being “pinned” to the screen, despite having a position different than (0, 0, 0). If you drag that box back to the centre, than it should go back to behaving “normally”.

Here’s how it should work (as a workaround I simply attached that box to the camera when I moved it beyond the line and then added it back to the scene when I moved it back):




So I tried .attaching() the boxes to the camera but it gets pretty wonky with adding them back to the scene and dragging as well as zooming in and out. Then I experimented quite a bit with .unproject() but I couldn’t really get it to work properly.

Here’s the program (please excuse the code though, it’s my first time qorking with Three.js and I don’t have much experience with JS as a whole either). Couldn’t get it to work there though, seems like there were some problems with importing OrbitControls, sorry.

Thanks for any ideas!

To fix your fiddle: use THREE.DragControls and THREE.OrbitControls instead of DragControls and OrbitControls.