介绍
three-proton-loader 是一个基于 three.js 的粒子引擎库 Proton 的加载器。通过 three-proton-loader，我们可以在 three.js 的场景中方便的使用 Proton 创建各种粒子特效，例如烟雾、火焰、光束等等。
安装
通过命令行安装 three-proton-loader：
--- ------- -------------------
或者在 package.json 中添加依赖：
-
--------------- -
---------------------- --------
-
-使用
加载器的初始化
加载器的初始化需要传入 three.js 的场景和相机，可以这样实现：
------ - -- ----- ---- -------- ------ ------ ---- ---------------- ------ - ------------ - ---- ---------------------- -- ------- ----- ----- - --- -------------- ----- ------ - --- ------------------------ --- ----------------- - ------------------- ---- ---- -- ----------------- - -- -- ----- ----- ------------ - --- ------------------- --------
加载 Proton 粒子效果
在加载器初始化后可以通过 protonLoader.loadProton 方法加载 Proton 粒子效果，方法的参数是包含 Proton 粒子效果的 json 文件的 url。
----- --- - ----------------------
----------------------------
-------------- -- -
-- ---------------- ------ -----
-- ------------------
-- -----
------------------
--
------------ -- -
------------------- ------ ------- ------ -- -----
---使用示例
下面是一个使用 three-proton-loader 创建火焰效果的示例：
1. 准备工作
首先，我们需要准备一个 json 文件来存储火焰效果的配置，可以选择直接编写 json 文件或者使用 Proton 提供的可视化工具 ProtonEditor 来创建。
一个简单的火焰效果的配置如下：
-
------- -
------ ------- ------ ------
--
----------- -
-
---------- -----
------------ -
---------- -
--------- -----
--
------- -
-------- -
--------- ----
-------- ---
--
---------------- ---
-------- --
---------------- -
--
------- -
-------- --
-------- ---
--
----------- -
---- --
---- -
--
--------------- -----
--------- -
-------- --
--------- -----
------ ---
------ --
--
------- -
------- -
-
-------- --
------- -
--
-
-------- --
------- --
--
-
-------- ---
------- ---
--
-
-------- ---
------- ---
-
--
--------- ----
--
---------- -
------------ -
-------- --------
--
-------- --
--------- --
-
--
------------- -
-
-------- -
------- -
-
-------- --
------- -
--
-
-------- --
------- --
--
-
-------- ----
------- --
--
-
-------- --
------- ---
-
-
-
--
-
-------- -
------- -
-
-------- ----------
------- -
--
-
-------- ----------
------- ---
--
-
-------- ----------
------- ---
--
-
-------- -------
------- ---
-
--
--------- -----
-
-
--
------------ ----
------- -
-------- --
-------- ---
--
------- -
-------- ---
-------- -
--
------------ ------
---------------------- --
-------------------- ------
----------- -
---- --
---- -
--
--------------- ---
--------------- --
------------ -
-------- --
--------- -----
------ ---
------ -
--
-------------------- --
------------- -
-------- ----------
--------- -----
--
------------ -
-------- --
--------- -----
------ --
------ --
--
-------------------- --
------------- -
-------- --
--------- -----
------ --
------ ---
--
----------- -
-------- --
--------- -----
------ --
------ ---
--
----------- -
-------- ----------
--------- -----
--
---------- -
-------- --
--------- -----
------ --
------ --
--
---------- -
-------- ---
--------- -----
------ ---
------ --
--
------------------ -
-
-
-保存为 fire.json 文件。
2. 在场景中加载火焰粒子效果
------ - -- ----- ---- --------
------ ------ ---- ----------------
------ - ------------ - ---- ----------------------
-- -------
----- ----- - --- --------------
----- ------ - --- ------------------------
--- ----------------- - ------------------- ---- ----
--
----------------- - --
-- -----
----- ------------ - --- ------------------- --------
----- --- - --------------------
----------------------------
-------------- -- -
----- ------- - -------------------
-- - ------- ------------
----------- - --
----------- - --
------------------------- ------------------- ---------------------- --------
------------------------ ---------------------
------------------------ ------------------- -------
------------------------ --------------- ----
------------------------ ----------------------- ---------- ------
---------------
------------------
--
------------ -- -
------------------- ------ ------- ------ -- -----
---修改 emitter 的位置和添加几个行为，调整效果达到比较理想的状态。
效果：
结语
通过 three-proton-loader，我们可以很方便的在 three.js 的场景中使用 Proton 创建各种粒子效果。上面的示例只是一个简单的演示，更加丰富的粒子效果可以自行尝试在 Proton 中创建，然后使用 three-proton-loader 加载到场景中。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005597d81e8991b448d70a3