Position a Plane mesh on the upper right corner of the camera view always like a minimap HUD

Questions
1

Does anybody know how I can position a Plane object over the upper right corner of a user’s camera view and make it stick there regardless if the camera position and rotation moves? The final effect I wish to achieve is making the Plane object look like minimap of a HUD like you see in FPS games or any game for that matter. I’ve kind of solved the issue of keeping the Plane object to always face the camera but I have failed to somehow make the Plane object stick to the upper right corner always. Tried searching for hours on this forum and stackoverflow but couldn’t really find a topic or answer that addresses my problem

2

Theres a couple of ways you could go about it…

camera.add(plane) and position the plane relative to the camera position, one caveat is that the camera has to be added to the scene afaia.

Or.

const offset = new Vector3() 

//animation loop
plane.position.copy(camera.position.clone().add(offset))
plane.rotation.copy(camera.rotation)

Whereby you can find a calculation to set the offset x y from the window dimensions and it’s z position from a depth in the scene relative to the fov and screen size…

Bare in mind that objects very close to the edge of the screen can be quite heavily affected by lens perspective warp / distortion depending on the fov. One way to work around this would be to just overlay a 2d <div> over the threejs canvas or use a secondary “view” to render to…

3

If it doesn’t have to be a Plane then sprites are probably the easiest way to go. Unless you want to use an HTML element.
three.js examples (threejs.org)

2 Likes
4

i would suggest you neither use camera nor sprites for this, in the worst case these can jitter. it’ll also all bleed, scene objects like light, environment maps, shadows, etc will affect it. a hud is probably better off being isolated. just render your hud on top of the previous render, couldn’t be easier imo.

gl.autoClear = false
gl.render(scene, camera)
gl.render(hudScene, hudOrthoCamera)
2 Likes
5

See three-hud - CodeSandbox for a basic example of @drcmda suggestion.