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. Redis 4.x 安装及 发布/订阅实践和数据持久化设置

    1.或者源码安装包 #wget http://download.redis.io/releases/redis-4.0.6.tar.gz 2.解压源码包 #tar -zxf redis-4.0.6.t ...

  2. java读写properties配置文件不改变属性的顺序和注释

    先贴代码 import java.io.BufferedWriter; import java.io.File; import java.io.FileInputStream; import java ...

  3. Ubuntu16.04 kaldi的简单配置

    1.什么是kaldi kaldi是使用c++写的语音识别的工具,apache 授予了v2.0的证书(果真应验,apache旗下无弱将).kaldi旨在供语音识别研究员使用.kaldi在目标和范围上和H ...

  4. Docker学习2-虚拟化

    虚拟化就是由位于下层的软件模块,根据上层的软件模块的期待,抽象(虚拟)出一个虚拟的软件或硬件模块,使上一层软件直接运行在这个与自己期待完全一致的虚拟环境上.从这个意义上来看,虚拟化既可以是软件层的抽象 ...

  5. 使用Highcharts生成折线图_at last

    //数据库数据的读取,读取数据后数据格式的转换,还有highchart数据源的配置,伤透了脑筋. anyway,最终开张了.哈哈! 数据库连接:conn_orcale.php <?php $db ...

  6. 极客互联网电视不是噱头,用户体验成创维G7200核心竞争力

        IT产业的迅猛发展带动了智能设备的崛起与繁荣,除已经高度普及的智能手机之外.智能电视.智能可穿戴设备等一大批新兴产品更是让消费者充分感受到了智能科技为生活所带来的变化.以智能电视为例,除了乐视 ...

  7. MySQL ERROR 1054 的问题

    MySQL 1054错误的情况 在用命令插入数据时提示 1054错误的问题: 这种情况下的解决方法: 是因为引号的问题    ‘  ’  . 字符串应该加上引号,解决问题.如下:

  8. CSS快速入门-属性和伪类

    一.属性选择器 <div class="gradefather"> hello1 <div name="son">hello2 < ...

  9. Sterling B2B Integrator与SAP交互 - 01 简介

    公司近期实施上线了SAP系统,由于在和客户的数据交互中采用了较多的EDI数据交换,且多数客户所采用的EDI数据并不太相同(CSV,XML,X12,WebService),所以在EDI架构上选择了IBM ...

  10. 在 Azure 上部署 Asp.NET Core Web App

    在云计算大行其道的时代,当你要部署一个网站时第一选择肯定是各式各样的云端服务.那么究竟使用什么样的云端服务才能够以最快捷的方式部署一个 ASP.NET Core的网站呢?Azure 的 Web App ...