介绍
@jsantell/three-orbit-controls 是一种基于 three.js 的轨道控制器包，被广泛用于在网页中进行三维场景的控制、交互等。
安装
使用 npm 安装 @jsantell/three-orbit-controls 包：
--- ------- ------------------------------
使用
- 导入 OrbitControls.js：
------ - -- ----- ---- -------- ------ - ------------- - ---- ---------------------------------
- 创建基本的场景（假设您已经按要求装好了 three.js 包）：
----- ----- - --- --------------
- 添加相机，如果您不知道如何设置相机，请先学会三维场景的基本知识：
----- ------ - --- --------------------------- ----------------- - ------------------- ----- ------ ---------------------- -- ---
- 添加渲染器，设置渲染器的大小：
----- -------- - --- --------------------- ---------- ---- --- ----------------------------------- -------------------- -----------------------------------------------
- 创建一个几何体：
----- -------- - --- -------------------- -- ---
- 设置几何体材质：
----- -------- - --- ---------------------------- ------ -------- ---
- 创建一个网格并将几何体和材质传递给它：
----- ---- - --- -------------------- ---------- ----------------
- 创建一个轨道控制器对象：
----- -------- - --- --------------------- ---------------------
- 渲染场景：
-------- -------- - ------------------------------ ---------------------- -------- - ---------
现在您已经成功添加了轨道控制器包，并设置好了基本的环境。
具体用法
OrbitControls 需要两个参数。
第一个是摄像机对象，我们在步骤 3 中创建好了，第二个参数是 DOM 元素，这里是渲染器的 DOM 元素。
轨道控制器包括以下功能：
拖动旋转
单击并拖动鼠标可以旋转场景：
--------------------- - -----
双指拖动
在移动端设备上，您可以用两个手指代替单击并拖动鼠标来旋转场景：
------------------ - -----
滚轮缩放
使用鼠标滚轮可以缩放场景：
------------------- - -----
自动旋转
您可以设置自动旋转场景：
------------------- - -----
限制旋转的角度
您可以限制场景的旋转角度：
------------------------ - -------- - ---- ------------------------ - ------- - ----
限制缩放
您也可以限制场景的缩放程度：
-------------------- - -- -------------------- - ---
开关限制
如果您只需要部分控件，可以使用对象的 enable 属性，将不需要的控件禁用：
------------------ - ------ ------------------- - ------
示例代码
下面是一个演示 OrbitControls 的完整代码：
------ - -- ----- ---- --------
------ - ------------- - ---- ---------------------------------
----- ------ - --- --------------------------- ----------------- - ------------------- ----- ------
---------------------- -- ---
----- ----- - --- --------------
----- -------- - --- -------------------- -- ---
----- -------- - --- ---------------------------- ------ -------- ---
----- ---- - --- -------------------- ----------
----------------
----- -------- - --- --------------------- ---------- ---- ---
----------------------------------- --------------------
-----------------------------------------------
----- -------- - --- --------------------- ---------------------
---------------------- - -----
---------------------- - -----
------------------- - ------
-------- --------- -
-------------------------------
--------------- -- -----
--------------- -- -----
------------------
---------------------- --------
-
----------结论
这就是使用 @jsantell/three-orbit-controls 的基本步骤，它可以使您的三维场景更具交互性。此外，OrbitControls 还有许多高级功能，可以根据您的需要进行自定义。祝你好运！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60065b42c6eb7e50355dbd9a