ThreeJS:坐标辅助器与轨道控制器

ThreeJS与右手坐标系

使用ThreeJS创建3D场景时,需要使用一个坐标系来定位和控制对象的位置和方向。

ThreeJS使用的坐标系是右手坐标系,即:X轴向右、Y轴向上、Z轴向前,如下图所示,
ThreeJS-右手坐标系

Tips:右手坐标系下的右手规则是指,将右手伸出,并将大拇指方向指向X轴的正方向,食指指向Y轴的正方向,中指指向Z轴的正方向。

添加坐标辅助器

ThreeJS提供了AxesHelper类,用于简单模拟3个坐标轴的对象,其中:红色代表 X 轴. 绿色代表 Y 轴. 蓝色代表 Z 轴.

为了方便指示当前场景的坐标轴朝向,可以向场景添加AxesHelper坐标辅助器。

使用坐标辅助器

javascript 复制代码
//TODO:创建坐标辅助器
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

坐标辅助器效果

添加轨道控制器

轨道控制器是ThreeJS提供的一个非常实用的工具,它可以帮助用户更加轻松的探索3D场景------通过鼠标或者触摸屏交互的方式,实现3D场景的平移、旋转、缩放操作,从而改变相机的观察视角。

使用轨道控制器

ThreeJS提供了Orbit controls(轨道控制器)可以使得相机围绕目标进行轨道运动。

javascript 复制代码
//TODO:轨道控制器
const orbitControls = new OrbitControls(camera, renderer.domElement);
orbitControls.update();

在循环渲染函数中,调用update()方法,更新渲染器,

javascript 复制代码
//TODO:渲染函数
function animate() {
  requestAnimationFrame(animate);
  //TODO:更新轨道控制器
  orbitControls.update();
  //TODO:渲染
  renderer.render(scene, camera);
}

注意点:更改相机视角之后,必须手动调用update方法更新控制器。

轨道控制器效果

通过鼠标修改相机视角,

设置轨道控制器的属性

OrbitControls轨道控制器包含很多属性,通过设置属性,可以限定可平移、旋转、缩放的范围,以及阻尼效果、阻尼系数、自动旋转、自动旋转系数等。

相关推荐
lingling00911 天前
2025 年焊接相机十大品牌测评:抗光耐高温解决方案深度解析
数码相机
人类发明了工具11 天前
【机器人-深度估计】双目深度估计原理解析
数码相机·机器人·深度估计·双目深度估计
朝风工作室11 天前
从零理解鱼眼相机的标定与矫正(含 OpenCV 代码与原理讲解)
人工智能·数码相机·opencv
东风西巷11 天前
MolyCamCCD复古胶片相机:复古质感,时尚出片
android·数码相机·智能手机·软件需求
lingling00915 天前
锌锭工业相机:迁移科技驱动金属制造自动化新高度
数码相机
三维频道17 天前
多相机数字图像相关 DIC 技术:精准测量桁架静载扭转全场变形,赋能建筑结构安全评估
数码相机·安全·多相机数字图像相关 dic·桁架静载扭转测试·全场变形测量·建筑结构安全评估’·非接触式测量技术
江山如画,佳人北望18 天前
VINS-Fusion 简介、安装、编译、数据集/相机实测
数码相机
SHARE赛尔19 天前
赛尔发布SHARE 5系列航测相机,外业更高效,建模更优质
数码相机
元器猫20 天前
工业自动化发展:工业相机在机器视觉领域的应用趋势
运维·数码相机·自动化
橙色小博21 天前
摄影入门:相机基本参数解析
数码相机·相机·摄影