当前位置: 首页 > article >正文

52. OrbitControls辅助设置相机参数

实际开发的时候,一方面可以通过OrbitControls旋转缩放预览3D模型,另一方面也可以辅助你选择合适的相机参数。

OrbitControls知识点回顾

相机控件OrbitControls旋转缩放平移本质上就是在改变相机Camera的参数。

  • 旋转:拖动鼠标左键
  • 缩放:滚动鼠标中键
  • 平移:拖动鼠标右键

OrbitControls改变相机位置.position

通过OrbitControls旋转和缩放,本质上就是在改变透视投影相机PerspectiveCamera的位置.position

渲染循环中不停地打印相机的位置属性,你可以通过相机控件旋转或缩放三维场景,同时通过浏览器控制台观察相机位置变化。

function render() {
  requestAnimationFrame(render);
  // 浏览器控制台查看相机位置变化
  console.log('camera.position',camera.position);
}
render();

通过OrbitControls设置相机位置.position

上节课关于相机整体预览三维场景代码设置的时候,第一步是根据渲染范围的数量级,大概设置相机的位置参数,其实第二部,相机位置具体参数,可以借助OrbitControls可视化旋转或缩放,然后选择一个合适的渲染效果,浏览器控制台记录下此时的相机位置。

camera.position.set(200, 200, 200);//第1步:根据场景渲染范围尺寸设置
camera.position.set(-144, 95, 95); //第2步:通过相机控件辅助设置OrbitControls

OrbitControls改变相机.lookAt观察目标

通过OrbitControls平移,OrbitControls的.target属性会发生变化,.target属性对应的就是透视投影相机PerspectiveCamera.lookAt观察目标`。

function render() {
  requestAnimationFrame(render);
  // 浏览器控制台查看controls.target变化,辅助设置lookAt参数
  console.log('controls.target',controls.target);
}
render();

通过OrbitControls设置.lookAt()参数

参照OrbitControls设置相机位置.position的过程,你可以平移三维场景,然后选择一个合适的渲染效果,记录下此时相机控件目标属性controls.target的值,然后作为透视投影相机.lookAt()的参数。

注意相机控件OrbitControls会影响lookAt设置,注意手动设置OrbitControls的目标参数

// camera.lookAt(0, 0, 0);
const x = -1.2,y = -15,z = 10;//通过OrbitControls辅助设置
camera.lookAt(x, y, z);

// 设置相机控件轨道控制器OrbitControls
const controls = new OrbitControls(camera, renderer.domElement);
// 相机控件.target属性在OrbitControls.js内部表示相机目标观察点,默认0,0,0
// console.log('controls.target', controls.target);
controls.target.set(x, y, z); //与lookAt参数保持一致
controls.update(); //update()函数内会执行camera.lookAt(controls.target)

http://www.kler.cn/news/326809.html

相关文章:

  • Squaretest单元测试辅助工具使用
  • C++安全密码生成与强度检测
  • MySql的慢查询(慢日志)
  • 利用koa.js编写一个错误日志采集服务器
  • 详细查看某个文件的相关信息
  • H.264学习笔记
  • cas5.3统一登录前后端分离改造方案(源码)
  • 龙芯+FreeRTOS+LVGL实战笔记(新)——10蜂鸣器嘀嘀嘀
  • 大模型(LLM) 是仅仅比 模型(Model) 更大吗?
  • 第三方供应商不提供API接口?教你四步破解集成难题
  • 选购出海IP要注意什么?
  • Debian 配置 Python 开发与运行环境
  • Docker官网新手入门教程:从零开始玩转容器
  • 使用豆包MarsCode 实现高可用扫描工具
  • makefile和CMakeLists/C++包管理器
  • 七、添加攻击音效
  • 汽车出险报告接口介绍及作用
  • Docekrfile和docker compose编写指南及注意事项
  • Android常用C++特性之std::this_thread
  • python14_运算符复合赋值
  • 【韩顺平Java笔记】第4章:运算符
  • SpringIOCDI
  • CaChe的基本原理
  • ECMAScript标准的详细解析
  • sql-labs:42~65
  • AIGC对网络安全的影响
  • ansible之playbook\shell\script模块远程自动安装nginx
  • Python 时间占位符:毫秒的使用
  • TDengine 签约国家电投旗下四大火力发电厂,助力汽轮机振动数据的有效管理
  • 大模型增量训练--基于transformer制作一个大模型聊天机器人