Three.js教程

导读:

从今天开始我和你们一起学习three.js,本教程主要讲解如何利用web框架Three.js创建三维场景,three.js是一款开源的3D绘图js引擎(从名字就能看出three=3就是3D的意思)原作者为Mr.Doob,项目地址为https://github.com/mrdoob/three.js/本教程对three.js进行零基础的讲解,其一是为了巩固以前所学的知识,其二为更多刚刚学习three.js的同学打下坚实的基础.

前言

当初我也是首先学习的three.js框架才学习的Webgl等有关三维的知识,经验告诉我这也是一种不错的学习捷径,不仅编程是这样,学习一种知识首先要做出一些东西来,慢慢的去研究才会学得有动力,就像幼儿园一样,只要我们知道1+1=2就可以了,至于为什么等于2那就是以后的事情了,等你学习three.js做出东西来,再去了解原理,这样才有动力和信心. Three.js是众多WebGL三维引擎框架其中之一，如果你从事网页设计，你可以把three.js与前端框架Jquery对比，都是对底层的封装，编程语言都是脚本语言Javascript；如果你对图形学非常了解，使用过 OpenGL或OpenGL ES标准在相应的平台上开发3D产品，你很容易明白WebGL是运行在浏览器端的标准，three.js是对WebGL API和运行在GPU上的着色器语言GLSL ES的封装，通过封装降低开发门槛，尤其不了解图形学的前端 工程师。

用three.js做出的案例

用three.js做出的案例 地址:http://wow.techbrood.com/fiddle/37131?vm=full

准备

  • 代码下载:地址:https://github.com/mrdoob/three.js/
    • 下载方法:
    • 下载方法
  • three.js帮助文档:http://techbrood.com/threejs/docs/
  • 编写调试工具:Webstorm
  • 学习基础要求:学习过html+CSS+javascript三剑客

代码目录结构

目录结构 1.Build目录:包含三个文件three.js,three.min.js和three.module.js. three.js-他是最有用的,我们开发用到的未压缩版本, three.min.js-是压缩版 three.module.js-模块化版本 2.docs目录:里面是帮助文档, 3.editor目录:可视化编辑器,用于创建三维场景 4.examples目录:案例 5.src目录:源代码目录，里面是所有源代码。 6.test目录:一些测试代码,基本用不到 7.utils目录：存放一些脚本，python文件的工具目录。例如将3D-Max格式的模型转换为three.js特有的json模型。

配置开发环境和调试

  1. 浏览器:建议Chrome、FireFox
  2. 编辑器:Webstorm,HBuilder
  3. 调试安装是否成功
    1. 调试 引入three.js和引入其他框架一样在script标签中引入即可.

    2. 成功 为了验证Threejs确实引入成功，我们用Chrome浏览器打开上面的那个网页，浏览器里面什么都没有，这时按F12键，打开调试窗口，并在Console下输入 THREE.REVISION命令，得到89dev，这表示现在使用的three.js文件的版本是89。

参考文献:

1.郭隆邦_技术博客:http://www.yanhuangxueyuan.com/Three.js_course.html 2.three.js中文文档:http://techbrood.com/threejs/docs/ 3.webgl中文网:http://www.hewebgl.com/

作者

作者: 孟庆岳

官网: 百度搜索(shmily科技)

CSDN博客:http://blog.csdn.net/qq_27118895