Question

我正在学习 Javascript，专注于 ThreeJS 并希望实现特定功能：

设置：

我在三个 JS 中创建了一个场景，其中包含一个 .glb 模型、多个位于模型周围的精灵（标记）。 Raycaster 确定 Sprite 元素是否悬停。

我想添加的功能：

当单击 Sprite 时，相机应以一种方式定位自身，以捕捉 Sprite 正下方模型部分的特写。最佳情况：此过渡使用 Tween.JS（或类似的）来获得平滑的外观，并在再次单击特写场景时将相机位置重置回单击精灵之前的位置。

我的尝试：

我在我的项目中添加了three.interactive，因为它似乎是将事件添加到场景中特定对象的最简单方法。我将一个 onclick 事件附加到第一个 Sprite 对象，到目前为止它可以工作。在这种情况下，我使用我使用延迟的 console.log 获得的坐标设置 a b c d 1 1,5,8,13 2,6,10,14 3,7,11,15 4,8,12,16，这使我能够打开我的文档，根据需要定位相机并复制新的 x、y、z 值。

camera.controls.set(x,y,z)

点击指定的 Sprite 会移动相机。但结果与之前上演的场景并不相同。我相信这是由于一些我目前还不明白的全局位置值。

THREE.js 文件（非常感谢一般反馈，新手在这里）

sprite.addEventListener("click", (event) => {
        camera.position.set(-4,1,2);
    });

在 onclick 事件期间重新定位相机 (OrbitControls)

0 个答案: