Three.js导入GLTF树模型后OutlinePass悬停高亮异常求助

我在Three.js项目中实现了鼠标悬停物体时显示轮廓的功能，使用项目内创建的基础网格（如立方体）时功能正常。但导入GLTF格式的树模型（随机从5种树中选择1棵渲染）后，OutlinePass出现异常：鼠标悬停该树时，当前树消失，另一棵不同类型的树出现并被高亮。移除OutlinePass后项目运行正常，且生产环境及StackBlitz简化示例中功能表现正常。

相关代码片段 #

constructor({ canvas }: { canvas: HTMLCanvasElement }) {
  this.renderer = new WebGLRenderer({ canvas, antialias: true, logarithmicDepthBuffer: true })
  this.composer = new EffectComposer(this.renderer)
  this.outlinePass = new OutlinePass(new Vector2(window.innerWidth, window.innerHeight), this.scene, this.camera)
  this.outlinePass.visibleEdgeColor = new Color('yellow')

  const renderPass = new RenderPass(this.scene, this.camera)
  this.composer.setSize(window.innerWidth, window.innerHeight)
  this.composer.addPass(renderPass)
  this.composer.addPass(this.outlinePass)

  window.addEventListener('mousemove', this.onMouseMove)
}

onMouseMove = (e: any) => {
  this.raycaster.setFromCamera({
    x: (e.clientX / window.innerWidth) * 2 - 1,
    y: -(e.clientY / window.innerHeight) * 2 + 1
  }, this.camera)

  const intersects = this.raycaster.intersectObjects(this.group.children, true)

  if ( intersects.length > 0 ) {
    var object = intersects[0].object
    while (object.parent && !object.userData.outline) object = object.parent

    this.outlinePass.selectedObjects = [object]
  } else this.outlinePass.selectedObjects = []
}

draw = () => {
  this.animation = requestAnimationFrame(() => this.draw())
  
  this.composer.render()
  this.arrayOfObjects.forEach(object => object.draw())
}

treeRender = () => {
  this.loader.load(treeModelPaths[getRandomTreeIndex()], (gltf) => {
    const scene = gltf.scene

    this.group.add(scene)
  })
}

补充信息 #

• 异常表现：鼠标悬停树模型时，当前显示的树消失，另一棵不同类型的树出现并被黄色轮廓高亮
• 存在完整代码仓库、生产环境演示版本，以及功能表现正常的StackBlitz简化示例

内容的提问来源于stack exchange，提问作者Jakub Hampl