Outline rendering on transform gizmo

Questions
1

Hello,

In my 3js scene, I am trying to render outline for selected 3d model using OutlinePass which works as expected.

image
image415×280 10.7 KB

I am also using TransformControls with gizmo, so user can move the 3d model in the scene.

The problem I am facing is when transform gizmo is enabled, the outline is also rendered on the transform gizmo.

image
image412×395 25.9 KB

I want to render the outline only on the model and needs to exclude the transform gizmo. How can I achieve that?

I am also sharing link to code sandbox for live preview - https://codesandbox.io/p/sandbox/2r75xw?file=%2Fsrc%2FApp.tsx%3A97%2C15 that explains the problem.

Any thoughts on how to fix this issue? Any help is appreciated.

Thanks in advance.

2

const animate = () => {
requestAnimationFrame(animate);
orbitControls.update();

  gizmos.visible = false;
  renderer.autoClear = false;

  // Use composer render instead of standard renderer
  if (composer) {
    composer.render();
  }

  gizmos.visible = true;
  renderer.render(scene, camera);

  renderer.autoClear = true;
};
2 Likes