介绍
@shoesofprey/three-orbit-controls-es 是一个 JavaScript 库，它为three.js提供了一种自由地控制相机的方式。它提供了旋转、缩放和平移相机的功能。
安装
使用 npm 包管理器安装：
--- ------- ------------------------------------
或者引入使用jsDelivr代替npm：
------- ----------------------------------------------------------------------------------------------------------------
使用
------ - -- ----- ---- -------- ------ - ------------- - ---- --------------------------------------- ----- -------- - --- ---------------------- ----- ------ - --- --------------------------- ----------------- - ------------------- ---- ------ ----- ----- - --- -------------- ----- -------- - --- --------------------- ---------------------
这里我们使用three.js 创建了一个渲染器、具有透视效果的相机和场景。然后我们将相机和渲染器绑定到 OrbitControls 实例中。
OrbitControls 提供了以下功能：
- 点击后拖动以旋转相机。
- 按住SHIFT键以水平轴为中心旋转相机。
- 滚动以缩放相机。
- 鼠标拖动以平移相机。
--- -------- - --- -------------------- -- ---
--- -------- - --- ------------------------- ------ -------- ---
--- ---- - --- -------------------- ----------
----------------
----------------- - --
--- ------- - -------- -- -
-------------------------------
-------------------
-------------------
---------------------- --------
--
----------上述代码创建了一个立方体，并通过 requestAnimationFrame 让它旋转。最后将场景和相机一起渲染。
现在，你可以尝试使用鼠标在屏幕上拖动以旋转相机、滚动鼠标以缩放相机、按住Shift键拖动鼠标以水平轴为中心旋转相机，以及拖动鼠标以平移相机。
样式和配置
你可以修改 OrbitControls 的一些设置和样式，以使其符合你的需求。
禁用控制
你可以将 OrbitControls.enabled 设置为 false，以禁用交互。
---------------- - ------
旋转效果
你可以将 OrbitControls.rotateSpeed 设置为旋转速度。
-------------------- - ----
缩放效果
你可以将 OrbitControls.zoomSpeed 设置为缩放速度。
------------------ - ----
平移效果
你可以将 OrbitControls.panSpeed 设置为平移速度。
----------------- - ----
最大旋转角度
你可以将 OrbitControls.maxPolarAngle 设置为最大旋转角度，以限制相机的旋转角度。
---------------------- - ------- - --
最小缩放和最大缩放
你可以将 OrbitControls.minDistance 和 OrbitControls.maxDistance 设置为相机的最小和最大缩放距离。
-------------------- - ---- -------------------- - ---
是否自动旋转
你可以将 OrbitControls.autoRotate 设置为 true，以使相机自动旋转。
------------------- - -----
自动旋转速度
你可以将 OrbitControls.autoRotateSpeed 设置为自动旋转速度。
------------------------ - ----
结论
@shoesofprey/three-orbit-controls-es 是一个三维场景中非常有用的工具，它允许用户在场景中自由地控制相机。这个库提供了很多定制化的选项，所以你可以轻松地将其改造成你想要的效果。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005725881e8991b448e8746