Three.js学习笔记 – “我和小伙伴都惊呆了”的特效和Three.js初探

什么是Three.js

three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精采的演示。不过,这款引擎目前还处在比较不成熟的开发阶段,其不够丰富的 API 以及匮乏的文档增加了初学者的学习难度(尤其是文档的匮乏)three.js的代码托管在github上面。

上面摘自百度百科。依我来看就是一个在HTML5画布(canvas)上显示的3D引擎。如果你之前折腾过本地3D引擎,比如Steam,寒霜,那上手这个就非常简单了。

学习这个引擎难处有几点:第一,正如上面所说,没有比较系统的文档,只有一些大神写的Demo,对于一些js基础不好或者英语不好的童鞋来说简直不能历届;第二,一般人对游戏引擎里面的纹理、光源、材质等词不甚理解。第三,不晓得怎么去调试。

在开始正式介绍之前,可以先看看Demo,了解一下这个引擎能做什么。

官方网站上的例子:http://threejs.org/

GitHub上的例子:http://stemkoski.github.io/Three.js/

其中几个比较有特色的列一下(提提你们的胃口~)(都不要使用IE或基于IE的浏览器打开!推荐使用Chrome):

最基本的Hello World:http://stemkoski.github.io/Three.js/HelloWorld.html

调用你的摄像头:http://stemkoski.github.io/Three.js/Webcam-Texture.html

体感操作(你没有看错!):http://stemkoski.github.io/Three.js/Webcam-Motion-Detection-Texture.html

支持你的游戏手柄(XBox等):http://stemkoski.github.io/Three.js/Mesh-Movement-Gamepad.html

3D建模和方向键控制移动方向:http://stemkoski.github.io/Three.js/Model-Animation-Control.html

SkyBox和3个气泡渲染(可见Three.js的渲染真心不赖):http://stemkoski.github.io/Three.js/Metabubbles.html

3D红蓝偏光的名车展(打开前自备偏光镜):http://threejs.org/examples/webgl_materials_cars_anaglyph.html

帅爆了的元素周期表:http://threejs.org/examples/css3d_periodictable.html

跑车游戏:http://hexgl.bkcore.com/

有没有和小伙伴们都惊呆了?——至少我是的。没有使用Flash,没有大量的图片拼接,绝大多数的特效靠代码实现,包括文章配图那款SS跑车,AMAZING!

Three.js环境的准备

正文现在开始。

我整个例子有不少地方参考的是http://www.hiwebgl.com/?p=1058。向这样的译者表示绝对的敬意!(话说原文是日文的,我这个看英语文档无压力的无论如何也受不鸟日文啊……)

Three.js从GitHub库中获取:https://github.com/mrdoob/three.js/,下载请点击在页面右边的“Download ZIP”按钮。比较齐活的例子在:https://github.com/stemkoski/stemkoski.github.com可以下载。

Three.js至少需要build目录下的three,js,three.min.js是前者的压缩版。docs下的index.html是器官方文档(我还没细致看过,质量怎么样没法说)。example目录下都是例子,值得一提的是,这些例子必须要挂到服务器里面预览,本地打开会有问题,IIS或者Tomcat或者Apache都可以(以后会说到为什么)。

运行第一个Three.js

第一个例子也用来确定一下Three.js是否能正常运行。在WebRoot下建一个js文件夹,把three,js拷贝进去(three.min.js也行)。

在WebRoot下建一个index.html,内容如下:





Three.js チュートリアル1






    

执行的结构应该是这样,Three.js也比较大,网的质量可能不好,看不到效果的多刷几次:http://tonythegod.eu5.org/three.js/1/demo1.html

自二个例子:一个可控制的长方体

最后的效果(没看到效果多刷几次:http://tonythegod.eu5.org/three.js/1/demo2.html

我没有给李兴华打广告……只是这本书在我写Demo时就在我手边,然后就当了模特了~

贴出主要的代码,附上一些主要的注释:




Template (Three.js)


 



     
    
    
    
    
    
    
     

    

其实学习Three.js大多是这样,因为缺少相应的文档,看大牛们写的注释是最快上手的办法。

这次就先到这儿,下次再说怎么一点点在画布上作画。

本文转载自tony的小站: http://tonythegod.eu5.org/three-js-study-notes-study-on-three-js/ | Tony的工作站

转载于:https://www.cnblogs.com/xufeiyang/articles/3181369.html

你可能感兴趣的:(Three.js学习笔记 – “我和小伙伴都惊呆了”的特效和Three.js初探)