Using TransformControls with OutlinePass in THREE.js

Question

I'm trying to add an OutlinePass described in outline a 3d object in three.js. I'm using TransformControls to move objects in my scene. However, whenever I try to outline an object, it looks like the TransformControls are being outlined as well. This is especially prominent when the hiddenEdgeColor is lighter.

You can see an example where I added a TransformControl to the OutlinePass demo provided by THREE.js:

https://jsfiddle.net/ye0e47dv/3/

I added this snippet:

let gizmo = new THREE.TransformControls(camera, renderer.domElement);
scene.add(gizmo);
gizmo.attach(floorMesh);

If you select any object other than the ground, you'll see the TransformControls light up.

FabienRohrer · Accepted Answer · 2019-01-29 13:43:03Z

4

I just ran into the same issue using up-to-date TransformControls, OutlinePass (containing the patch mentioned in the answer of @eskubeltz) and THREEjs (v100).

It seems that some recent modifications on the visiblity tags are responsible of this.

To solve this, I tag the TransformControls objects:

control = new THREE.TransformControls(camera, domElement);
control.traverse((obj) => { // To be detected correctly by OutlinePass.
  obj.isTransformControls = true;
});

.. and fix again the Outline.VisibilityChangeCallBack() function like following:

if ( object.isMesh || object.isLine || object.isSprite || object.isTransformControls )

answered Jan 29, 2019 at 13:43

FabienRohrer

1,8523 gold badges16 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

eskubeltz · Accepted Answer · 2017-01-16 17:01:37Z

1

I have had the same problem with Lineas and Sprites. To fix this problem, I edited the file outlinePass.js in the line 181 (function VisibilityChangeCallBack)

Original

if (( object instanceof THREE.Mesh ) {

Edited

if (( object instanceof THREE.Mesh ) || (object instanceof THREE.Sprite) || (object instanceof THREE.Line)) {

I think your problem will be fixed with this change, as I could see in your jsfiddle only the lines of the transformControl are selected, not the cones.

Regards

answered Jan 16, 2017 at 17:01

eskubeltz

111 bronze badge

1 Comment

Wulf Over a year ago

Thank you, was facing the same issue with simple sprites added to the scene.

Vít Zadina · Accepted Answer · 2021-10-04 14:58:05Z

0

In three version 0.132.2 just add || object.isTransformControls to VisibilityChangeCallBack(). Updated OutlinePass code is here (with three module imports changed). You can use this OutlinePass - https://paste-bin.xyz/6023

answered Oct 4, 2021 at 14:58

Vít Zadina

5723 silver badges11 bronze badges

Collectives™ on Stack Overflow

Using TransformControls with OutlinePass in THREE.js

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related