reactjs - react 三纤维 : How to switch between TrackballControls and OrbitControls?

标签 reactjs three.js react-three-fiber

我正在尝试在react-three-fiber中创建一个查看器与 react-three/drei我可以在 OrbitControls 和 TrackballControls 之间切换。 问题是,当从 TrackballControls 切换到 OrbitControls 时,相机旋转的轴会发生变化,因为 TrackballControls 在移动时会改变向上矢量。

我在codesandbox中创建了几个最小的示例来解释我解决这个问题的方法并展示我遇到的困难。

基本案例

这显示了在不同控件类型之间切换的初始尝试:
https://codesandbox.io/s/r3f-camera-controllers-base-neu07

尝试#1

显然,这不起作用,所以我尝试将向上向量重置为 (0, 1, 0) 并调用 lookAt()。这似乎最初是有效的,因为相机会正确地重新调整方向(这就是它应该的样子)。然而,它并没有绕正确的轴旋转,而是以奇怪的弧线移动。参见这里:
https://codesandbox.io/s/r3f-camera-controllers-set-up-vector-yps4k

尝试#2

对于this question有人建议创建一个新相机,我也尝试过,但最终得到了相同的结果。这是我尝试创建一个新相机并将一些值复制到新相机:
https://codesandbox.io/s/r3f-camera-controllers-reset-camera-3cih0

任何帮助表示赞赏。谢谢!

最佳答案

几天后,我终于找到了实现我想要的目标的方法。

我没有尝试删除不同的控件,而是单独启用和禁用它们。如果 control prop 发生变化,我可以通过 ref 调用两个 Control 上的 reset() 函数。为了保留相机位置,我可以在重置控件之前暂时存储它。

你可以找到一个例子here .

关于reactjs - react 三纤维 : How to switch between TrackballControls and OrbitControls?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70609394/

相关文章:

javascript - 如何使用带有此类实例的 'styled' 而不是 'makeStyles' 的 MUI v5 设置工具栏样式?

javascript - 如何使用 Immutable.js 提供 Flux 存储之间的依赖关系?

javascript - 如何动态更改 react 中动态片段的样式(使用功能组件)?

html - 如果对象在前面,React 三纤维 Html 标签不尊重

javascript - 数据过滤 React Highcharts

javascript - 我正在尝试围绕另一个已经在轴上旋转的 (THREE.mesh) 3d 对象旋转。有什么指点吗?

javascript - 三个 JS 枢轴点

javascript - 多个场景与文本交错

three.js - React-Three-Fiber 使用 TypeScript 将制服发送到自定义着色器

javascript - react-three-fiber中如何理解 "useBox"