【three.js详解之二】渲染器篇

 

本篇文章将详细讲解three.js中渲染器(renderer)的设置方法。

three.js文档中渲染器的分支如下:

Renderers

可以看到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详解之二】渲染器篇的更多相关文章

  1. 【three.js详解之一】入门篇

    [three.js详解之一]入门篇   开场白 webGL可以让我们在canvas上实现3D效果.而three.js是一款webGL框架,由于其易用性被广泛应用.如果你要学习webGL,抛弃那些复杂的 ...

  2. vue 源码详解(二): 组件生命周期初始化、事件系统初始化

    vue 源码详解(二): 组件生命周期初始化.事件系统初始化 上一篇文章 生成 Vue 实例前的准备工作 讲解了实例化前的准备工作, 接下来我们继续看, 我们调用 new Vue() 的时候, 其内部 ...

  3. iOS 开发之照片框架详解之二 —— PhotoKit 详解(上)

    转载自:http://kayosite.com/ios-development-and-detail-of-photo-framework-part-two.html 一. 概况 本文接着 iOS 开 ...

  4. [js高手之路]深入浅出webpack教程系列3-配置文件webpack.config.js详解(下)

    本文继续接着上文,继续写下webpack.config.js的其他配置用法. 一.把两个文件打包成一个,entry怎么配置? 在上文中的webpack.dev.config.js中,用数组配置entr ...

  5. HAProxy详解(二):HAProxy基础配置与应用实例

    一.HAProxy基础配置与应用实例: 1.快速安装HAProxy集群软件: HAProxy的官网: https://www.haproxy.org/#down下载HAProxy的源码包. 安装: [ ...

  6. 「翻译」Unity中的AssetBundle详解(二)

    为AssetBundles准备资源 使用AssetBundles时,您可以随意将任何Asset分配给所需的任何Bundle.但是,在设置Bundles时,需要考虑一些策略.这些分组策略可以使用到任何你 ...

  7. MySQL之SQL优化详解(二)

    目录 MySQL之SQL优化详解(二) 1. SQL的执行顺序 1.1 手写顺序 1.2 机读顺序 2. 七种join 3. 索引 3.1 索引初探 3.2 索引分类 3.3 建与不建 4. 性能分析 ...

  8. WebView使用详解(二)——WebViewClient与常用事件监听

      登录|注册     关闭 启舰 当乌龟有了梦想……       目录视图 摘要视图 订阅 异步赠书:Kotlin领衔10本好书      免费直播:AI时代,机器学习如何入门?      程序员8 ...

  9. Solon详解(二)- Solon的核心

    Solon详解系列文章: Solon详解(一)- 快速入门 Solon详解(二)- Solon的核心 Solon详解(三)- Solon的web开发 Solon详解(四)- Solon的事务传播机制 ...

随机推荐

  1. Linux之常用快捷键

    tab:自动补齐命令或者路径 ESC+u:将字符小写变大写 ctrl+s:在终端中冻结stdin ctrl+q:在终端中恢复stdin ctrl+a:光标移动到行首 ctrl+e:光标移动到行尾 ct ...

  2. 【转】Struts1.x系列教程(4):标签库概述与安装

    转载地址:http://www.blogjava.net/nokiaguy/archive/2009/01/archive/2009/01/archive/2009/01/archive/2009/0 ...

  3. JavaScript高级应用(一)

    1.尺寸 //各种尺寸 s += "\r\n网页可见区域宽(document.body.clientWidth):"+ document.body.clientWidth; s + ...

  4. minicom 使用教程

    因为现在电脑基本不配备串行接口,所以,usb转串口成为硬件调试时的必然选择.目前知道的,PL2303的驱动是有的,在dev下的名称是ttyUSB#. minicom,tkterm都是linux下应用比 ...

  5. iOS开发数据库篇—SQL

    iOS开发数据库篇—SQL 一.SQL语句 如果要在程序运行过程中操作数据库中的数据,那得先学会使用SQL语句 1.什么是SQL SQL(structured query language):结构化查 ...

  6. (原创)LAMP搭建之二:apache配置文件详解(中英文对照版)

    LAMP搭建之二:apache配置文件详解(中英文对照版) # This is the main Apache server configuration file. It contains the # ...

  7. VMware技巧01

    1.20160930 VMware® Workstation 10.0.4 build-2249910,使用中遇到问题(WinXP sp3):网卡 桥接模式,NAT模式 都连不上网... 今天,尝试了 ...

  8. VLAN

    VLAN  VLAN技术要点主要有两点: 1.支持VLAN的交换机的内部交换原理: 2.设备之间(交换机之间,交换机与路由器之间,交换机与主机之间)交互时,VLAN TAG的添加和移除. VLAN通信 ...

  9. Python_Day1_基础1

    一. Python介绍 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为AB ...

  10. linux 后台运行命令 nohup命令

    转载:http://if.ustc.edu.cn/~ygwu/blog/archives/000538.html 2005年04月18日 简单而有用的nohup命令在UNIX/LINUX中,普通进程用 ...