我用 PixiJS 中的 Sprite3d 做了一个失败的 3D 卡片-CSDN博客

前言

最近要做一个 3D 卡片的效果，设计图如下：

版本说明

PixiJS 使用的版本：PixiJS 4.8.7 - WebGL

尝试的原因

第一次尝试中，我使用了我比较熟悉的 PixiJS ，虽然 PixiJS 是 2D 渲染引擎，但是 pixi-projection 插件提供了 PixiJS 未来版本中 2d 和 3d 投影。

截止本文发布，官方还没有提供 v5 的 api 。

我在之前的项目中已经使用过 Sprite2d 、Container2d 、setAxisY 、AFFINE.AXIS_X 等 api 实现过 2d 投影效果，效果还不错，有兴趣的可以戳这里查看。

所以这次我想用 Camera3d 、Container3d 、Sprite3d 、position3d 、euler 等 3d 投影的 api 实现这次 3D 卡片的效果。

效果

效果图如下，在线预览戳这里。如果觉得效果惨不忍睹，就直接跳过下面的代码部分看总结吧，或者看我第二次尝试使用 three.js CSS3DRenderer 实现的文章，使用 three.js 实现效果戳这里。

实现过程

首先建立一个相机（Camera3d），然后通过 Container3d 和 Sprite3d 将 3d 元素加入到相机，再通过 euler 和 position3d 来调整布局，最后通过改变元素的位置和投影，或者改变相机的位置来实现动画。以下核心代码省略了位置和旋转中心的设置。

核心代码

引入组件

import * as PIXI from 'pixi.js';
import 'pixi-projection';
import {TweenMax} from "gsap/TweenMax";
复制代码

camera3d 初始化

const camera = new PIXI.projection.Camera3d();
camera.setPlanes(350,-5000,5000); // 参数依次为 焦距、z 轴最近距离， z 轴最远距离
app.stage.addChild(camera);
复制代码

竖直背景初始化

const card_bg_vertical = new PIXI.projection.Sprite3d(PIXI.loader.resources['bg_0.jpg'].texture);
camera.addChild(card_bg_vertical);
复制代码

地面初始化

this.card_ground = new PIXI.projection.Container3d();
this.card_ground.euler.x = -Math.PI/180*10; // 给地面添加透视
camera.addChild(this.card_ground);

const card_ground_bg:PIXI.projection.Sprite3d = new PIXI.projection.Sprite3d(PIXI.loader.resources['bg_1.jpg'].texture);
this.card_ground.addChild(card_ground_bg);
复制代码

把场景元素添加到地面

for(let i = 0; i < 10; i++){
    const thing = new PIXI.projection.Sprite3d(PIXI.loader.resources['card1_thing_'+i+'.png'].texture);
    thing.euler.x = Math.PI/180*10; // 将父元素的透视复原
    this.card_ground.addChild(thing);
}
复制代码

添加动画，旋转地面闭合卡片

const cardTween = new TweenMax.to(this.card_ground.euler,2,{x:-Math.PI/180*180});
复制代码

总结

关于 api

Camera3d 定义了 3d 场景，我们要把 3d 元素添加到改相机中， Camera3d 提供了焦距、最近 z 轴、最远 z 轴以及是否正交投影等参数；
Container3d、Sprite3d 用来定义 3d 元素，使用方法与 Container、Sprite 类似，部分属性添加了 z 轴的控制；
Container3d、Sprite3d 的属性：position3d、scale3d、pivot3d 与 position、scale、pivot 的区别是添加了 z 轴的控制。其中 api 没有提供 rotation3d，可以使用 euler 来实现 3d 旋转；

使用心得

对于熟悉 PixiJS api 的同学，想要上手 2d 和 3d 的投影效果，还是比较简单的，只是官方没有提供文档，需要研究官网的例子来查看每个 api 的作用与效果；
2d 和 3d 的投影效果是在旧版本基础上的扩充，因此旧版本所具备的优势，新版本依然可以享受；
毕竟 PixiJS 为 2d 渲染引擎，如果想要做出炫酷的 3d 效果，可能还是得需要使用 three.js 等库来实现。
第二次尝试，我使用 three.js 中的 CSS3DRenderer 实现了上面的效果，可以戳这里查看，虽然效果出来了，但也是一次失败的尝试，后续会写一篇总结。