WebGl/Thress.js初步认知

====== 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根目录 =====

![YC_FOGYMMKNCG)EQDZO]2TL.png](http://upload-images.jianshu.io/upload_images/6868890-54b3c289d8391da4.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

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页面中

![PBQDGD@L9{XAG6N2R854WO.png

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

4)@8$WPOZ}G@K2L@OG25M88.png

====== 学习笔记 ======
===== 一些教程网站 =====
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中

1.png

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

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

2.png

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

3.png

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

4.png

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

THREE.Light ( hex )

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

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

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

5.png

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

6.png

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

7.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,711评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,079评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,194评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,089评论 1 286
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,197评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,306评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,338评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,119评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,541评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,846评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,014评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,694评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,322评论 3 318
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,026评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,257评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,863评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,895评论 2 351

推荐阅读更多精彩内容

  • Threejs中文文档 郭隆邦技术博客 2018-09-21 20:40:17 关注 Three.js中文文档 今...
    情人波阅读 14,001评论 0 7
  • 1、简介 WebGL 是在浏览器中实现三维效果的一套规范,而 Three.js 可以看成是浏览器对 WebGL 规...
    风之化身呀阅读 3,493评论 0 4
  • Threejs 为什么? webGL太难用,太复杂! 但是现代浏览器都支持 WebGL 这样我们就不必使用 Fla...
    强某某阅读 6,022评论 1 21
  • 1.重用Material和Geometry 2.不在render()中实例化或是赋值操作 3.粒子系统代替粒子 4...
    bbh123阅读 4,612评论 1 3
  • 最近在研究三维可视化发现了一堆奇怪的问题我好菜啊我怎么这么菜记录一下过程和一些坑 Three.js官网:https...
    saint37阅读 12,772评论 8 11