【three.js系列三】入门教程——轨道控制器

什么是 OrbitControls 轨道控制

轨道控制器(OrbitControls)是 Three.js 中的一个常用工具,用于控制相机的运动。它可以使相机围绕目标物体进行旋转、缩放和平移操作,就像地球围绕太阳一样运动,方便观察三维场景。

使用轨道控制器

要使用轨道控制器,首先需要在项目中引入 OrbitControls.js 文件。然后,可以按照以下步骤创建并使用轨道控制器:

  1. 创建一个 OrbitControls 对象,并传入相机对象和渲染器对象。
  2. OrbitControls 对象添加到场景中。
  3. 监听 OrbitControls 对象的事件,以便在相机发生变化时更新场景。

以下代码基于vue项目,搭建vue项目,安装threejs即可

js 复制代码
// main.js
import * as THREE from "three";

// 引入轨道控制器扩展库OrbitControls.js(必须)
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

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

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

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

// 创建轨道控制器
// 2个参数:要控制的摄像机,用于事件侦听器的 HTML 元素
const controls = new OrbitControls(camera, renderer.domElement);

// 添加阻尼
controls.enableDamping = true
controls.dampingFactor = 0.01

// 自动旋转
controls.autoRotate = true
controls.autoRotateSpeed = 0.5

// 将轨道控制器添加到场景中
scene.add(controls);

// 创建一个立方体
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x0000ff });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 添加网格
// 4个参数分别为:网格的大小(默认值为 `10`),网格中的分区数(默认值为 `10`),中心线的颜色(可选),网格线颜色(可选)
const gridHelper =new THREE.GridHelper(10,10, 0x00ff00, 'red')
scene.add(gridHelper)

// 监听相机变化事件
controls.addEventListener('change', () => {
  renderer.render(scene, camera);
});

// 动画循环
function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  controls.update(); // 更新轨道控制器

  renderer.render(scene, camera);
}

animate();

打开浏览器:http://localhost:5173/

结语

对于添加几何体、相机、场景等不熟悉的童鞋可以参考上一篇 【three.js系列二】入门教程------几何体

相关推荐
Xiaouuuuua28 分钟前
一个简单的脚本,让pdf开启夜间模式
java·前端·pdf
@Dream_Chaser1 小时前
uniapp ruoyi-app 中使用checkbox 无法选中问题
前端·javascript·uni-app
深耕AI1 小时前
【教程】在ubuntu安装Edge浏览器
前端·edge
倔强青铜三1 小时前
苦练Python第4天:Python变量与数据类型入门
前端·后端·python
倔强青铜三1 小时前
苦练Python第3天:Hello, World! + input()
前端·后端·python
上单带刀不带妹1 小时前
JavaScript中的Request详解:掌握Fetch API与XMLHttpRequest
开发语言·前端·javascript·ecmascript
倔强青铜三1 小时前
苦练Python第2天:安装 Python 与设置环境
前端·后端·python
我是若尘2 小时前
Webpack 入门到实战 - 复习强化版
前端
晓13132 小时前
JavaScript基础篇——第五章 对象(最终篇)
开发语言·前端·javascript
倔强青铜三2 小时前
苦练Python第1天:为何要在2025年学习Python
前端·后端·python