Three.js 相机控制效果 | 三维可视化 / AI 提示词

📋 AI 提示词

prompt
1
使用 Three.js 的 OrbitControls 实现相机控制，包括旋转、缩放和平移。

🖼️ 效果预览

Three.js 相机控制效果

🎮 案例演示

立即体验

效果描述

这是一个展示如何使用轨道控制器控制相机的示例。

效果特性

  • 轨道控制：使用 OrbitControls 控制相机
  • 鼠标旋转：鼠标拖动旋转视角
  • 滚轮缩放：滚轮缩放视角
  • 右键平移：右键平移视角
  • 事件监听：监听相机变化
  • 实时渲染：相机变化时实时渲染

核心参数

参数 值 说明
几何体大小 10, 60, 100 XYZ 三方向大小
材质类型 MeshLambertMaterial 漫反射材质
光源颜色 0xff00ff 紫色
光源强度 1.0 光源强度
光源位置 (200, 300, 400) 光源位置

核心代码解析

创建场景和模型

javascript
1
2
3
4
5
6
const scene = new THREE.Scene();
const geometry = new THREE.BoxGeometry(10, 60, 100);
const material = new THREE.MeshLambertMaterial();
const mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 10, 0);
scene.add(mesh);

创建光源

javascript
1
2
3
4
5
6
7
8
9
const pointLight = new THREE.DirectionalLight(0xff00ff, 1.0);
pointLight.position.set(200, 300, 400);
scene.add(pointLight);

const dirLightHelper = new THREE.DirectionalLightHelper(
    pointLight,
    5,
    0xff0000
);
scene.add(dirLightHelper);

创建轨道控制器

javascript
1
2
3
4
5
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.addEventListener("change", function () {
    renderer.render(scene, camera);
    console.log(camera.position);
});

技术亮点

  1. OrbitControls：使用轨道控制器
  2. 鼠标交互：鼠标拖动旋转视角
  3. 滚轮缩放：滚轮缩放视角
  4. 右键平移：右键平移视角
  5. 事件监听：监听相机变化

调试技巧

  1. 控制参数：调整控制器参数
  2. 相机位置：观察相机位置变化
  3. 观察点：调整观察点
  4. 光源位置：调整光源位置
  5. 材质类型：使用不同材质类型

扩展方向

  1. 多种控制器：使用不同类型控制器
  2. 自定义控制：自定义控制行为
  3. 相机动画：动画相机
  4. 多相机：使用多个相机
  5. 相机切换：切换不同相机

本文档由 ThreeLab 编辑整理，如需转载，请注明出处。