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

2024-05-06 14:19:50

字体：大中小

来源：转载

供稿：网友

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性能的因素。

上一篇：js隐藏与显示回到顶部按钮及window.onscroll事件应用

下一篇：一个级联菜单代码学习及removeClass与addClass的应用