threejs中的OrbitControls

阅读数:94 评论数:0

跳转到新版页面

分类

html/css/js

正文

一、概述

OrbitControls 是 three.js 中的一个控制器，用于实现对 3D 场景的相机控制，允许用户通过鼠标或触摸操作来旋转、缩放和平移视图。

即轨道控制器，可以使相机围绕目标旋转。

OrbitControls（object：Camera，domElement：HTMLDOMElement）

object：（必需）要控制的摄像机。相机不得是其他对象的子对象，除非该对象是场景本身。

domElement：用于事件侦听器的HTML元素

对应的操作：

鼠标滑轮用于缩放。
鼠标左键用于旋转。
鼠标右键用于平移。

二、基本使用

1、安装three.js

npm install three

2、引入OrbitControls

在 three.js r128 及之后版本中，OrbitControls 被从 three.js 的核心库中分离出来，需要单独导入：

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/js/controls/OrbitControls';

3、创建场景和相机

以下是一个简单的 three.js 场景，包含了 OrbitControls 控制：

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/js/controls/OrbitControls';

// 创建场景
const scene = new THREE.Scene();

// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建一个立方体（用于测试）
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 创建 OrbitControls 控件
const controls = new OrbitControls(camera, renderer.domElement);

// 动画渲染循环
function animate() {
  requestAnimationFrame(animate);

  // 更新 OrbitControls
  controls.update(); // 只有在开启了阻尼（damping）时才需要调用 update()

  // 渲染场景
  renderer.render(scene, camera);
}

animate();

4、响应式调整大小

为了使场景适应窗口大小的变化，你可以在窗口大小变化时调整相机的宽高比和渲染器的大小：

window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix(); // 更新相机的投影矩阵
  renderer.setSize(window.innerWidth, window.innerHeight);
});

三、配置OrbitControls的选项

OrbitControls 提供了一些配置项来调整控件的行为，常用的属性包括：

1、enableDamping: 启用阻尼效果（类似物理上的惯性）。

controls.enableDamping = true;
controls.dampingFactor = 0.25; // 阻尼的强度

2、enableZoom: 是否允许缩放（默认为 true）。

controls.enableZoom = true;

3、minDistance 和 maxDistance: 限制相机与目标的最小和最大距离。

controls.minDistance = 2; // 最小距离
controls.maxDistance = 10; // 最大距离

4、maxPolarAngle: 限制相机的垂直旋转角度（在极轴上）。

controls.maxPolarAngle = Math.PI / 2; // 禁止向下旋转（0 到 pi）

5、rotateSpeed: 旋转速度。

controls.enableRotate = false;  // 禁止旋转

四、OrbitControls.target

target 是 OrbitControls 中的一个属性，用于设置相机的“目标”位置，即用户交互时相机围绕哪个点旋转。这个点通常是相机的聚焦点或目标位置。通过修改 target，你可以控制相机围绕哪个点进行旋转。

默认值：target 默认是一个 THREE.Vector3(0, 0, 0)，即默认情况下，OrbitControls 会围绕世界坐标原点旋转。
作用：改变 target 会改变相机的旋转中心。每次用户交互时，相机都会围绕 target 点进行旋转、缩放和平移。

五、OrbitControls.update()

update 是 OrbitControls 的一个方法，用于更新控制器的状态。通常在动画循环中调用该方法，以确保控制器正确响应用户输入（例如鼠标、触摸事件）并更新相机的位置。

作用：update 会检查控制器的状态（如鼠标的拖动、缩放等），并根据当前的控制状态更新相机的位置和视角。
调用时机：update 通常在每一帧的动画循环中调用，以确保相机的位置和目标随用户交互实时更新。

function animate() {
  requestAnimationFrame(animate);

  // 更新 OrbitControls 控制器状态
  controls.update();  // 这个方法需要在每帧调用

  renderer.render(scene, camera);
}

animate();