【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系列二】入门教程------几何体

相关推荐
当牛作馬22 分钟前
React——ant-design组件库使用问题记录
前端·react.js·前端框架
0wioiw034 分钟前
Flutter基础(前端教程⑨-图片)
前端·flutter
一只一只妖38 分钟前
uniapp小程序无感刷新token
前端·小程序·uni-app
绅士玖1 小时前
📝 深入浅出 JavaScript 拷贝:从浅拷贝到深拷贝 🚀
前端
中微子1 小时前
闭包面试宝典:高频考点与实战解析
前端·javascript
brzhang1 小时前
前端死在了 Python 朋友的嘴里?他用 Python 写了个交互式数据看板,着实秀了我一把,没碰一行 JavaScript
前端·后端·架构
G等你下课2 小时前
告别刷新就丢数据!localStorage 全面指南
前端·javascript
该用户已不存在2 小时前
不知道这些工具,难怪的你的Python开发那么慢丨Python 开发必备的6大工具
前端·后端·python
爱编程的喵2 小时前
JavaScript闭包实战:从类封装到防抖函数的深度解析
前端·javascript
LovelyAqaurius2 小时前
Unity URP管线着色器库攻略part1
前端