介绍
three-proton-loader 是一个基于 three.js 的粒子引擎库 Proton 的加载器。通过 three-proton-loader，我们可以在 three.js 的场景中方便的使用 Proton 创建各种粒子特效，例如烟雾、火焰、光束等等。
安装
通过命令行安装 three-proton-loader：
npm install three-proton-loader
或者在 package.json 中添加依赖：
{
"dependencies": {
"three-proton-loader": "^1.0.0"
}
}使用
加载器的初始化
加载器的初始化需要传入 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