pixi.js + three.js

对着背影说爱祢 提交于 2021-01-05 12:15:36

three.js    最好的webgl 3d渲染库之一,

pixi.js    最好的webgl 2d渲染库之一,也许可以把之一去掉

两个库都很精简,如果把两个库结合起来,一定很爽很爽,你说是吧!

  • 跳一跳three.js开发的。 欢乐球球three.js+pixi.js开发的.
  • three.js, pixi.js都是javascript开发的,方便javascript爱好者。
  • three.js, pixi.js开发微信小游戏的话,适配很简单.
  • 基本上可以这么说,three.js做2dui很麻烦,绝大多数是three.js开发 3d, pixi.js开发2d.

怎么做呢? 

假设pixi.js的渲染器为renderer2D

       three.js的渲染器为renderer3D

renderer2D.reset()

renderer3D.state.reset();

// 处理3d场景
renderer3D.setRenderTarget(null);
renderer3D.render(scene, camera, renderTarget);

renderer2D.reset()
// 处理2d变化
renderer2D.render(stage);

 

// 核心的逻辑

renderer3D.state.reset(); renderer3D.setRenderTarget(null); //<--framebuffer reset! renderer3D.render(scene, camera, renderTarget);

renderer2D.reset()
renderer2D.render(stage);

  

想要例子的请持续关注~

一些开源的例子    https://jsfiddle.net/c34p532r/24/

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!