一款基于Webgl实现的3D类网页游戏

摘要：本文主要介绍运用webgl的第三方框架three.js实现的一款简单的3D类网页游戏。主要内容包括介绍three.js,如何运用three.js摆放相机，设置相机角度，相机视觉角度转移，场景中物体的位置摆放和贴皮，在3d世界中的直线运动，碰撞检测等。

关键词：3d数学, webgl, three.js,

技术领域：前端开发，游戏开发，3d，webgl

一.   背景

作为 HTML5 大家庭中的一员，相比 CSS3 和 WebSocket 等大家早已熟知的新技术，WebGL 可以说是其中最神秘的一员。长久以来很多人——包括这个圈子里的技术人，对 WebGL 都不是很了解，甚至有很多的误解，但实际上去年一年到现在 WebGL 正在以爆炸般的速度发展着，很多情况都发生了变化。WebGL 就像一只丑小鸭，正在慢慢从土肥圆成长为白富美的公主。实际上，相对于国外，国内这方面的探索还是比较少，因为万恶的喝了三鹿奶粉长大的ie系列占据浏览器半壁江山，决定不可能在短期内大范围运用该技术，即使你做了一个很炫很酷的3D网站，做到逛网站好像第一人称逛商店那样具有3d真是的立体感，上线后pm肯定跟你拼了，因为过半的国内用户无法访问。弹出类似以下的对话框

这样，再好再炫的技术也是没用，因为用户关心的不是背后的技术，而是直接的用户体验。就好像实现同样的页面效果，有人用纯CSS3实现（包括所有图片），也有人直接切图。这显得用CSS3的人很geek，但是上线后根本看不到原有效果，圆形变方形，方形还是畸形，畸形的什么都看不到。说这些无非是想说明webgl其实并不是一个新鲜的概念，而是一门技术而已。没有webgl的，unity3D，flash的stage3D一样可以做到，甚至有过之而无不及，兼容所有浏览器，直接可以商用，给用户就一个字，酷。

那不就是说webgl没用，拼不过flash吗？那还花那么多时间精力去写博客，做demo干嘛。实际上，WebGL是一种3D绘图标准，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。显然，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。这样用户就可以不用安装各种各样的插件就可以访问3D型网页了。

PS，上面那段话是摘自百度百科的webgl词条，不相信可以去查一下，一模一样的。不过话说回来，个人鄙见，webgl在pc端是赢不了flash的，起码在未来十年。因为现在98.919%的浏览器都支持flash，用户情愿去装一个flash player，也不愿意改用浏览器（尤其是我们很有爱的ie6 ^_^）。所以pc端的话webgl有点尴尬。不过在移动端方面还是值得期待的，尽管刚刚发布的ios6没有说支持webgl，但是随着HTML5的web app在移动端的普及和硬件的升级，相信webgl还是可以打下移动端的半壁江山的。现在玩webgl相当于玩玩具，实属是各位技术发烧友和Geek打发周末无聊时间的必备良药。

吐槽了大半天，无非是介绍一下背景而已，下面正式开始我们的webgl之旅。

二.Three.js简介