Three.js入门指南：开发者必须掌握的十个关键技巧

Three.js开发基础与学习资源

Three.js是一款优秀的开源WebGL库，它允许JavaScript直接操作GPU，从而在浏览器中实现真正的3D渲染效果。然而，该技术目前仍处于发展阶段，相关学习资料相对匮乏，开发者通常需要依赖Demo源码和Three.js自身的源代码来进行学习。

快速原型验证与底层技术理解

这是笔者关于编写高质量代码的首篇文章。与许多开发者一样，笔者通过实践并结合向资深开发者请教来积累经验。在过去的几个月里，笔者在Canvas标签上投入了大量精力，现将这段时间积累的关于WebGL和JavaScript的实用技巧整理如下，既有具体案例也有通用原则，希望读者能从中受益。

我们从基础开始。当你有一个创新的想法时，应尽快编写程序中最复杂部分的原型，以验证技术可行性。WebGL的强大之处在于它能直接操控GPU，但通过JavaScript访问GPU的效率远低于GPU内部运算效率。因此，你的创意可能因这种间接访问的效率瓶颈而受挫。

正如我的朋友Hakim所言，深入理解所用技术的底层细节至关重要。虽然理解底层机制很有价值，但使用Three.js可以省去大量繁琐工作。Three.js支持Canvas、WebGL以及SVG等多种渲染后端，开发者应根据实际需求选择最合适的渲染方式。

动画循环优化：requestAnimationFrame

这对于所有使用JavaScript创建动画的开发者都至关重要。假设你设定每20毫秒执行一次函数，而该函数执行时间超过20毫秒，浏览器不会等待，而是直接开始下一次执行。虽然可以使用setTimeout来确保函数执行完毕后再调用下一次，但这并非最佳方案。

实际上，有一个更现代但尚不稳定的函数叫作requestAnimationFrame，它表现优异。它与setTimeout类似，但有两个主要区别：当标签页失去焦点时，它会自动停止运行；此外，该函数仍依赖浏览器实现，未来标准可能发生变化。如需更多信息，可参考Paul Irish的博客。

高性能循环与渲染优化技巧

这是一个能让循环运行更快的实用技巧：使用倒序循环，并采用while循环。例如，以下常规循环：

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

其执行效率不如以下循环：

 
// 假设数组arr存在
var aLength = arr.length;
while(aLength--) {
// 做一些什么
} 

这或许不会显著节省开销，因为执行效率主要取决于循环体内的操作。但若你希望将程序的额外开销降至最低，后一种循环方式显然更优。

说实话，影响程序执行效率的主要因素是数组缓存的长度。你可以（且应该）查看JSPerf以了解这一点，以及其他影响JavaScript性能的因素。

在WebGL中绘制物体的任意细节看似诱人，但如果可能，你应当注意是否可以使用纹理，因为它能极大提升性能。在某些特定情况下，如阴影或模糊效果，你可能不得不使用纹理，但在其他时候，你也应时刻关注是否可以使用纹理来优化渲染。

这一点在笔者自己的试验中得到了验证。在帧循环中，你应当避免引用变量、对象或其他任何动态元素。基于此原因，值得将模型、顶点等数据缓存起来，以便在渲染动画时能够快速访问。

DOM交互与CSS管理最佳实践

笔者非常喜欢这段代码，并将其放入任何包含Canvas或WebGL的页面中。

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

你可能只想在Canvas控件中禁用选中功能。这段代码是笔者在那些Canvas占据整个屏幕的项目中使用的方案。

现在，在JavaScript中定义CSS变得非常方便，尤其是当你使用JQuery时。

 
// 尽量不要这样做
$("#someid").css({
position: 'relative',
height: '30px',
width: '300px',
backgroundColor: '#A020F0'
}); 

问题是，这样做之后，你的JavaScript代码中会很快充斥着各种类型的CSS定义，而你同时又使用*.css文件来定义CSS，潜在的问题很难被发现。更好的方法是：使用class模块化CSS，而且只在JavaScript中定义那些不能预知的CSS类。

回调管理与链式三元运算符应用

笔者非常喜欢下面这段代码，这并非笔者原创，但它如此整洁美观。如果你有一大堆回调函数要用，你可能会这样写：

 
$("#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);

这样做整洁又干净，而且避免了上面提到的两个问题。

笔者完全是从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