Three.js初识

原创 hmxcn 随笔 Three.js 374阅读 2017-11-29 13:42:03 举报

这是一篇我很早之前写在wiki上的文章
====== WebGl/Thress.js ======
===== 介绍以及下载=====
什么是threejs,很简单,你将它理解成three + js就可以了。three表示3D的意思,js表示javascript的意思。那么合起来,three.js就是使用javascript 来写3D程序的意思。
Three.js的下载地址:https://github.com/mrdoob/three.js
Three.js中文文档:http://www.techbrood.com/threejs/docs
===== Three.js根目录 =====

Three.js初识

Build目录:包含两个文件,three.js 和three.min.js 。这是three.js最终被引用的文件。一个已经压缩,一个没有压缩的js文件。

Docs目录:这里是three.js的帮助文档,里面是各个函数的api,可惜并没有详细的解释。试图用这些文档来学会three.js是不可能的。

Editor目录:一个类似3D-max的简单编辑程序,它能创建一些三维物体。

Examples目录:一些很有趣的例子demo,可惜没有文档介绍。对图像学理解不深入的同学,学习成本非常高。

Src目录:源代码目录,里面是所有源代码。

Test目录:一些测试代码,基本没用。

Utils目录:存放一些脚本,python文件的工具目录。例如将3D-Max格式的模型转换为three.js特有的json模型。

.gitignore文件:git工具的过滤规则文件,没有用。

CONTRIBUTING.md文件:一个怎么报bug,怎么获得帮助的说明文档。

LICENSE文件:版权信息。

README.md文件:介绍three.js的一个文件,里面还包含了各个版本的更新内容列表。
===== Three.js的插件 =====
暂时用了vsCode ,webStorm都没有很好能够自动补全three的插件,等日后找到了再补上
===== 测试当前Three的版本 =====
在html页面中

在Chrome中打开,按F12键,打开调试窗口,并在Console下输入 THREE.REVISION命令,得到73,这表示现在使用的three.js文件的版本是73

Three.js初识

====== 学习笔记 ======
===== 一些教程网站 =====
http://www.hewebgl.com/(初级教程很详细(包含视频,页面,示例文件),但是中高级教程收费
http://www.ituring.com.cn/book/1272(别人推荐还没看过
https://threejs.org/(英文教程,有很多很棒的例子
还有一些很好的入门教学博客,但很多都只有1 2章入门教学,之后再没更新
http://www.cnblogs.com/shawn-xie/archive/2012/08/16/2642553.html
http://blog.csdn.net/acdreamers/article/details/18192955\\

==== 实现要素 ====
1.渲染器(Renderer)
2.摄像机(Camera)
3.场景(Scene)
4.物体
5.光源(Light)
=== 渲染器 ===
渲染器将和Canvas元素进行绑定,并设置渲染器的大小,这样才能将图像现实在绑定的canvas中

Three.js初识

=== 场景 ===
在Three.js中添加的物体都是添加到场景中的,因此它相当于一个大容器。一般说,场景里没有很复杂的操作,在程序最开始的时候进行实例化,然后将物体添加到场景中即可。\\
场景就是一个三维空间。 用 [Scene] 类声明一个叫 [scene] 的对象。

=== 摄像机 ===
首先WebGL和Three.js使用的坐标系是右手坐标系,看起来就是这样的

Three.js初识

相机包含两种:
1.正交相机
2.透视相机
先添加相机,在调整相机的位置,朝向,以及焦点

Three.js初识

最后记得把相机添加到scene中
== 光源 ==
OpenGL(WebGL)的三维空间中,存在点光源和聚光灯两种类型。 而且,作为点光源的一种特例还存在平行光源(无线远光源)。另外,作为光源的参数还可以进行 [环境光] 等设置。 作为对应, Three.js中可以设置 [点光源(Point Light)] [聚光灯(Spot Light)] [平行光源(Direction Light)],和 [环境光(Ambient Light)]。 和OpenGL一样、在一个场景中可以设置多个光源。 基本上,都是环境光和其他几种光源进行组合。 如果不设置环境光,那么光线照射不到的面会变得过于黑暗。 本文中首先按照下面的步骤设置平行光源,在这之后还会追加环境光。

Three.js初识

在Threejs中,光源用Light表示,它是所有光源的基类。它的构造函数是:

THREE.Light ( hex )

它有一个参数hex,接受一个16进制的颜色值。例如要定义一种红色的光源,我们可以这样来定义:

Var redLight = new THREE.Light(0xFF0000);

(0) 声明全局变量(对象)
(1) 设置平行光源
(2) 设置光源向量
(3) 追加光源到场景

Three.js初识

== 事物 ==
创建一个object 函数用来存放事物
这里以一条直线为例子
首先创建一个几何体类
其次定义几何体材质,用于改变几何体的颜色
因为以线为例子,由于几何体本身是由点组成的,所以在选择特定材质之后,定义点的颜色
及是线的颜色。
最后再把事物添加到场景中。

Three.js初识

最后再把场景,摄像机,放到渲染其中。实现3d图像渲染。
renderer.render(scene, camera);

Three.js初识

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复