Lil-gui 无法与 vue 3（三.js）一起使用

Question

我正在开发一个基于 Three.js 和 Vue 3 的项目，我正在使用 Bruno Simon 的模板复合体。当我迁移到 Vue 时，lil gui 不再工作了。仍然可见但不可交互，所有滑块值都不起作用。

唯一有效的调试属性是复选框。

即使是一个简单的 html

<input type="range">

也不起作用。单击时无法拖动两侧的滑块。

代码在这里如果你想看一下:)

Answer 1

该项目并不容易调试，但这是你的问题

this.experience.on('ready', async () => {
  this.locations = this.locations.getLocations()
  this.scene = this.experience.scene
  await this.setEvents()
})

/src/exprience/Utils/Pointer.js

 中的第 34-38 行。评论这使得 GUI 可以完美工作，但会禁用整个场景交互。

GUI 面板在移动设备和键盘上运行得非常好。

因此，我认为您劫持了鼠标的默认行为，并且不允许触发默认侦听器。

事实确实如此。您可能需要改进它，以便您可以说“如果鼠标侦听器但是在 GUI 面板上，那么就这样做”。

截至目前，您有点通过面板进行监听，并期望它在场景中充当指针，而不是常规的鼠标单击。