three.js教程

three.js(0)

扫码领红包

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

(1)

本文由 weshmily科技 作者:shmily站长 发表,转载请注明来源!

关键词:, ,
扫码领红包

热评文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注