【three.js详解之二】渲染器篇
【three.js详解之二】渲染器篇
本篇文章将详细讲解three.js中渲染器(renderer)的设置方法。
three.js文档中渲染器的分支如下:
Renderers
- CanvasRenderer
- DOMRenderer
- SVGRenderer
- WebGLRenderer
- WebGLRenderTarget
- WebGLRenderTargetCube
- WebGLShaders
可以看到three.js提供了很多的渲染方式,我们选择的当然是WebGLRenderer,但我们这里要将CanvasRenderer与WebGLRenderer两种渲染方式做一个比较。
在上篇文章的例子中,我们完全可以把WebGL渲染器:
renderer=new THREE.WebGLRenderer();
替换为Canvas渲染器:
renderer=new THREE.CanvasRenderer();
这样canvas就会以2d的方式渲染,以下是效果对比(前者用WebGLRenderer渲染):
很明显,WebGL在渲染效果上更胜一筹,WebGL的渲染能够最大程度表现你制作精美的场景,如果你的设备支持它,这个渲染器具有比CanvasRenderer更好的性能,相反地,CanvasRenderer则具有更好的兼容性。

//开启Three.js渲染器:WebGLRenderer
//声明全局变量
var renderer;
function initThree() {
//获取容器的宽高
width = document.getElementById('canvas3d').clientWidth;//获取画布「canvas3d」的宽
height = document.getElementById('canvas3d').clientHeight;//获取画布「canvas3d」的高
//声明渲染器对象:WebGLRenderer
renderer=new THREE.WebGLRenderer({
antialias:true,//antialias:true/false是否开启反锯齿
precision:"highp",//precision:highp/mediump/lowp着色精度选择
alpha:true,//alpha:true/false是否可以设置背景色透明
premultipliedAlpha:false,//?
stencil:false,//?
preserveDrawingBuffer:true,//preserveDrawingBuffer:true/false是否保存绘图缓冲
maxLights:1//maxLights:最大灯光数
});
//指定渲染器的高宽(和画布框大小一致)
renderer.setSize(width, height );
//追加 【canvas】 元素到 【canvas3d】 元素中。
document.getElementById('canvas3d').appendChild(renderer.domElement);
//设置canvas背景色(clearColor)和背景色透明度(clearAlpha)
renderer.setClearColor(0x000000,0.5);
}

这是我们上篇文章中设置渲染器的js代码,有以下流程:
1.声明渲染器对象,我们用new THREE.WebGLRenderer()来新建一个WebGL渲染器。
其中WebGLRenderer()中有一些参数我们可以设置,以下这些参数来自于官方文档:
antialias:
值:true/false
含义:是否开启反锯齿,设置为true开启反锯齿。
precision:
值:highp/mediump/lowp
含义:着色精度选择。
alpha:
值:true/false
含义:是否可以设置背景色透明。
premultipliedAlpha:
值:true/false
含义:?
stencil:
值:true/false
含义:?
preserveDrawingBuffer:
值:true/false
含义:是否保存绘图缓冲,若设为true,则可以提取canvas绘图的缓冲。
maxLights:
值:数值int
含义:最大灯光数,我们的场景中最多能够添加多少个灯光。
2.制定渲染器的宽高,我们用renderer.setSize(width,height)来设置;
3.追加生成的canvas元素到容器元素中。canvas对象的获取方法为renderer.domElement;
4.设置canvas背景色(clearColor)和背景色透明度(clearAlpha),renderer.setClearColor(clearColor,clearAlpha);
那么以上就是three.js渲染器的一些常用设置了,大家可以实际检验一下各种参数所起的作用。
【three.js详解之二】渲染器篇的更多相关文章
- 【three.js详解之一】入门篇
[three.js详解之一]入门篇 开场白 webGL可以让我们在canvas上实现3D效果.而three.js是一款webGL框架,由于其易用性被广泛应用.如果你要学习webGL,抛弃那些复杂的 ...
- vue 源码详解(二): 组件生命周期初始化、事件系统初始化
vue 源码详解(二): 组件生命周期初始化.事件系统初始化 上一篇文章 生成 Vue 实例前的准备工作 讲解了实例化前的准备工作, 接下来我们继续看, 我们调用 new Vue() 的时候, 其内部 ...
- iOS 开发之照片框架详解之二 —— PhotoKit 详解(上)
转载自:http://kayosite.com/ios-development-and-detail-of-photo-framework-part-two.html 一. 概况 本文接着 iOS 开 ...
- [js高手之路]深入浅出webpack教程系列3-配置文件webpack.config.js详解(下)
本文继续接着上文,继续写下webpack.config.js的其他配置用法. 一.把两个文件打包成一个,entry怎么配置? 在上文中的webpack.dev.config.js中,用数组配置entr ...
- HAProxy详解(二):HAProxy基础配置与应用实例
一.HAProxy基础配置与应用实例: 1.快速安装HAProxy集群软件: HAProxy的官网: https://www.haproxy.org/#down下载HAProxy的源码包. 安装: [ ...
- 「翻译」Unity中的AssetBundle详解(二)
为AssetBundles准备资源 使用AssetBundles时,您可以随意将任何Asset分配给所需的任何Bundle.但是,在设置Bundles时,需要考虑一些策略.这些分组策略可以使用到任何你 ...
- MySQL之SQL优化详解(二)
目录 MySQL之SQL优化详解(二) 1. SQL的执行顺序 1.1 手写顺序 1.2 机读顺序 2. 七种join 3. 索引 3.1 索引初探 3.2 索引分类 3.3 建与不建 4. 性能分析 ...
- WebView使用详解(二)——WebViewClient与常用事件监听
登录|注册 关闭 启舰 当乌龟有了梦想…… 目录视图 摘要视图 订阅 异步赠书:Kotlin领衔10本好书 免费直播:AI时代,机器学习如何入门? 程序员8 ...
- Solon详解(二)- Solon的核心
Solon详解系列文章: Solon详解(一)- 快速入门 Solon详解(二)- Solon的核心 Solon详解(三)- Solon的web开发 Solon详解(四)- Solon的事务传播机制 ...
随机推荐
- Linux之常用快捷键
tab:自动补齐命令或者路径 ESC+u:将字符小写变大写 ctrl+s:在终端中冻结stdin ctrl+q:在终端中恢复stdin ctrl+a:光标移动到行首 ctrl+e:光标移动到行尾 ct ...
- 【转】Struts1.x系列教程(4):标签库概述与安装
转载地址:http://www.blogjava.net/nokiaguy/archive/2009/01/archive/2009/01/archive/2009/01/archive/2009/0 ...
- JavaScript高级应用(一)
1.尺寸 //各种尺寸 s += "\r\n网页可见区域宽(document.body.clientWidth):"+ document.body.clientWidth; s + ...
- minicom 使用教程
因为现在电脑基本不配备串行接口,所以,usb转串口成为硬件调试时的必然选择.目前知道的,PL2303的驱动是有的,在dev下的名称是ttyUSB#. minicom,tkterm都是linux下应用比 ...
- iOS开发数据库篇—SQL
iOS开发数据库篇—SQL 一.SQL语句 如果要在程序运行过程中操作数据库中的数据,那得先学会使用SQL语句 1.什么是SQL SQL(structured query language):结构化查 ...
- (原创)LAMP搭建之二:apache配置文件详解(中英文对照版)
LAMP搭建之二:apache配置文件详解(中英文对照版) # This is the main Apache server configuration file. It contains the # ...
- VMware技巧01
1.20160930 VMware® Workstation 10.0.4 build-2249910,使用中遇到问题(WinXP sp3):网卡 桥接模式,NAT模式 都连不上网... 今天,尝试了 ...
- VLAN
VLAN VLAN技术要点主要有两点: 1.支持VLAN的交换机的内部交换原理: 2.设备之间(交换机之间,交换机与路由器之间,交换机与主机之间)交互时,VLAN TAG的添加和移除. VLAN通信 ...
- Python_Day1_基础1
一. Python介绍 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为AB ...
- linux 后台运行命令 nohup命令
转载:http://if.ustc.edu.cn/~ygwu/blog/archives/000538.html 2005年04月18日 简单而有用的nohup命令在UNIX/LINUX中,普通进程用 ...