pixi.js + three.js

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/