最近开始学习three.js来做一些3D效果,对于学习过程中的一些知识点做必要的记录,方便后续查阅参考。
three.js :JavaScript 3D库,更简单、更轻量级。这个库提供了<canvas>、<svg> 、CSS3D和WebGL渲染器。
构建场景的基本组件
相机、光源、物体
场景相关函数/属性
add(object)
children
getChildByName(name)
remove(object)
traverse(function)
fog
overrideMaterial
使用几何体和网格
TODO
选择合适的相机
TODO
光源
AmbientLight:环境光,它的颜色会添加到整个场景和所有对象的当前颜色上
PointLight:点光源:空间中的一点,朝所有的方向发射光线
SpotLight:聚光灯光源,类似台灯、手电筒
DirectionLight:方向光,也称作无限光。从这种光源发出的光线可以认为是平行的。例如太阳光
HemisphereLight:半球光,用来创建更加自然的室外光线,模拟反光面和光线微弱的天空。
AreaLight:面光源
LensFlare:镜头炫光,这不是一种光源,但是通过它可以为场景中的光源增加炫光效果
材质
Three.js中有一个材质基类:THREE.Material,这个基类列出了材质的共有属性,主要分为三类:
基础属性:这些属性是最常用到的。用来控制物体的透明度、是否可见或如何引用物体
融合属性:每个物体都有一系列的融合属性,这些属性决定物体如何与背景融合
高级属性:有一些高级属性可以控制底层WebGL上下文渲染物体的方法。
基础属性
ID:用来标识材质,在创建时赋值
name:赋予材质名称
opacity:透明度,取值范围0~1
transparent:如果设置为true,Three.js根据opacity来渲染物体。如果false,这个物体就不透明。
overdraw:过渡描绘。如果用THREE.CanvasRenderer对象,多边形渲染会偏大。有缝隙时,将该值设置为true
visible:是否可见
side:侧面。通过这个属性,可以决定在几何体的哪一面应用这个材质。默认值是THREE.FrontSide。(BackSide,DoubleSide)
needsUpdate:是否刷新。如果设为true,Three.js就会使用新的材质属性刷新它的缓存
融合属性
blending:融合。一般是NormalBlending,在这种模式下,只显示材质的上层
blendsrc:融合源,除了使用标准融合模式之外,还可以创建自定义的融合模式。该属性指定物体如何跟背景相融合,默认值是SrcAlphaFactor,即使用alpha透明度通道进行融合
blenddst:默认值OneMinusSrcAlphaFactor。含义是:目标也使用源的alpha通道进行融合,只是用的值是1
blendingequation:融合公式,指定如何使用blendsrc和blenddst的值。默认是addEquation,即将两个颜色值相加。
MeshBasicMaterial:网格基础材质
不考虑光照的影响,使用这种材质的网格会被渲染成一些简单的平面多边形
MeshDepthMaterial:网格深度材质
使用这种材质的物体,其外观不是由光照或某个材质属性决定的;而是由物体到相机的距离决定的。
MethNormalMaterial:网格法向材质
MeshFaceMaterial:网格面材质
MeshLambertMaterial:网格郎伯材质
MeshPhongMaterial:网格Phong式材质
ShaderMaterial:着色器材质
LineBasicMaterial:直线基础材质
LineDashedMaterial:虚线材质
注:可以为一个几何体赋予多种材质。这样做会复制几何体,从而创建出多个网格。
几何体
二维
PlaneGeometry:平面
CircleGeometry:圆形
ShapeGeometry:塑形
三维
CubeGeometry:立方体
SphereGeometry:球体
CylinderGeometry:圆柱
TorusGeometry:圆环(甜甜圈)
TorusKnotGeometry:环面纠结(麻花)
PolyhedronGeometry:多面体,传入顶点、面、半径和detail参数
多面体可以使用几个开箱即用的:
IcosahedronGeometry:二十面体
OctahedronGeometry:八面体
TetrahedronGeometry:四面体
高级几何体
ConvexGeometry:凸面体
TODO