three.js-轨道控制器（OrbitControls）

轨道控制器（OrbitControls）

Orbit controls（轨道控制器）可以使得相机围绕目标进行轨道运动。
要使用这一功能，就像在/examples（示例）目录中的所有文件一样， 您必须在HTML中包含这个文件。

进口

OrbitControls 是一个附加组件，必须显式导入。 See Installation / Addons.

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

文档地址：https://threejs.org/docs/index.html?q=OrbitControls#examples/zh/controls/OrbitControls

import * as THREE from "three";
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
// 场景
const scene = new THREE.Scene();
// 相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry(2, 2, 2);
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
cube.position.set(1,0,0);
scene.add(cube);

camera.position.z = 5;
// 控制器
const controls = new OrbitControls( camera, renderer.domElement );
const axesHelper = new THREE.AxesHelper( 5 );

scene.add( axesHelper );
function render() {
    if (cube.position.x >= 5) {
        cube.position.x = 0;
    }
    cube.position.x += 0.01;
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}
render();

展示效果如下：