How to render THREE.Group always Infront of other items

Question

Im trying to render a set of transform controls so that they are always visible to the user. However, When I set DepthWrite to false or use the AlwaysDepth function on the transform controls, I get the desired outcome, but the individual components of the transform controller render on top of each other too.

With DepthWrite set to false:

The issue (example):

Desired outcome (what transform controls are supposed to look like)

Is there anyway to set DepthWrite to false for a THREE.Group and not its individual components so that the group renders in front of other objects, but the individual components of the transform controls behave as if DepthWrite is set to true so that they don't render in front of each other?

Try https://stackoverflow.com/a/12666937/1461008. – WestLangley Mar 25 '23 at 20:18 — WestLangley, Mar 25 '23 at 20:18

score 3 · Accepted Answer · edited Mar 26 '23 at 20:33

You could keep your controls in a separate scene, so they can be rendered separately, after the main scene. You'd also need to clear the depthBuffer in between render calls, so it gets rendered on top of all previously-rendered objects. Here's some pseudo-code to explain the concept:

const controls = new THREE.Group();
const scene2 = new THREE.Scene();

scene2.add(controls);
scene2.autoClear = false

// Render loop
update() {
  renderer.clear()

  // Render all your regular objects
  renderer.render(scene1, camera);

  // Clear the depthBuffer
  renderer.clearDepth();

  // Render your controls
  renderer.render(scene2, camera);
}

You can read more details about .clearDepth() in the docs.

How to render THREE.Group always Infront of other items

1 Answers1