javascript - 将相机重新定位到对象和lookAt()(反应三纤维)
问题描述
我正在尝试在单个随机放置的对象的“缩小”和“放大”视图之间平稳camera.position
过渡。camera.lookAt
定位效果很好。然而, LerpinglookAt()
似乎并不能很好地与传统 ThreeJS 的其他解决方案配合使用(请参阅@bovesan 的答案here),也没有通过 react-three-fiber 文档(链接)上的相关示例解决。
放大z轴会使相机翻转,并且在角落处它会严重失真。
你可以在这里看到我的进度:https ://codesandbox.io/s/three-fiber-zoom-to-object-rlme0?file=/src/App.js
相关代码位App.js
在第 63 行:
useFrame((state) => {
const step = 0.05;
// `focus` is a state variable that sends a Vec3 of the objects position
zoom ? vec.set(focus.x, focus.y, focus.z + 0.2) : vec.set(0, 0, 5);
// HERE, looking for a way to lerp camera lookAt in a way that can toggle.
state.camera.lookAt(0, 0, 0);
state.camera.position.lerp(vec, step);
state.camera.updateProjectionMatrix();
});
我花了几个小时寻找相关的例子/教程,但没有想出太多。不过,恐怕我没有足够的 ThreeJs 经验来寻找正确的方向,所以任何方向的帮助都将受到欢迎。
解决方案
推荐阅读
- sql-server-express - 如何在 SQL Server 2017 Express 中使用 STDEV over()?
- python - 使用带有 ADC 模块和树莓派的重力声计获取 DBa 值
- javascript - 使用 Node JS express 获取 html textarea 返回 undefined
- angular7 - OKTA 登录小部件未在 Angular 7 应用程序中的页面路由上呈现
- python - while循环中的条件语句不执行其下的所有内容
- go - 如何在 golang 中测试 http.Redirect 目标 URL
- python - 有没有办法可以通过用户输入批量重命名文件夹中的文件?
- python - 从 UUID 中提取日期
- android - NXP PN7150 NFC 控制器与安卓集成时出错
- java - 运行项目后无法在intellij中打开静态页面(spring mvc)