介绍
@shoesofprey/three-orbit-controls-es 是一个 JavaScript 库，它为three.js提供了一种自由地控制相机的方式。它提供了旋转、缩放和平移相机的功能。
安装
使用 npm 包管理器安装：
npm install @shoesofprey/three-orbit-controls-es
或者引入使用jsDelivr代替npm：
<script src="https://cdn.jsdelivr.net/npm/@shoesofprey/three-orbit-controls-es@1.1.1/dist/OrbitControls-es.js"></script>
使用
import * as THREE from 'three';
import { OrbitControls } from '@shoesofprey/three-orbit-controls-es';
const renderer = new THREE.WebGLRenderer();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const scene = new THREE.Scene();
const controls = new OrbitControls(camera, renderer.domElement);这里我们使用three.js 创建了一个渲染器、具有透视效果的相机和场景。然后我们将相机和渲染器绑定到 OrbitControls 实例中。
OrbitControls 提供了以下功能：
- 点击后拖动以旋转相机。
- 按住SHIFT键以水平轴为中心旋转相机。
- 滚动以缩放相机。
- 鼠标拖动以平移相机。
-- -------------------- ---- -------
--- -------- - --- -------------------- -- ---
--- -------- - --- ------------------------- ------ -------- ---
--- ---- - --- -------------------- ----------
----------------
----------------- - --
--- ------- - -------- -- -
-------------------------------
-------------------
-------------------
---------------------- --------
--
----------上述代码创建了一个立方体，并通过 requestAnimationFrame 让它旋转。最后将场景和相机一起渲染。
现在，你可以尝试使用鼠标在屏幕上拖动以旋转相机、滚动鼠标以缩放相机、按住Shift键拖动鼠标以水平轴为中心旋转相机，以及拖动鼠标以平移相机。
样式和配置
你可以修改 OrbitControls 的一些设置和样式，以使其符合你的需求。
禁用控制
你可以将 OrbitControls.enabled 设置为 false，以禁用交互。
controls.enabled = false;
旋转效果
你可以将 OrbitControls.rotateSpeed 设置为旋转速度。
controls.rotateSpeed = 0.5;
缩放效果
你可以将 OrbitControls.zoomSpeed 设置为缩放速度。
controls.zoomSpeed = 0.5;
平移效果
你可以将 OrbitControls.panSpeed 设置为平移速度。
controls.panSpeed = 0.5;
最大旋转角度
你可以将 OrbitControls.maxPolarAngle 设置为最大旋转角度，以限制相机的旋转角度。
controls.maxPolarAngle = Math.PI / 2;
最小缩放和最大缩放
你可以将 OrbitControls.minDistance 和 OrbitControls.maxDistance 设置为相机的最小和最大缩放距离。
controls.minDistance = 0.5; controls.maxDistance = 50;
是否自动旋转
你可以将 OrbitControls.autoRotate 设置为 true，以使相机自动旋转。
controls.autoRotate = true;
自动旋转速度
你可以将 OrbitControls.autoRotateSpeed 设置为自动旋转速度。
controls.autoRotateSpeed = 2.0;
结论
@shoesofprey/three-orbit-controls-es 是一个三维场景中非常有用的工具，它允许用户在场景中自由地控制相机。这个库提供了很多定制化的选项，所以你可以轻松地将其改造成你想要的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005725881e8991b448e8746