简介
canvas-orbit-camera 是一个基于 Three.js 的 3D 相机控制库。它可以让你轻松地通过鼠标或触摸屏来控制 Three.js 场景的相机，包括缩放、平移和旋转等操作。
安装
canvas-orbit-camera 可以通过 npm 安装：
npm install canvas-orbit-camera
使用
使用 canvas-orbit-camera 很简单。首先，引入 Three.js 和 canvas-orbit-camera 库：
<script src="https://threejs.org/build/three.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/canvas-orbit-camera@1.0.0/dist/canvas-orbit-camera.js"></script>
然后，在你的 JavaScript 代码中，创建一个 Three.js 场景和一个 Three.js 相机，并将场景和相机传递给 canvas-orbit-camera：
-- -------------------- ---- -------
--- ----- - --- --------------
--- ------ - --- ------------------------ --- ----------------- - ------------------- ---- ---- --
--- -------- - --- ----------------------
----------------- ------------------ ------------------ --
-------------------------- ------------------- --
--- -------- - --- ------------------ ------- ------------------- --
------------------- - -----
------------------ - -----
--------------------- - -----
-------- --------- -
---------------------- ------- --
------------------
---------------- ------ ------ --
-
----------这样就可以创建一个带有相机控制的 Three.js 场景了。在这个示例代码中，我们启用了缩放、平移和旋转三个操作。
深入探讨
canvas-orbit-camera 提供了许多选项来自定义相机的行为。以下是一些常用的选项：
rotateSpeed：旋转速度，默认值为 1。zoomSpeed：缩放速度，默认值为 1。panSpeed：平移速度，默认值为 1。minDistance和maxDistance：相机到目标点的最小和最大距离，默认值为 0 和 Infinity。minPolarAngle和maxPolarAngle：相机俯仰角的最小和最大值（以弧度为单位），默认值为 0 和 Math.PI。minAzimuthAngle和maxAzimuthAngle：相机水平角的最小和最大值（以弧度为单位），默认值为 -Infinity 和 Infinity。
另外，canvas-orbit-camera 还提供了一些事件，可以监听相机状态的变化：
change：当相机状态发生变化时触发。start：当用户开始交互时触发。end：当用户结束交互时触发。zoomstart：当用户开始缩放时触发。zoomend：当用户结束缩放时触发。rotatestart：当用户开始旋转时触发。rotateend：当用户结束旋转时触发。panstart：当用户开始平移时触发。panend：当用户结束平移时触发。
示例代码
下面是一个完整的示例代码，包括了一些常用的选项和事件监听：
-- -------------------- ---- ------- --- ----- - --- -------------- --- ------ - --- ------------------------ --- ----------------- - ------------------- ---- ---- -- --- -------- - --- ---------------------- ----------------- ------------------ ------------------ -- -------------------------- ------------------- -- --- -------- - --- ------------------ ------- ------------------- -- ------------------- - ----- ------------------ - ----- --------------------- - ----- -------------------- - ---- ------------------ - ---- ----------------- - ---- -------------------- - -- -------------------- - --------- ---------------------- - -- ---------------------- - -------- ------------------------ - ---------- ------------------- - ----------------------------------------------------------- -------- ----------------------------------------------------------------------------------