介绍
@interface-technologies/expo-pixi 是一个 npm 包，它基于 Pixi.js 和 Expo 的 webgl 模块，方便开发者在 Expo 项目中使用 Pixi.js 开发游戏、动画等 webgl 应用。
本篇文章将详细介绍如何使用 @interface-technologies/expo-pixi 来开发 Expo 项目中的 webgl 应用，希望能够给初学者带来一定的学习和指导帮助。
安装
在开始使用之前，我们需要先安装 @interface-technologies/expo-pixi。
npm install @interface-technologies/expo-pixi
示例代码
我们来看一个简单的示例。下面是一个使用 @interface-technologies/expo-pixi 制作简单动画的代码：
-- -------------------- ---- -------
------ ------ ---- ------------------------------------
------ -------- ---- ----------
------ ------------- ---- -------------------
------ ------------ ---- ---------------
----- ------------ - -------------------------------
----- ------------- - --------------------------------
----- ----------- - ----
----- ---------------- - -----
------ ------- ----- --- ------- --------------- -
------------------ -
-------------
---------- - -
------------ ------
---------- ---
--
-
----- ------------------- -
----- -----------------------------------------
------------- - -------------------------
------ -------------
------- --------------
---------- ------
------------ -----
------------ -----
----------- -----------------
---------------- -------------------
---------------------- ------
---------------- ---------
---
----------------------- - --------------
---------------------------------------------------- - ------
------------------------------------------------- - -----
---------- - --- -----------------
--- ---- - - -- - - ----------------- ---- -
--- ------ - --- ---------
----------------------------
----------------------------------
-
----------- - --- ------------------- --------------------------- -- ------
---------------------- - -----
--------------------------- -------
--------------------------------------------------
-
--------- -
-- ------------------------- -
-------
-
---------------------- -- ------
--- ---- - - -- - - ----------------- ---- -
--- ------ - ------------------------
----------------- - ------------------------- - ------------------- - ----- - -- - ---
----------------- - ------------------------- - ------------------- - ----- - -- - ---
----------------- - ------------------------- - ------------------- - ----- - -- - -- - ----
--- --------- - -------------------------------------
---------------------------- - ----------- - ---
-
---------------------------------
-
-------- -
------ -
-------
-------- -- -
-------------- - ----
--
-------- ----- - --
--
--
-
-
----- ------ ------- --------- -
------------- -
--- ------ - ------------- - -- - ---
--- -------- - ---
--- -------- - --- ------------------------------ -----------
--- -------- - --- --------------------------- --------- ----------
--------------- ----------
--------------------- - --- ------------- -- ---
-
-
----- ------ ------- ------------- -
---------------- ------------ ----- ---- -
--------
-------- - ----
---------------- - ------------
--------- - -----
-------- - ----
--------------------- - --- --------------
-----------------------------------
-
----------------------------- -
---------------------------------
------------------------------------------- ----------------- ---------- ----------
-
----------------- -
--- --- - -------------------------------------
------------------------------------
------ ----------------------------
-
-这段代码演示了如何在 Expo 项目中使用 @interface-technologies/expo-pixi 制作基于三维模型的动画效果。我们会在后面的教程中详细介绍如何编写这段代码。
教程
创建 renderer 和 stage
首先，在 Expo 项目中需要使用 GLView 来创建 webgl 的场景，而在 @interface-technologies/expo-pixi 中使用的是 PIXI.autoDetectRenderer 来创建 renderer。
-- -------------------- ---- ------- ------ ------ ---- ------------------------------------ ------ -------- ---- ---------- ----- ----------------------------------------- ------------- - ------------------------- ------ ------------- ------- -------------- ---------- ------ ------------ ----- ------------ ----- ----------- ----------------- ---------------- ------------------- ---------------------- ------ ---------------- --------- --- ----------------------- - --------------
这个时候我们已经创建了 renderer，下一步需要创建一个 stage，这个 stage 用于存放我们之后要呈现的所有 sprite 和 container。
this.stage = new PIXI.Container();
3D 相机
接下来，我们需要创建一个 3D 相机。Pixi.js 中的相机实质上是一个平移矩阵和旋转矩阵的组合，在计算场景中各种元素的位置时，会根据相机的位置、角度和缩放情况生成一个新的变换矩阵，从而实现 3D 效果。
-- -------------------- ---- -------
----- ------ ------- ------------- -
---------------- ------------ ----- ---- -
--------
-------- - ----
---------------- - ------------
--------- - -----
-------- - ----
--------------------- - --- --------------
-----------------------------------
-
----------------------------- -
- ------------------------------------------------------------------------------ --------
------------------------------------------------------------------------------------------------------------------------