Three.js Example 注解 —— 目录

本文搬自我的Github，https://github.com/555chy/three.js-example-comment，有兴趣的可以一起来完善，这个为Three.js的Demo进行注解的项目

three.js-example-comment

本项目是对 three.js 库中的 examples 进行注释
方便初学者直接从项目入手开始学习three.js

官网地址：https://threejs.org/examples

---

已完成项

• canvas_ascii_effect.html

• canvas_camera_orthographic.html

• canvas_camera_orthographic2.html

• canvas_geometry_cube.html

• canvas_geometry_earth.html

• canvas_geometry_hierarchy.html

• canvas_geometry_panorama.html

• canvas_geometry_panorama_fisheye.html

• canvas_geometry_shapes.html

• canvas_geometry_text.html

• canvas_interactive_cubes.html

• canvas_interactive_cubes_tween.html

• canvas_interactive_particles.html

• canvas_interactive_voxelpainter.html

• canvas_lights_pointlights.html

• canvas_lines.html

• canvas_lines_colors.html

• canvas_lines_colors_2d.html

• canvas_lines_dashed.html

• canvas_lines_sphere.html

• canvas_materials.html

• canvas_materials_normal.html

• canvas_materials_reflection.html

• canvas_materials_video.html

• canvas_particles_floor.html

• canvas_particles_random.html

• canvas_particles_sprites.html

• canvas_particles_waves.html

• canvas_performance.html

• canvas_sandbox.html

• css3d_panorama.html

• css3d_panorama_deviceorientation.html

• css3d_sandbox.html

• css3d_youtube.html

• misc_uv_tests.html

• software_geometry_earth.html

• webgl_geometry_cube.html

• webgl_geometry_convex.html

• webgl_geometries.html

• webgl_materials_grass.html

• webgl_morphtargets.html

• webgl_panorama_cube.html

• webgl_test_memory.html

• webgl_voxels_liquid.html

• CombinedCamera.js

• hilbert2D.js

当前批阅项

• webgl_lights_hemisphere.html

---

知识点

光源

Name	名字	描述
AmbientLight	环境光	这是一种基础光源，它的颜色会添加到整个场景和所有对象的当前颜色上
AmbientLight(color, intensity)
DirectionalLight	方向光	也称作无限光，平行光光源就如同太阳，若在场景中添加了一个平行光，它可以影响场景中的所有物体，而无论平行光光源设置在任何位置。平行光的方向为它的位置指向场景中心。
DirectionalLight(color, intensity)
PointLight	点光源	空间中的一点，朝所有方向发射光线
PointLight(color, intensity, distance, decay)
SpotLight	聚光灯光源	这种光源有聚光效果，类似台灯、天花板上的吊灯、或者手电筒
SpotLight(color, intensity, distance, angle, penumbra, decay)
HemisphereLight	半球光	这是一种特殊的光源，可以用来创建更加自然的室外光线，模拟光线微弱的天空和反光的地面
HemisphereLight(color, groundColor, intensity)
RectAreaLight	面光源	使用这种光源可以指定散发光线的平面，而不是空间中的一点
RectAreaLight (color, intensity, width, height)
LensFlare	镜头眩光	这不是一种光源，而是通过LensFlare为场景中的光源添加眩光效果
LensFlare(texture, size, distance, blending, color)

几何体

Name	名字
PlaneGeometry	平面
CircleGeometry	圆形
ShapeGeometry	塑形
CubeGeometry	立方体
SphereGeometry	球体
CylinderGeometry	圆柱
TorusGeometry	圆环
TorusKnotGeometry	环面纽结
PolyhedronGeometry	多面体
IcosahedronGeometry	二十面体
OctahedronGeometry	八面体
TetraHedronGeometry	四面体
ConvexGeometry	凸面体
LatheGeometry	扫描面
ExtrudeGeometry	拉伸几何
TubeGeometry	管状体
ParametricGeometry	参数几何体
TextGeometry	文本几何体

材质

Name	名字	描述
MeshBasicMaterial	与光照无关，仅根据材质的颜色或贴图来渲染物体
MeshDepthMaterial	根据网格到相机的距离，这种材质决定如何给网格染色
MeshNormalMaterial	这是一种简单的材质，根据物体表面的法向量计算颜色
MeshFaceMaterial	这是一个容器，可以在这个容器里为物体的各个表面指定不同的颜色
MeshLambertMaterial	这种材质会考虑光照的影响，可以用来创建颜色暗淡的、不光亮的物体
MeshStandardMaterial(原 MeshPhongMaterial)	这种材质也会考虑光照的影响，而且可以用来创建光亮的物体
ShaderMaterial	这种材允许使用自定义的着色器程序，直接控制顶点的放置方式，以及像素的着色方式
LineBasicMaterial	这种材质可以用于THREE.Line(直线)几何体，从而创建着色的直线 }
LineDashedMaterial	这种材质跟直线基础材质一样，不过可以用来创建出一种虚线效果
SpriteMaterial	CanvasRenderer下Sprite(点精灵)的材质标准渲染器
SpriteCanvasMaterial	使用canvas渲染器的Sprite(点精灵)的材质
PointsMaterial	WebGLRenderer下的粒子渲染器
} MultiMaterial	使用多种材质渲染同一物体

渲染器

• WebGLRenderer
• CanvasRenderer
• SoftwareRenderer
• CSS3DRenderer

WebGLRenderer、CanvasRenderer、SoftwareRenderer的区别

1. WebGLRenderer: The WebGL renderer displays your beautifully crafted scenes using WebGL.
   
   WebGL渲染器使用WebGL展示制作的场景。
2. CanvasRenderer: The Canvas renderer displays your beautifully crafted scenes not using WebGL, but draws it using the (slower) Canvas 2D Context API.
   Canvas渲染器不使用WebGL展示制作的场景，而使用稍微慢一点的Canvas 2D Context应用程序接口来绘制它。
3. SoftwareRenderer: The SoftwareRenderer is a drop-in renderer for Three.js that can be used on the server and the client, if you need to be GPU independent.
   
   Software渲染器对于Three.js来说是一种退化的渲染器，在不依赖GPU的情况下，它既可以使用在服务器上也可以使用在客户端上。

WebGL需要环境光否则是黑色的，其它两个即使没有环境光也能渲染出材质。
对于粒子系统：CanvasRenderer只能显示THREE.Sprite(原Particle)，WebGLRenderer只能显示THREE.Points(原ParticleSystem)
Sprite和Points都是始终面朝相机的2D图形
WebGLRenderer可以通过computeVertexNormals等函数，使geometry变得光滑(相邻面的夹角不大于45度)，而CanvasRenderer下则无效
AxisHelper(坐标轴)只能在WebGLRenderer下显示，不能在CanvasRenderer下显示
大部分情况下，WebGL、Canvas、Software这三种渲染器理论上可以相互替换。

另外，所使用的图片数据的大小必须是2的阶乘，横竖的像素长度大小必须是32x32，128x128等2的阶乘的形式。

在渲染速度方面，一般来说：WebGL > Canvas > Software。但对于低端设备有可能GPU太渣反而不如CPU渲染快。

参考:

• WebGLRenderer
• CanvasRenderer
• SoftwareRenderer

范例:

• canvas_geometry_earth.html
• software_geometry_earth.html
• webgl_morphnormals.html

mesh.applyMatrix( new THREE.Matrix4().makeScale( x, y, z ) )) 的计算过程

1. THREE.Matrix4().makeScale(x,y,z) =》

{ x, 0, 0, 0 }
{ 0, y, 0, 0 }
{ 0, 0, z, 0 }
{ 0, 0, 0, 1 }

如果调用者本身的matrixWorldNeedsUpdate值为真，那么在函数applyMatrix(matrix)中，改变了matrix值后立刻就更新了position，rotation等属性

但在函数translate(distance,axis)中改变了position等变量（或者直接改变position等属性）后并没有立刻更新matrix值，这时应该手动调用updateMatrix()。

2. 几何对象的原始Matrix(跟side无关) =》

{ 1, 0, 0, 0 }
{ 0, 1, 0, 0 }
{ 0, 0, 1, 0 }
{ 0, 0, 0, 1 }

3. mesh.applyMatrix之后的值为 =》

{ x, 0*xy, 	0*yz,  	0*xyz }
{ 0, y, 	0, 		0	  }
{ 0, 0*x, 	z, 		0	  }
{ 0, 0, 	0, 		1	  }

xyz表示相乘之后的符号位，负号会改变原先的material中的side参数。这是因为这里的0实际上是一个很小非零的值。

4. 原始法向量normalMatrix为 =》

{  1,   0, 	  -0	 }
{ -0,   1, 	   6.123 }
{  0,  -6.123, 1	 }

5. mesh.applyMatrix之后，mesh.normalMatrix的值为 =》

{  x,   	 0*x*z,	  -0*x	 	}
{ -0*xy,   	 y, 	   6.123*y 	}
{  0*x*y*z, -6.123*z,  1*z		}

Error: WebGL: texImage2D: Incurred CPU-side conversion, which is very slow.

Error: WebGL: texImage2D: Chosen format/type incurred an expensive reformat 0x1908/0x1401

Multiplies the current matrix by the one specified through the parameters.

This is very slow because it will try to calculate the inverse of the transform, so avoid it whenever possible.

The equivalent function in OpenGL is glMultMatrix().

通过一个指定的参数乘以当前矩阵，这是非常慢的，因为它会尝试计算逆变换，所以如果可能的话尽量避免使用它

至于 mesh.applyMatrix 中为什么会计算出符号位，还有怎么计算的，这个过程我也还没参透！！！

范例:

• webgl_panorama_cube.html
• webgl_voxels_liquid.html

矩阵变换知识点:
http://www.opengl-tutorial.org/cn/beginners-tutorials/tutorial-3-matrices/

js的apply与call的异同

1. Function.apply(obj,args)方法接收两个参数
   obj：这个对象将代替Function类里this对象
   args：这个是数组，它将作为参数传给Function（args–>arguments）

2. Function.call(obj,[param1[,param2[,…[,paramN]]]])
   obj：这个对象将代替Function类里this对象
   params：这个是一个参数列表

apply方法能劫持另外一个对象的方法，继承另外一个对象的属性。而call和apply的作用是一样的，只不过是一个传的是数组一个传的是参数列表不一样。

Array.prototype.push.apply(a, b)的作用是连接数组，相当于a.concat(b)。
由于concat不用像apply一样去改变数组上下文，所以效率更高

范例:

• hilbert2D.js

json和array的使用场景

如果频繁添加删除，使用json；如果频繁取数据，使用array。

Line与LineSegments的区别

THREE.Line使用WebGL中的gl.LINE_STRIP(一系列的连续直线，即折线)渲染
THREE.LineSegments使用WebGL中的gl.LINES(每一对顶点被解释为一条直线，即线段)渲染

范例:

• canvas_lines.html
• canvas_lines_dashed.html

手机上运行webvr

要么安装个谷歌VR支持插件，要么stereoeffect来代替vreffect

场景的两种雾化效果

1. scene.fog = new THREE.Fog(color, near, far)
   第一个参数是雾化效果或者颜色(0xffffff)，后面两个属性用来调节雾的显示，重什么地方开始到什么地方结束
2. scene.fog = new THREE.Fog(color, concentration)
   第一个参数是雾化效果或者颜色(0xffffff)，第二个参数是雾的浓度(0.015)

setClearColor，字体height就无效了范例:

• webgl_geometry_terrain_fog.html

样条曲线(CatmullRomCurve3)与贝赛尔曲线的区别(CubicBezierCurve、QuadraticBezier)

贝塞尔曲线只会穿过首尾两个控制点而不过中间的控制点，在某些场合希望曲线穿过所有控制点的话可以使用catmull-rom spline（简称CR-Spline）
CR-Spline需要至少4个控制点，首尾两个控制点为辅助点，曲线不会穿过，其余控制点在t=[0,1]之间平滑地穿过，t=0时值等于第2个顶点，而t=1时值等于倒数第2个顶点
如果传入的控制点首尾相等形成闭合环，那么不用计算，直接取值p0=pN-1，pN=p1就会成为一条光滑的曲线了。

范例:

• canvas_lines_dashed.html

超链接标签(a)的rel="noopenper"的作用

它是chrome 49+，Opera 36+的新特性，如果没有这个属性，新页面(钓鱼网站)就可以通过window.opener来访问你的window对象。
打开添加了rel=noopener的链接，window.opener 会为null。也可以使用下面代码打开一个新的页面

var otherWindow = window.open('http://www.baidu.com');
otherWindow.opener = null;
otherWindow.location = url;

正N面体的顶点数，棱数

对于多面体：面数+顶点数=棱数+2(称为欧拉定律)
正十二面体有12个面，每面都是正五边形，各有5条边，每条边被2个面共用，所以一共有12*5/2=30条棱。
这样，顶点就是20个。
例如：
正四面体，每个面3个顶点，共4个顶点，6条棱
正六面体，每个面4个顶点，共8个顶点，12条棱
正八面体，每个面3个顶点，共6个顶点，12条棱
正十二面体，每个面5个顶点，共20个顶点，30条棱

alphaTest的作用

比如：如果一个模型有两层，最终渲染出来结果是前面一层挡住了了后面一层，各位看官可能会觉得挡住就挡住啊，反正看不见，可是当前面一层是带透明度的时候呢，怎么办，这时候计算机会将前面一层模型的像素在缓冲区里取代后面一层模型之前在缓冲区中的缓存，也就是说渲染完这个模型后，计算机记录下来的像素就是前面一层的像素，可是前面一层的像素是带透明度的，那么计算机就会把这个模型的这一部分当成了透明的来处理了。
alphatest直接舍弃颜色值，当透明度小于阈值的时候，直接舍弃透明的颜色，计算机自然不会记录下透明颜色。

来源:
http://blog.csdn.net/lj820348789/article/details/50628887

LOD技术即Levels of Detail的简称，意为多细节层次。LOD技术指根据物体模型的节点在显示环境中所处的位置和重要度，决定物体渲染的资源分配，降低非重要物体的面数和细节度，从而获得高效率的渲染运算。

escape、encodeURI、encodeURIComponent 的区别

escape()除了 ASCII 字母、数字和特定的符号外，对传进来的字符串全部进行转义编码，因此如果想对URL编码，最好不要使用此方法。而encodeURI() 用于编码整个URI,因为URI中的合法字符都不会被编码转换。encodeURIComponent方法在编码单个URIComponent（指请求参 数）应当是最常用的，它可以讲参数中的中文、特殊字符进行转义，而不会影响整个URL。

变量的作用域

在JavaScript中，我们不能为变量定义特定的块作用域，但可以定义其所属的函数域。也就是说，如果变量是在某个函数中定义的，那么它在函数以外的地方是不可见的。而如果该变量是定义在if或者for这样的代码块中的，它在代码块之外是可见的。另外，在JavaScript中，术语"全局变量"指的是声明在所有函数之外的变量，而与之相对的是"局部变量"，所指的则是在某个函数中定义的变量。其中，函数内的代码可以像访问自己的局部变量那样访问全局变量，反之则不行。

来源:
《JavaScript面向对象编程指南》第3章(函数)-3.3(变量的作用域)

---

我的疑惑

CombinedCamera.js中的setLens函数和aspect为什么有关?

canvas_materials_reflection.js中texture.mapping为什么只能用SphericalReflectionMapping，其它碎片噪音哪里来的?

canvas_geometry_shapes.html中WebGLRenderer中的sortElements和sortObjects是怎么用的?

canvas_lines_dashed.html中geometry.computeLineDistances()有什么用？LineDashedMaterial材质不计算

canvas_geometry_text.html一旦删掉setClearColor，字体height就无效了？

canvas_interactive_particles.html中camera.updateMatrixWorld()有什么用？

webgl_voxels_liquid.html 算法没看太懂

webgl_geometry_convex.html 这里只能分别添加内渲染和外渲染的网格，以达到透视的效果。而DoubleSide无法实现透视效果

相关插件

插件	功能
three.js	JavaScript编写的WebGL第三方库，封装了大部分常用的3D显示功能
Detector.js	检测支持(canvas，webgl，workers，fileApi)
UVsDebug.js	通过给定的几何形状，在Canvas中画出其UV纹理贴图
stats.min.js	统计插件(FPS，渲染时间，chrome内存使用率，而且支持自定义)
dat.gui.min.js	参数控制器，可以向场景中添加控制条，随时调整参数
CombinedCamera.js	可以在透视和正交相机上切换，默认为透视相机
Projector.js	将三维的场景投影到二维
CanvasRenderer.js	Canvas 2D Context API 进行渲染
SoftwareRenderer.js	不依赖GPU进行渲染
CSS3DRenderer.js	使用CSS3渲染3D的DOM元素
OrbitControls.js	轨道控制，鼠标左键旋转(与鼠标方向相同，用于非触摸屏上)，右键平移，中键靠近或远离；也可以使用键盘控制
TrackballControls.js	轨迹控制，鼠标左键旋转(与鼠标方向相反，用于触摸屏上)，右键平移，中键靠近或远离；也可以使用键盘控制
DeviceOrientationControls.js	设备朝向控制，仅对移动设备有效。根据设备朝向调整被控制元素朝向
FirstPersonControl.js	支持许多第一人称视角（FPV）游戏玩家所熟悉的用户交互模式
FlyControl.js	支持飞行模拟器式摄像机控制，支持滚动和俯仰
AsciiEffect.js	ASCII文本画渲染效果
Bird.js	鸟的形状
hilbert2D.js	希尔伯特2D曲线
tween.js	对属性的改变，生成平滑的补间动画效果
ConvexGeometry.js	凸几何体

View Examples

相关博客推荐

• three.js 源码注释
• three.js 实例讲解
• WebGl 中文网

范例推荐

• 办公室
  https://hypnosnova.github.io/ThreeQuery/lab/office/office.html
• 室内家装
  https://forreall.cn/3d/app/bgy1/
• 水墨化场景变换
  https://hypnosnova.github.io/ThreeQuery/examples/028%E5%9C%BA%E6%99%AF%E5%88%87%E6%8D%A2%E8%BF%87%E6%B8%A1%E6%95%88%E6%9E%9C.html
• 水滴效果
  https://tympanus.net/Development/RainEffect/index.html
• 纽约地铁系统变成可以弹奏的弦乐器
  http://www.mta.me/
• 水池
  http://madebyevan.com/webgl-water/
• 礼花
  https://www.qcloud.com/community/article/376875
• 相机的移动旋转
  https://www.qcloud.com/community/article/758626001490601259
• 前端常用插件
  https://my.oschina.net/u/3611406/blog/1377345
• 外国的模型交流网站
  sketchfab
• three.js教程
  http://techbrood.com/threejs/docs/
  http://pixijs.download/release/docs/PIXI.WebGLRenderer.html
• 带位移的粒子效果
  http://www.genshuixue.com/i-cxy/p/15682774
• JSDoc是一个根据javascript文件中注释信息，生成JavaScript应用程序或库、模块的API文档 的工具。
  http://www.css88.com/doc/jsdoc/index.html
• 自动寻路
  http://www.webhek.com/post/pathfinding.html
• 显示面框而非三角形框
  http://edg3d.io/embed.php?e=A4HTDSZ3k0XFD2m&p=0&fullscreen=1
• 名词原理介绍
  http://www.twinklingstar.cn/2016/2617/bump-mapping-collection/
• 素材
  http://www.51yuansu.com/?z=qqrwdhmim
• H5游戏在线编辑器
  http://mightyfingers.com/
• 粒子效果
  http://up.qq.com/act/a20170301pre/index.html#g
• 室内装修
  http://www.lavisite.lamaison.grdf.fr/maison
  https://playcanv.as/e/p/44MRmJRU/

Note: 如果GitHub的当前页没有index.html的话，GitHub会按设置好的模板加载README.md