THREE.JS入门教程(5)你应当知道的十件事


Posted in Javascript onJanuary 24, 2013

Three.js是一个伟大的开源WebGL库,WebGL允许JavaScript操作GPU,在浏览器端实现真正意义的3D。但是目前这项技术还处在发展阶段,资料极为匮乏,爱好者学习基本要通过Demo源码和Three.js本身的源码来学习。
0.简介
嗨,这是我的第一篇关于如何写出好的代码的文章。和很多开发者一样,我通过实践学习,但同时我也向其他更有经验的开发者们学习。在过去的几个月中,我在canvas标签上花了很多时间,我想如果把这段时间学到的关于WebGL和JavaScript的小技巧都写下来,一定很有意思。有一些很具体,有一些却很笼统,希望你们喜欢!
1.尽快写一个原型
让我们从简单的开始。现在你有个绝妙的注意,那么你应该尽快就程序里最复杂的部分写一个原型,看看这项技术是否可以实现你的想法。WebGL很强大,因为它可以直接操纵显卡里的GPU,但是也别忘了你需要通过JavaScript才能访问显卡,这比显卡内部运算的效率可是低多了。事实上,你的天才想法很可能被这种简单事情击败。
2.使用THREE.JS处理3D
就像我的朋友Hakim一样,我也完全理解我们正使用的技术的底层细节。理解表面之下的东西是很重要的,但是如果你使用three.js,它为你免去了如此多的烦恼。你可以将它用于Canvas,WebGL还有SVG,你也应该找到哪种方式合适你的需求。
3.避免SetInterval
这对所有使用JavaScript创建动画的人来说,都是很重要的一点。为什么?假定你设定每20毫秒后执行一次某个函数,而这个函数需要执行超过20毫秒的时间,那么20ms之后,浏览器不会在乎,而是直接开始下一次执行。至少你可以使用SetTimeout来设置,在某个函数执行完之后,再次执行它。

事实上,有一个更加新潮却还是半成品的函数,叫做requestAnimationFrame,它很棒。它很类似于setTimeOut函数,除了在这两个方面:当标签页失去焦点时,它就不再运行了;现在这个函数还是依赖于浏览器的,标准以后还有可能变化。如果你想要更多的信息,可以访问Paul Irish的博客。
4.使用倒序循环
这是个不错的小技巧,可以让你的循环更快。使用倒序,而且使用while循环。比如,这个循环:

for(var a = 0; a < arr.length; a++) { 
// 做一些什么 
}

它的执行效率不如下面这个循环:
// 假设数组arr存在 
var aLength = arr.length; 
while(aLength--) { 
// 做一些什么 
}

这可能没帮你省多少开销,因为执行的效率主要还是依赖于你在循环体里面干了什么。但如果你想程序的不必要开销减少到最后一个字节,后一个循环肯定赢。

实话说,主要影响程序执行效率的还是数组缓存的长度。你可以(也确实应该)去看看JSPerf去了解这一点,以及其他影响JavaScript性能的因素。
5.使用纹理
在WebGL里面把物体的任意一个细节都画出来看上去很诱人,但是,如果有可能的话,你应当注意一下你是否能够使用纹理,因为它能够极大地提高性能。在某些特定的情况下,比如阴影或者模糊效果,你也许不得不使用纹理,但在其他时候,你也应该时时关注你是否可以使用纹理。
6.使用缓存
这一点我在自己的试验力试了很多,在帧循环中,你应当避免引用变量、对象或者其他任何东西。基于这点原因,很值得把你的模型、顶点全部缓存起来,这样在渲染动画的时候你就可以快速地访问到它们。
7.禁用选中
我爱这一小段代码,我把它放到任何包含Canvas或WebGL的页面中。

// 禁用鼠标选中DOM元素 
document.onselectstart = function() { 
return false; 
};

你也可能只想在Canvas控件中禁用选中。这段是我在那些Canvas占据了整个屏幕的项目中使用的代码。
8.避免在JavaScript中定义CSS
现在,在JavaScript中定义CSS简直太方便了,尤其是你使用JQuery的时候
// 尽量不要这样做 
$("#someid").css({ 
position: 'relative', 
height: '30px', 
width: '300px', 
backgroundColor: '#A020F0' 
});

问题是这样做之后,你的JavaScript代码中很快就充斥着各种类型的CSS定义,而你同时又使用*.css文件来定义CSS,潜在的问题很难被发现。更好的方法是:使用class模块化CSS,而且只在JavaScript中定义那些不能预知的CSS类。
9.在对象中定义回调函数
我爱下面这段代码,这绝不是我自己想出来的,但它是如此整洁美观。如果你有一大堆回调函数要用,你也许会这样用的:
$("#someid").click(function() { 
// 回调函数 
// 返回false在JQuery中会阻止消息的传递和默认行为的放生 
return false; 
});

或者,你会回调一个在代码其他地方定义的松散的函数,比如这样
$("#someid").click(mySuperFunction); 
function mySuperFunction(event) { 
// 在这里做很多事情 
return false; 
}

这样做会有一些问题。第一段代码中,你在某个事件上绑定了匿名函数,你很难将该函数再从事件上解除下来。你当然可以解除某个事件上的所有函数,但你可能在它上面绑定了多个函数,而你只想解除一个。在第二种情况下,你的函数名污染了全局变量空间,代码的可维护性降低了。所以,考虑这样做:
$("#someid").click(callbacks.mySuperFunction); 
// 所有的回调函数都在callbacks对象中 
var callbacks = { 
mySuperFunction:function(event) { 
// 更多地工作 
return false; 
} 
} 
// 解除某个函数的绑定 
$("#someid").unbind('click', callbacks.mySuperFunction);

这样做整洁又干净,而且避免了上面提到的两个问题。
10.链式三元运算符
我完全是从Paul Irish的《JQuery,你应该知道的11件事》中学到这个的。这非常好用,你也应该会喜欢。我们经常这样做:
// 根据a的值为numberBasedOnA赋值 
// 如果a大于5,则赋值200,否则赋值38 
var numberBasedOnA = a > 5 ? 200 : 38;

但如果你想这样做,比如,当值为多少时如何,当值大于多少时如何,当值更加大的时候如何,明白吗?在这种情况下,链式三元运算符非常好用:
var numberBasedOnA = 
a < 5 ? 200 : 
a < 7 ? 38 : 
a < 11 ? 15 : 
a < 15 ? 49 : 
64; 
// 比这样做更有效率 
// when a >=15
Javascript 相关文章推荐
如何在父窗口中得知window.open()出的子窗口关闭事件
Oct 15 Javascript
原生Javascript封装的一个AJAX函数分享
Oct 11 Javascript
原生JS实现LOADING效果
Mar 16 Javascript
Sublime Text 3常用插件及安装方法
Dec 16 Javascript
javascript类型系统_正则表达式RegExp类型详解
Jun 24 Javascript
原生js实现手风琴功能(支持横纵向调用)
Jan 13 Javascript
jQuery按需加载轮播图(web前端性能优化)
Feb 17 Javascript
使用javaScript实现鼠标拖拽事件
Apr 03 Javascript
微信小程序实现文字从右向左无限滚动
Nov 18 Javascript
JS自定义滚动条效果
Mar 13 Javascript
vue 使用async写数字动态加载效果案例
Jul 18 Javascript
vue自定义树状结构图的实现方法
Oct 18 Javascript
THREE.JS入门教程(4)创建粒子系统
Jan 24 #Javascript
THREE.JS入门教程(3)着色器-下
Jan 24 #Javascript
THREE.JS入门教程(2)着色器-上
Jan 24 #Javascript
THREE.JS入门教程(1)THREE.JS使用前了解
Jan 24 #Javascript
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
Jan 24 #Javascript
jQuery ajax(复习)—Baidu ajax request分离版
Jan 24 #Javascript
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
Jan 23 #Javascript
You might like
比较全的PHP 会话(session 时间设定)使用入门代码
2008/06/05 PHP
PHP数组对比函数,存在交集则返回真,否则返回假
2011/02/03 PHP
用PHP实现 上一篇、下一篇的代码
2012/09/29 PHP
PHP isset()与empty()的使用区别详解
2017/02/10 PHP
Yii框架学习笔记之session与cookie简单操作示例
2019/04/30 PHP
docker-compose部署php项目实例详解
2019/07/30 PHP
js客户端快捷键管理类的较完整实现和应用
2010/06/08 Javascript
使用AngularJS制作一个简单的RSS阅读器的教程
2015/06/18 Javascript
canvas仿iwatch时钟效果
2017/03/06 Javascript
详解使用JS如何制作简单的ASCII图与单极图
2017/03/31 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
2018/01/24 Javascript
javascript动态创建对象的属性详解
2018/11/07 Javascript
tracking.js页面人脸识别插件使用方法
2020/04/16 Javascript
js序列化和反序列化的使用讲解
2019/01/19 Javascript
vue实现动态按钮功能
2019/05/13 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
2019/05/22 Javascript
微信小程序把百度地图坐标转换成腾讯地图坐标过程详解
2019/07/10 Javascript
layui-table获得当前行的上/下一行数据的例子
2019/09/24 Javascript
Vue路由 重定向和别名的区别说明
2020/09/09 Javascript
[50:38]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第二场 3月7日
2021/03/11 DOTA
Python学习笔记(二)基础语法
2014/06/06 Python
python  创建一个保留重复值的列表的补码
2018/10/15 Python
django基于restframework的CBV封装详解
2019/08/08 Python
有关Tensorflow梯度下降常用的优化方法分享
2020/02/04 Python
为什么说python适合写爬虫
2020/06/11 Python
浅谈Keras的Sequential与PyTorch的Sequential的区别
2020/06/17 Python
Python接收手机短信的代码整理
2020/08/02 Python
杰夫·班克斯男士服装网上商店:Jeff Banks
2019/10/24 全球购物
LINUX下线程,GDI类的解释
2012/04/17 面试题
党员自我评议对照检查材料
2014/09/27 职场文书
求职简历自荐信怎么写
2015/03/26 职场文书
银行催款通知书
2015/04/17 职场文书
运动会主持词大全
2015/07/02 职场文书
公司车辆维修管理制度
2015/08/05 职场文书
准备去美国留学,那么大学申请文书应该怎么写?
2019/08/12 职场文书
如何用六步教会你使用python爬虫爬取数据
2022/04/06 Python