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/

pixi.js + three.js的更多相关文章

  1. Angularjs在控制器(controller.js)的js代码中使用过滤器($filter)格式化日期/时间实例

    Angularjs内置的过滤器(filter)为我们的数据信息格式化提供了比较强大的功能,比如:格式化时间,日期.格式化数字精度.语言本地化.格式化货币等等.但这些过滤器一般都是在VIEW中使用的,比 ...

  2. 什么是js和js的基本语法

    时间:2016年12月15日 先讲讲基础语法: 大部分是来操作表单: js动态效果和数据交互(ajax?) js也有自己的API js大部分的DOM操作都是针对input的. 案例学习,对注册页面的简 ...

  3. 在Sublime Text 3 中安装SublimeLinter,Node.js进行JS&CSS代码校验

    转载自:http://www.wiibil.com/website/sublimelinter-jshint-csslint.html 在Sublime Text中安装SublimeLinter,No ...

  4. Angular.JS + Require.JS + angular-async-loader 来实现异步加载 angular 模块

    传统的 angular 应用不支持异步加载模块,必须在 module 启动的时候,所有模块必须预加载进来. 通过使用 angular-async-loader 库,我们可以使用 requirejs 等 ...

  5. JS后退, JS返回上一页, JS返回下一页

    Javascript 返回上一页: 1. history.go(-1), 返回两个页面: history.go(-2); 2. history.back(). 3. window.history.fo ...

  6. 比較Backbone.js, Angular.js, Ember.js, Knockout.js 心得

    還記得第一次寫網站的時候,我無意間寫成了 SPA(single page application),當時還沒有SPA這個詞,後來因為廣告主需要不同 url location 頁面的廣告展示,只好把部分 ...

  7. 解决IE5、IE6、IE7与W3C标准的冲突,使用(IE7.js IE8.js)兼容

    如果分别用IE5.IE6.IE7浏览同一个网页,将可能出现不一样的效果. 这是它们之间对CSS的解析选择器不一样或错误和个别bug所导致.为了解决这些错误和bug. 我们不得不找到一个能平衡于它们之间 ...

  8. js优化 ----js的有序加载

    说到有序加载,我们先来说说js的无序加载: <script src="jquery/jquery-1.4.1.js" type="text/javascript&q ...

  9. 原生JS+tween.js模仿微博发布效果

    转载请注明出处:http://www.cnblogs.com/zhangmingze/p/4816865.html 1.先看效果吧,有效果才有动力: 2.html结构: <!DOCTYPE ht ...

  10. Paper.js - Paper.js

    Paper.js - Paper.js   Paper.js is an open source vector graphics scripting framework that runs on to ...

随机推荐

  1. HDU1599(Floyd最小环)

    Floyd最小环理解+模板: https://www.cnblogs.com/DF-yimeng/p/8858184.html 除了上述博文里写的,我再补充几点我的理解. 1.为什么先枚举ij求经过i ...

  2. Ubuntu 中使用git 上传代码

    现在很多人都愿意把自己的代码分享给大家,所以有很多的代码管理的软件 ,比如SVN Git 等软件.今天就讲一下  git 的简单的应用,上传代码.用 git 上传代码 要有个git 账号,这是必不少的 ...

  3. 【转】常见的Web实时消息交互方式和SignalR

    https://www.cnblogs.com/Wddpct/p/5650015.html 前言 1. Web消息交互技术1.1 常见技术1.2 WebSocket介绍1.3 WebSocket示例 ...

  4. 对寄存器ESP和EBP的一些理解

    PS:EBP是当前函数的存取指针.即存储或者读取数时的指针基地址:ESP就是当前函数的栈顶指针. 每一次发生函数的调用(主函数调用子函数)时,在被调用函数初始时,都会把当前函数(主函数)的EBP压栈, ...

  5. 20155237方自晨 实验四android开发基础

    提交点一 Android Stuidio的安装测试: 参考<Java和Android开发学习指南(第二版)(EPUBIT,Java for Android 2nd)>第二十四章: 安装 A ...

  6. 20155304 《网络对抗》Exp9 web安全基础实践

    20155304 <网络对抗>Exp9 web安全基础实践 实验后回答问题 (1)SQL注入攻击原理,如何防御 攻击原理:web应用程序对用户输入数据的合法性没有判断,攻击者可以在web应 ...

  7. mfc 友元类

    知识点 继承类成员的访问级别 友元类 继承访问控制: 基类 派生类(能否访问) public private protected 派生类类 派生类对象 派生类 派生类对象 派生类类 派生类对象 pri ...

  8. Selenium-ActionChainsApi接口详解

    ActionChains 有时候我们在通过Selenium做UI自动化的时候,明明能够在DOM树内看到这个元素,但是我在通过driver click.sendkey的时候,就是点击不到或无法输入字符串 ...

  9. stl源码剖析 详细学习笔记 算法(1)

    //---------------------------15/03/27---------------------------- //算法 { /* 质变算法:会改变操作对象之值 所有的stl算法都 ...

  10. 前端项目模块化的实践3:使用 TypeScript 的收益

    以下是关于前端项目模块化的实践,包含以下内容: 搭建 NPM 私有仓库管理源码及依赖: 使用 Webpack 打包基础设施代码: 使用 TypeScript 编写可靠类库 使用 TypeScript ...