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

前言

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

版本说明

PixiJS 使用的版本:PixiJS 4.8.7 - WebGL

尝试的原因

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

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

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

所以这次我想用 Camera3dContainer3dSprite3dposition3deuler 等 3d 投影的 api 实现这次 3D 卡片的效果。

效果

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

实现过程

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

核心代码

引入组件

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 轴以及是否正交投影等参数;
  • Container3dSprite3d 用来定义 3d 元素,使用方法与 ContainerSprite 类似,部分属性添加了 z 轴的控制;
  • Container3dSprite3d 的属性:position3dscale3dpivot3dpositionscalepivot 的区别是添加了 z 轴的控制。其中 api 没有提供 rotation3d,可以使用 euler 来实现 3d 旋转;

使用心得

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

更多文章

查看我的更多文章:github.com/NalvyBoo/bl…

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值