Question

我正在尝试添加outline a 3d object in three.js中描述的OutlinePass。我正在使用TransformControls来移动场景中的对象。但是，每当我尝试勾画一个对象时，看起来也会概述TransformControls。当hiddenEdgeColor更轻时，这一点尤为突出。

您可以看到我将一个TransformControl添加到THREE.js提供的OutlinePass demo的示例：

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

我添加了这个代码段：

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

如果选择除地面以外的任何对象，您将看到TransformControls亮起。

Answer 1

Lineas和Sprites遇到了同样的问题。为了解决这个问题，我在第181行编辑了outlinePass.js文件（函数VisibilityChangeCallBack）

原始

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

被修改

{{1}}

我认为您的问题将通过此更改得到解决，因为我在您的jsfiddle中只能看到transformControl的行被选中，而不是锥体。

此致

Answer 2

我只是使用最新的TransformControls，OutlinePass（包含@eskubeltz答案中提到的补丁）和THREEjs（v100）遇到了同一问题。

这似乎是对可见性标签的一些最新修改造成的。

为解决此问题，我标记了TransformControls对象：

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

..并再次修复Outline.VisibilityChangeCallBack（）函数，如下所示：

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

在THREE.js中使用TransformControls和OutlinePass

2 个答案: