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

前言

最近要作一个 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 实现了上面的效果，能够戳这里查看，虽然效果出来了，但也是一次失败的尝试，后续会写一篇总结 。

更多文章

查看个人更多文章：github.com/NalvyBoo/bl…