OrbitControls 是 Three.js 中非常常用的控件库，它允许用户通过鼠标和触摸屏与3D场景进行交互，包括旋转、缩放和平移视图。要使用 OrbitControls，你需要引入相应的模块，并将其附加到你的相机和渲染器上。以下是详细的步骤和示例代码。
步骤
-
引入 OrbitControls:
- 确保你已经包含了 Three.js 库。
- 引入
OrbitControls模块。
-
创建场景、相机和渲染器:
- 创建一个基本的 Three.js 场景，包括相机、场景和渲染器。
-
初始化 OrbitControls:
- 创建
OrbitControls实例，并将其绑定到相机和渲染器上。
- 创建
-
设置动画循环:
- 在每一帧中更新
OrbitControls以确保交互效果正常工作。
- 在每一帧中更新
示例代码
以下是一个完整的示例代码，展示了如何使用 OrbitControls：
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - orbit controls</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<script type="importmap">
{
"imports": {
"three": "../build/three.module.js",
"three/addons/": "./jsm/"
}
}
</script>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
let camera, scene, renderer;
let geometry, material, mesh;
init();
animate();
function init() {
// 创建场景
scene = new THREE.Scene();
// 创建相机
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
camera.position.z = 1;
// 创建几何体和材质
geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
material = new THREE.MeshNormalMaterial();
// 创建网格并添加到场景中
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
// 创建渲染器
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 初始化 OrbitControls
const controls = new OrbitControls(camera, renderer.domElement);
// 设置一些 OrbitControls 的属性（可选）
controls.enableDamping = true; // 启用阻尼效果
controls.dampingFactor = 0.25; // 阻尼系数
controls.enableZoom = true; // 启用缩放
controls.enablePan = true; // 启用平移
// 监听窗口大小变化
window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
requestAnimationFrame(animate);
// 更新 OrbitControls
controls.update();
renderer.render(scene, camera);
}
</script>
</body>
</html>
关键点解释
1. 引入 OrbitControls
在 <script type="importmap"> 中指定了 OrbitControls 的路径，并通过 import 语句引入了该模块。
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
2. 初始化 OrbitControls
创建 OrbitControls 实例时，需要传入两个参数：相机和渲染器的 DOM 元素。
const controls = new OrbitControls(camera, renderer.domElement);
3. 设置 OrbitControls 属性
你可以根据需要调整 OrbitControls 的各种属性，例如启用或禁用某些功能：
controls.enableDamping = true; // 启用阻尼效果
controls.dampingFactor = 0.25; // 阻尼系数
controls.enableZoom = true; // 启用缩放
controls.enablePan = true; // 启用平移
4. 更新 OrbitControls
在每一帧的动画循环中调用 controls.update() 方法，以确保交互效果正常工作。
function animate() {
requestAnimationFrame(animate);
// 更新 OrbitControls
controls.update();
renderer.render(scene, camera);
}
其他常用属性和方法
controls.autoRotate: 自动旋转相机。controls.target: 设置相机的目标点，默认为(0, 0, 0)。controls.maxDistance和controls.minDistance: 设置相机的最大和最小距离。controls.maxPolarAngle和controls.minPolarAngle: 设置相机的最大和最小极角。
前端工程师、程序员
标签:
threejs
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
2018-03-06 linux拷贝文件夹cp
2018-03-06 docker 小结