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

本页内容版权归属为原作者,如有侵犯您的权益,请通知我们删除。
软件开发实际就是数据的增删改查,javascript前端开发也不例外。今天学了jquery框架的简单使用。于是用它实现简单的增删改,接着也用原始的javascript实现同样的功能,以便看出jquery的强大: 代码如下: !DOCTYPE htmlhtml xmlns="http://www.w3.org/1999/xhtml"headmeta http-equiv="Content-Type" content="text/html; charset=utf-8"/title/titlescript t
前段时间写了个 tabs 选项卡切换效果 ,今天抽空在原有的基础上进行了扩展,加入了自动轮播,这样就变成了类似图片轮播的效果了。 html 代码: 复制代码 代码如下: !DOCTYPE HTML html lang="en-US" head meta charset="UTF-8" titlejs-tabs/title link rel="stylesheet" type="text/css" href=#>style type="text/css" a{color:#a0b3d6;} .tabs{bor
Asyncjs/seriesByHand.js 复制代码 代码如下: var fs = require('fs'); process.chdir('recipes'); // 改变工作目录 var concatenation = ''; fs.readdir('.', function(err, filenames) { if (err) throw err; function readFileAt(i) { var filename = filenames[i]; fs.stat(filename, f
head title/title script src="jquery-1.4.2.js" type="text/javascript"/script script type="text/javascript" $(function() { //alert($("div").text()); //对数组元素使用匿名函数进行逐个处理。 $("div").each(function(key, value) { //alert(key+value); // alert($(value).text()); ale
测试浏览器的版本: IETester 6 ,7 IE 8.0 Firefox 3.5.5 Chrome 4.1.249.1064 (45376) Opera 9.64 Safari 4.0 先来看看各个主流浏览器都有哪些坐标属性以及它们的意义 在IE中 event.offsetX event.offsetY 相对于e.srcElement坐标 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。 event.clientX event.clien
但是,我对JS调试还是有一定经验的: 首先当我们写好一段JS 的时候: 1. 点击IE浏览器 —— 工具栏 —— 点击开发人员工具或按F12 我们调试界面 点击最左侧可以和 VS2005 一样设置断点了 点击调试: 就可以回到页面 运行 或 刷新 进行调试了 其实都 是微软的产品 难免和 VS 一样 ,所以学起来都很轻松 既然和VS也一样 自然 VS也能调试 JS 火狐也是差不多 选择错误控制台(CTRL+SHIFT+J) 可以直接输入JS测试 比较好用的就是 firefox+firebug结合查看,相关的
这里面的return含有一些细节知识: 例如:onClick='return add_onclick()'与 onClick='add_onclick()'的区别 JAVASCRIPT在事件中调用函数时用return返回值实际上是对window.event.returnvalue进行设置。 而该值决定了当前操作是否继续。 当返回的是true时,将继续操作。 当返回是false时,将中断操作。 而直接执行时(不用return)。将不会对window.event.returnvalue进行设置 所以会默认地继
当然只是个人的经验,有什么不对的也请高手见谅和指正。 关于到培训学校学习的忠告: 别说现在没有这样的学校,就是有专门的学校也不要去,因为不会有好的老师的。不要浪费你自己(很可能是你父母)的钱和时间。趁早死了这个念头。 关于培训学校的这个我想我要比一般的朋友更有发言权,因为我本人干英语培训将近2年,我很清楚培训市场的情况,你很难碰到一个好的老师。英语可能还好些,毕竟英语说得好的老师还比较多,长期跟老外泡在一起,确实对口语能力的提高很显著,但是代价是很昂贵的。而你现在要学的是Javascript,呵呵,好的前端
创建 Number 对象的语法: 复制代码 代码如下: var myNum = new Number(value); var myNum = Number(value); 当 Number() 和运算符 new 一起作为构造函数使用时,它返回一个新创建的 Number 对象。如果不用 new 运算符,把 Number() 作为一个函数来调用,它将把自己的参数转换成一个原始的数值,并且返回这个值(如果转换失败,则返回 NaN)。 MAX_VALUE MAX_VALUE 属性是 JavaScript 中可表示
就是实现这个效果的,选中添加到右边,全部添加到右边,选中删除到左边,全部删除到左边。 html部分: 复制代码 代码如下: body div class="centent" select multiple="multiple" id="select1" option value="1"选项1/option option value="2"选项2/option option value="3"选项3/option option value="4"选项4/option option value="5"选项5/