OrbitControls.js的简单使用示例

OrbitControls.js 的基本使用包括在你的three.js项目中实例化控制器并将其附加到相机上。以下是一个简单的示例：

// 引入三个js库
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

// 创建一个新的Three.js场景
const scene = new THREE.Scene();

// 创建一个摄像机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// 加载一个光源
const light = new THREE.PointLight(0xffffff);
light.position.set(0, 100, 100);
scene.add(light);

// 创建一个 renderer 并显示到 dom 上
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 实例化 OrbitControls 控制器
const controls = new OrbitControls(camera, renderer.domElement);

// 开始动画循环
function animate() {
  requestAnimationFrame(animate);
  controls.update(); // 更新控制状态
  renderer.render(scene, camera); // 渲染场景
}

animate();

在这个例子中，我们首先初始化了摄像机和场景，然后创建了一个`OrbitControls`实例并传入了这两个参数。`camera`代表被控制的对象，`renderer.domElement`则作为事件监听的目标。`controls.update()`会在每一帧更新摄像机的位置和方向，使其跟随用户的鼠标或触摸操作做平移、旋转等操作。