简介
canvas-orbit-camera 是一个基于 Three.js 的 3D 相机控制库。它可以让你轻松地通过鼠标或触摸屏来控制 Three.js 场景的相机,包括缩放、平移和旋转等操作。
安装
canvas-orbit-camera 可以通过 npm 安装:
--- ------- -------------------
使用
使用 canvas-orbit-camera 很简单。首先,引入 Three.js 和 canvas-orbit-camera 库:
------- ------------------------------------------------------ ------- --------------------------------------------------------------------------------------------------
然后,在你的 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
:当用户结束平移时触发。
示例代码
下面是一个完整的示例代码,包括了一些常用的选项和事件监听:
--- ----- - --- -------------- --- ------ - --- ------------------------ --- ----------------- - ------------------- ---- ---- -- --- -------- - --- ---------------------- ----------------- ------------------ ------------------ -- -------------------------- ------------------- -- --- -------- - --- ------------------ ------- ------------------- -- ------------------- - ----- ------------------ - ----- --------------------- - ----- -------------------- - ---- ------------------ - ---- ----------------- - ---- -------------------- - -- -------------------- - --------- ---------------------- - -- ---------------------- - -------- ------------------------ - ---------- ------------------- ----------------------------------------------------------- ---------- ---------------------------------------------------------------------------------------