threejs(二)一些常用辅助对象认知

八青妹
441 阅读5分钟

1. OrbitControls轨道控制器

1.1 基本概念

在上一篇文章中，实现的动画是立方体围绕着x轴、y轴、z轴进行旋转。换个角度思考下，如果物体不旋转，而是相机的位置进行改变，也可以从各个角度观察立方体呢？

OrbitControls( object : Camera, domElement : HTMLDOMElement )

object: 将要被控制的相机。该相机不允许是其他任何对象的子级，除非该对象是场景自身。

domElement: 用于事件监听的HTML元素。

//引入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
//创建轨道控制器实例
const controls = new OrbitControls(camera, renderer.domElement);

1.2 交互方式

加入轨道控制器后，即可进行交互，常用的交互方式：

  • 旋转：按住左键并拖动鼠标
  • 缩放：滚动鼠标滚轮

1.3 配置选项

OrbitControls 提供了许多配置选项,可以自定义其行为,例如:

  • target: 控件所围绕的目标点
  • minDistance/maxDistance: 最小/最大缩放距离
  • minPolarAngle/maxPolarAngle: 最小/最大仰角
  • minAzimuthAngle/maxAzimuthAngle: 最小/最大方位角
  • enableDamping: 是否启用阻尼效果(惯性)

限制缩放范围:防止相机过近或过远

controls.minDistance = 5; // 最小缩放距离为 5 个单位
controls.maxDistance = 50; // 最大缩放距离为 50 个单位

限制旋转范围：防止出现不合理的视角

controls.minPolarAngle = Math.PI / 6; // 最小仰角为 30 度
controls.maxPolarAngle = Math.PI - Math.PI / 6; // 最大仰角为 150 度
controls.minAzimuthAngle = -Math.PI / 4; // 最小方位角为 -45 度
controls.maxAzimuthAngle = Math.PI / 4; // 最大方位角为 45 度

启用阻尼效果：可以让控件的移动产生一种类似物理惯性的效果，使得交互更加自然流畅

controls.enableDamping = true; // 启用阻尼效果
controls.dampingFactor = 0.05; // 阻尼系数为 0.05

1.4 事件监听

通过监听事件，我们可以根据用户的交互行为执行一些自定义的逻辑

controls.addEventListener('change', () => {
  // 控件发生变化时执行的回调函数
  console.log('Camera position:', camera.position);
});

controls.addEventListener('start', () => {
  // 开始交互时执行的回调函数
  console.log('Interaction started');
});

controls.addEventListener('end', () => {
  // 交互结束时执行的回调函数
  console.log('Interaction ended');
});

2. AxesHelper坐标轴助手

2.1 基本概念

用于简单模拟3个坐标轴的对象。红色代表X轴，绿色代表Y轴，蓝色代表Z轴。将坐标轴开启后，可以看到下图所示：

验证了八青妹在webgl(六)使用UV纹理贴图一文中讲到的顶点坐标系统.

2.2 使用方法

使用起来也比较简单,不要遗漏的点是需要将实例添加到场景中。

AxesHelper( size : Number )

size-- (可选的) 表示代表轴的线段长度. 默认为 1.

import { AxesHelper } from 'three';
// 创建一个长度为 3 个单位的坐标轴助手
const axesHelper = new AxesHelper(3); 
// 将坐标轴助手添加到场景中
scene.add(axesHelper);

可以通过设置visibile属性，控制坐标轴助手的显隐。

axesHelper.visible = false; // 隐藏坐标轴助手
axesHelper.visible = true; // 显示坐标轴助手

通过设置 position 属性来控制坐标轴助手的位置

axesHelper.position.set(5, 5, 5); // 将坐标轴助手移动到 (5, 5, 5) 的位置

tips: AxesHelper 是一个 Object3D 实例,它会占用一定的性能开销。考虑调试的时候使用，发布的时候建议就不要添加到场景中去了。

3. ArrowHelper箭头助手

3.1 基本概念

ArrowHelper用于模拟方向的3维箭头对象，通常用于表示某个方向或者力的方向。

3.2 使用方法

ArrowHelper(dir : Vector3, origin : Vector3, length : Number, color : Number, headLength : Number, headWidth : Number )

  • dir -- 基于箭头原点的方向，必须为单位向量。
  • origin -- 箭头的原点，也就是起点位置。
  • length -- 箭头的长度， 默认为 1。
  • color-- 定义的16进制颜色值， 默认为 0xffff00。
  • headLength-- 箭头头部(锥体)的长度，默认为箭头长度的0.2倍(0.2 * length)。
  • headWidth-- 箭头头部(锥体)的宽度，默认为箭头头部长度的0.2倍（0.2 * headLength）。

这里我们举个小例子🌰，创建一个球体，然后给球体加一个运动的速度，在球体运动的方向上增加ArrowHelper来显示物体运动的方向。

// 创建球体
const geometry = new THREE.SphereGeometry(1,32,32);
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const ball = new THREE.Mesh(geometry,material);
ball.position.set(0,0,0);
scene.add(ball);

// 创建 ArrowHelper 来显示运动方向
const velocity = new THREE.Vector3(0.2,0.3,0); // 初始速度
const arrowHelper = new THREE.ArrowHelper(
    velocity.clone().normalize(),
    ball.position,
    velocity.length()+2.0,
    0x00ff00
);
scene.add(arrowHelper);

如下图所示

这段代码中，我们再来额外分析下const velocity = new THREE.Vector3(0.2, 0.3, 0);这行是如何定义初始速度的。

  1. THREE.Vector3: 这是Three.js中的一个类,用于表示三维空间中的一个向量。向量是有大小和方向的物理量,常用于描述物体的速度、位置、加速度等。

  2. (0.2, 0.3, 0): 这三个数值分别代表x、y、z三个轴上的速度分量。

    • 0.2: 表示球体在x轴上的速度分量为0.2个单位每秒。
    • 0.3: 表示球体在y轴上的速度分量为0.3个单位每秒。
    • 0: 表示球体在z轴上的速度分量为0,也就是说它没有z轴上的速度。 换句话就是，这个速度向量(0.2, 0.3, 0)描述了球体每秒在x轴上移动0.2个单位,在y轴上移动0.3个单位,而在z轴上没有速度。这就是球体的初始速度。

4. 总结

OrbitControls轨道控制器基本是每个案例中必备的，如果不能有相机的视角去看3D场景,还能谈何乐趣！

AxesHelper坐标轴助手是八青妹常常用到的，毕竟有时候想改变实例的位置，有个坐标轴做辅助，这样也好去更改定位和动画方向。

ArrowHelper箭头助手，不仅仅可以作用在实例物体上，也可以作用于相机上。当需要显示运动朝向的时候，它一定能帮上你的大忙。

avatar
文章
阅读
粉丝