4

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.

Community
  • 1
  • 1
joel
  • 41
  • 3

3 Answers3

5

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 )
FabienRohrer
  • 1,794
  • 2
  • 15
  • 26
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

eskubeltz
  • 11
  • 1
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

Vít Zadina
  • 168
  • 8