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

第一次尝试中，我使用了我比较熟悉的 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 实现效果 的总结。

实现过程

首先建立一个相机（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});
复制代码

总结