THREE.JS入门教程(5)你应当知道的十件事
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
相关推荐
-
Three.js快速入门教程
引言 本文主要是讲解Three.js的相关概念,帮助读者对Three.js以及相关知识形成比较完整的理解. 近年来web得到了快速的发展.随着HTML5的普及,网页的表现能力越来越强大.网页上已经可以做出很多复杂的动画,精美的效果. 但是,人总是贪的.那么,在此之上还能做什么呢?其中一种就是通过WebGL在网页中绘制高性能的3D图形. OpenGL,WebGL到Three.js OpenGL大概许多人都有所耳闻,它是最常用的跨平台图形库. WebGL是基于OpenGL设计的面向web的图形标准,
-
THREE.JS入门教程(2)着色器-上
译序 Three.js是一个伟大的开源WebGL库,WebGL允许JavaScript操作GPU,在浏览器端实现真正意义的3D.但是目前这项技术还处在发展阶段,资料极为匮乏,爱好者学习基本要通过Demo源码和Three.js本身的源码来学习. 0.简介 之前我已经给出了一篇<开始使用Three.js>.如果你还没有读过,你可能需要去读一下,本文的基础是在那一篇教程的基础上完成的. 我想讨论一下着色器.在Three.js帮助你免去了很多麻烦之前,原生WebGL就很优秀了.有的时候,你也许会想要完
-
THREE.JS入门教程(3)着色器-下
译序 Three.js是一个伟大的开源WebGL库,WebGL允许JavaScript操作GPU,在浏览器端实现真正意义的3D.但是目前这项技术还处在发展阶段,资料极为匮乏,爱好者学习基本要通过Demo源码和Three.js本身的源码来学习. .简介 这是WebGL着色器教程的后半部分,如果你没看过前一篇,阅读这一篇教程可能会使你感到困惑,建议你翻阅前面的教程. 上一篇结束的时候,我们在屏幕中央画了一个好看的粉红色的球体.现在我要开始创建一些更加有意思的东西了. 在这一篇教程中,我们会先花点时间
-
THREE.JS入门教程(6)创建自己的全景图实现步骤
译序 Three.js是一个伟大的开源WebGL库,WebGL允许JavaScript操作GPU,在浏览器端实现真正意义的3D.但是目前这项技术还处在发展阶段,资料极为匮乏,爱好者学习基本要通过Demo源码和Three.js本身的源码来学习. 0.简介 全景图非常酷.使用Three.js做一个属于自己的全景图并不是那么困难. 要做一个全景图,你需要一个软件用来做一张全景图片(译者注:如果你没有那些特殊的设备).我使用了iPhone上的Microsoft Photosynth软件来制作. 1.环境
-
three.js快速入门【推荐】
Three.js的核心五步就是: 1.设置three.js渲染器 2.设置摄像机camera 3.设置场景scene 4.设置光源light 5.设置物体object 1.设置three.js渲染器 三维空间里的物体映射到二维平面的过程被称为三维渲染. 一般来说我们都把进行渲染操作的软件叫做渲染器. 具体来说要进行下面这些处理. var renderer; function initThree(){ width = document.getElementById("box").clie
-
THREE.JS入门教程(1)THREE.JS使用前了解
Three.js是一个伟大的开源WebGL库,WebGL允许JavaScript操作GPU,在浏览器端实现真正意义的3D.但是目前这项技术还处在发展阶段,资料极为匮乏,爱好者学习基本要通过Demo源码和Three.js本身的源码来学习. 国外网站 aerotwist.com 有六篇较为简单的入门教程,我尝试着将其翻译过来,与大家分享. 我在一些实验项目中使用了Three.js,我发现它对快速上手浏览器3D编程确实很有帮助.通过Three.js,你不仅可以创建相机.物体.光线.材质等等,还可以选择
-
JS库之Three.js 简易入门教程(详解之一)
开场白 webGL可以让我们在canvas上实现3D效果.而three.js是一款webGL框架,由于其易用性被广泛应用.如果你要学习webGL,抛弃那些复杂的原生接口从这款框架入手是一个不错的选择. 博主目前也在学习three.js,发现相关资料非常稀少,甚至官方的api文档也非常粗糙,很多效果需要自己慢慢敲代码摸索.所以我写这个教程的目的一是自己总结,二是与大家分享. 本篇是系列教程的第一篇:入门篇.在这篇文章中,我将以一个简单的demo为例,阐述three.js的基本配置方法.学完这篇文章
-
THREE.JS入门教程(4)创建粒子系统
译序 Three.js是一个伟大的开源WebGL库,WebGL允许JavaScript操作GPU,在浏览器端实现真正意义的3D.但是目前这项技术还处在发展阶段,资料极为匮乏,爱好者学习基本要通过Demo源码和Three.js本身的源码来学习. 0.简介 嗨,又见面了.这么说我们已经开始学习Three.js了,如果你还没有看过之前三篇教程,建议你先读完.如果你已经读完前面的教程了,你可能会想做一些关于粒子的东西.让我们直面这个话题吧,每个人都爱粒子效果.不管你是否知道,你可以很轻易地创建它们. 1
-
THREE.JS入门教程(5)你应当知道的十件事
Three.js是一个伟大的开源WebGL库,WebGL允许JavaScript操作GPU,在浏览器端实现真正意义的3D.但是目前这项技术还处在发展阶段,资料极为匮乏,爱好者学习基本要通过Demo源码和Three.js本身的源码来学习. 0.简介 嗨,这是我的第一篇关于如何写出好的代码的文章.和很多开发者一样,我通过实践学习,但同时我也向其他更有经验的开发者们学习.在过去的几个月中,我在canvas标签上花了很多时间,我想如果把这段时间学到的关于WebGL和JavaScript的小技巧都写下来,
-
p5.js入门教程之小球动画示例代码
一.运动的小球 本节将用p5.js做一个在屏幕上运动的小球. 思路是用变量记录小球的位置,然后在draw()函数里对其做出改变,由于draw()函数会不断地运行(频率为FPS,默认60帧/秒),所以小球便产生了运动. 代码如下: var x=0; function setup() { createCanvas(400, 400); } function draw() { background(220); //width和height是关键词,分别是Canvas的宽和高 x+=2; ellipse
-
p5.js入门教程和基本形状绘制
一.什么是p5.js 最近接触了一门数字媒体艺术类的课程,名为Interactivity,教的是p5.js. 主讲老师就是开发者之一--还是挺激动的. p5.js是一个为艺术家.设计师而开发的Javascript库,可以看作是Processing的Web版本.如果有Processing学习经验的话,p5.js上手会非常快. 至于p5.js有什么用,这个问题很难回答,因为我本身也是个初学者. 我目前觉得p5.js是一个很好的激发创意的工具,并且你可以将p5.js的内容嵌入网页,让你的网站更炫. 二
-
p5.js入门教程之键盘交互
一.键盘交互相关关键词与函数 keyIsPressed: 关键词,按下按键时为true,反之为false keyCode: 关键词,用于判断按下哪个按键 keyPressed():函数,按键按下时触发一次 keyReleased():函数,按键松开时触发一次 keyIsDown():函数,按下指定按键时返回true,反之为false 以下是一个较综合的案例,用wsad与zxcv控制小球移动: var x=200; var y=200; var speed=2; function setup()
-
p5.js入门教程之平滑过渡(Easing)
一.跟随鼠标移动的小球 使用mouseX,mouseY可以创建一个跟随鼠标移动的小球. function setup() { createCanvas(400, 400); } function draw() { background(220); ellipse(mouseX,mouseY,20,20); } 二.让小球更加平滑的移动--使用Easing 一般制作精良的UI界面都会用到平滑移动这一效果,也就是利用了名为"Easing"的方法. 实现思路是另外设置变量以进行位置的过渡,代
-
p5.js入门教程之图片加载
一.preload()函数与图片上传 preload()函数是一个特殊的函数,它同setup()类似,只在程序开始时运行一次,但顺序在setup()之前. 一般我们会将媒体文件(图片.声音)加载的语句放在preload()中,因为preload()有一个特性就是不加载完毕,程序就不会开始,保证了程序运行时不会出错. 在加载图片之前,我们需要先将图片文件上传. 方法是: ①点击编辑器左上角的小三角展开文件目录. ②点击文件目录右上角小三角,展开菜单后Add File. ③可以直接将图片文件拖到框里
-
p5.js入门教程之鼠标交互的示例
本文介绍了p5.js入门教程之鼠标交互的示例,分享给大家,具体如下: 一.鼠标交互常用关键词 p5.js提供了许多鼠标操作用的关键词与函数,常用的有: mouseIsPressed:关键词,若鼠标按下则为true,反之为false mouseButton:关键词,用来判断鼠标按下的是哪个键 案例如下: function setup() { createCanvas(400, 400); } function draw() { background(220); if (mouseIsPressed
-
适用于javascript开发者的Processing.js入门教程
这个入门指导是为javascript开发者写的.读这个文档之前,你最好掌握javascript和web开发编程,并还会非常基本的 Processing 知识. 目录: 为没有耐心看长篇大论的人准备: 如果你很着急入门,那么你就需要知道以下几点: 1.Processing.js 把 Processing 代码转变成能够在浏览器端运行的javascript代码,实质是通过<canvas>标签来实现绘图的: 2.为了使用它,你的首
-
node.js入门教程迷你书、node.js入门web应用开发完全示例
本书状态 你正在阅读的已经是本书的最终版.因此,只有当进行错误更正以及针对新版本Node.js的改动进行对应的修正时,才会进行更新. 本书中的代码案例都在Node.js 0.6.11版本中测试过,可以正确工作. 读者对象 本书最适合与我有相似技术背景的读者: 至少对一门诸如Ruby.Python.PHP或者Java这样面向对象的语言有一定的经验:对JavaScript处于初学阶段,并且完全是一个Node.js的新手. 这里指的适合对其他编程语言有一定经验的开发者,意思是说,本书不会对诸如数据类型