How to build a HUD in a single scene with a single camera?

So I am trying to create a HUD and have seen many useful approaches.
But my question is this, is it possible to create a flat HUD while only using a single scene and a perspective camera? I am guessing no because the perspective camera would always distort the 2D content. But I wanted to ask anyways if there was some hack to make this possible.

You add your object3Ds to you camera instead of adding to the scene. That way they are always in the same position reference the camera position and rotation, no matter which way your camera is facing.
eg
camera.add(yourobject3d);
instead of
scene.add(yourobject3d);

It’s the technique I used here,


and is still claimed to be impossible to achieve here

Set you object to be offset slightly on the z axis so that it is not placed at the same position as your camera and then culled by the camera frustum.

By default, the text and graph in my example is always in the centre of your vision unless you set its offsets.
Also, my example is a WebVR library I created many years ago, seems to only work in firefox, but the screen grabs should hopefully get the point across.
image

1 Like

Ha ha they said it was impossible? That’s strange, because I totally came up with the exact same solution that you did before reading your post. Thank you for the reply! Great to see that it worked for you as well :slight_smile:

Excellent, it works very well.

To minimise the perspective of the object you added to your camera. Create it as a relatively flat object, and make it face towards the camera position.

mesh.quaternion.copy(camera.quaternion);

The text and my graph(which is a THREE.PlaneGeometry) in my example are already flat.

1 Like