《three.js开发指南》笔记

3D对象基类THREE.Object3D。
第2章使用构建Three.js场景的基础 2.1创建场景

.add(obj:Object); 在场景中添加对象
.remove(obj:Object); 在场景冲移除对象
.children(); 获取该场景所有对象数组；
.getChildByName(name:String); 通过name属性获得子对象；
.traverse(function); function(e:child)便利子对象；
.fog 添加雾化效果；
.overrideMaterial 统一重置材质；

2.2使用几何和网格对象（THREE.Geometry(几何)、THREE.Material（材质）、THREE.Mesh）（网格对象））
几何基类：THREE.Geometry;
.vertices 顶点数组
.faces 面数组
.verticesNeedUpdate
.mergeVertices()
.computeFaceNormals()
.clone() 克隆

THREE.SceneUtils
2.3选择合适的相机
相机基类：THREE.Camera
透视相机：THREE.PerspectiverCamera(fov?,aspect?,near?,far?)
距离相机越远，被渲染得越小。
正投影相机：THREE.OrthographicCamera(left,right,top,bottom,near,far)
以相同的尺寸渲染所有对象，而且不考虑对象与相机之间的距离。

第3章使用Three.js里的各种光源 3.1Three.js中的光源有：
AmbientLight(环境光)、PointLight(点光源)、SpotLight(聚关灯光源)、DirectionalLight(方向光)、HemisphereLight(半球光)、AreaLight(面光源)、LensFlare(镜头炫光).
3.2学习各种基础光源
3.2.1 THREE.AmbientLight
AmbientLight光源的特点：AmbientLight光源的颜色会影响整个场景。AmbientLight的光线没有特定的来源，而且这个光源也不会影响阴影的生成。不能把AmbientLight作为场景中唯一的光源。在使用其它光源的同时使用AmbientLight，目的是弱化阴影或者添加一些颜色。
例：var amientLIght=new THREE.AmbientLight(ambientLightColor?:THREE.Color);
scene.add(ambientLight);
3.2.2 THREE.PointLight
PointLight是一种单点发光，照射所有方向的光源。不生成阴影。

属性	赋值	描述
color(颜色)	THREE.Color	光源颜色
intensity(强度)	float	光源强度。默认值是1
distance(距离)	float	光源照射的距离
position(位置)	THREE.Vector3	光源所在的位置
visible(是否可见)	boolean	true，该光源打开；false,该光源关闭。

3.2.3 THREE.SpotLight
SpotLight具有锥形效果的光源。

var spotLight=new THREE.SpotLight(color,intensity?,distance?,angle?,expoent?)

属性	赋值	描述
castShaow(是否投影)	boolean	默认值：false。true,可以生成阴影。
shadowCameraNear(投影近点)	float	默认值：500。从距离光源的哪一点开始可以生成阴影。
shadowCameraFar(投影远点)	float	默认值：4000。到距离光源的哪一点结束生成阴影。
shadowCameraFov(投影现场)	float	默认值：30。用于生成阴影的视场有多大。
shadowBias(阴影偏移)		默认值：0。用于偏置阴影的位置。
shadowCameraVisible(投影方式是否可见)	boolean	默认值：false。true，可以看到光源在哪里以及如何生成阴影。
shadowDrakness(阴影暗渡)	float	默认值：0.5。定义渲染的阴影有多黑。场景渲染之后不能修改。
shadowMapWidth(阴影映射宽度)	float	默认值：512。决定有多少像素用来生成阴影。如果阴影的边缘参差不齐或者看上去不那么平滑，可以增加这个值。场景渲染以后不能修改。
shadowMapHeight(阴影映射高度)	float	默认值：512。决定有多少像素用来生成阴影。如果阴影的边缘参差不齐或者看上去不那么平滑，可以增加这个值。场景渲染以后不能修改。
distance(光线长度)	float	默认值：0(光线无衰减)。从灯光的position位置,开始衰减,衰减到distance的长度。
angle(圆锥角度)	float（弧度）	默认值：Math.PI/3。光源射出的光柱有多宽。
target(目标点，圆锥圆心上的点)	THREE.Object3D	决定光照的方向。obj3D.position
exponent(光照衰减指数)		默认值：10。光照强度衰减系数。
onlyShadow()	boolean	默认值：false。true,只生成阴影，不添加任何光照。

3.2.4 THREE.DirectionalLight -模拟远处太阳的光源
DirectionalLight特点：被光照亮的整儿区域接收到的光强是一样的。 var directionalLight=new THREE.DirectionalLight(THREE.Color)

属性	赋值	描述
shadowCameraLeft	int	默认值：-500。相机左侧距离，不计算在范围之外的物体的阴影
shadowCameraRight	int	默认值：500。相机右侧距离，不计算在范围之外的物体的阴影
shadowCameraTop	int	默认值：-500。相机上侧距离，不计算在范围之外的物体的阴影
shadowCameraBottom	int	默认值：500。相机下侧距离，不计算在范围之外的物体的阴影

3.2.5特殊光源 3.2.5.1 THREE.HemisphereLight (半球光光源)
HemisphereLight包含一个上方光线和地面光线。
var hemisphereLight=new HemisphereLight(color,groundColor,intensity)

3.2.5.2 HTREE.AreaLight(平面光光源)
AreaLight额外引入js、额外延时渲染WebGLDeferredRenderer（WebGL的延迟渲染器）。
3.2.5.3 THREE.LensFlare *眩光 var lensFlare=new THREE.LensFlare(texture?,size?,distance?,blending?,color?)

属性	赋值	描述
texture		纹理材质。决定眩光的样子。
size		大小。-1为原始大小。
distance
blending		材质融合类型。
color		眩光的颜色

第4章使用three.js的材质
4.1材质共有属性：基础属性，融合属性，高级属性。

基础属性：

属性	赋值	描述
uuid		材质唯一ID
name		材质名称
opacity		材质透明度，(0.0 ,1.0)只有在 transparent = true 才使用。透明是渲染像素时，待渲染值与已存在值共同作用计算出渲染后像素值，达到混合的效果
transparent		是否支持材质透明
overdraw		当三角面之间产生间距,发生图形走样时。填充像素,确保图形保真,消除走样.通常取值范围在0.0=1.0之间
visible		是否可见
side		材质的单双面。THREE.FrontSide 材质只附着正面；THREE.BackSide 材质只附着背面；THREE.DoubleSide 模型双面都附着材质；
needsUpdate		当设置为true时,标记材质已经更新.

融合属性：

属性	赋值	描述
blending		默认值：THREE.SrcAlphaFactor。材质混合方式;
blendsrc		默认值：THREE.SrcAlphaFactor。混合颜色的源颜色因子
blenddst		默认值：THREE.OneMinusSrcAlphaFactor。混合颜色的目标颜色因子
blendEquation		默认值：THREE.AddEquation 相加。混合方程式

高级属性：

属性	赋值	描述
depthTest		深度测试,默认为true,如果设置为false,在场景中远处的对象不被近处的对象遮挡
depthWrite		允许或禁止向深度缓冲区写入数据,默认为true,指定是否允许向深度缓冲区写入数据
polygonOffset、 polygonOffsetFactor、 polygonOffsetUnits		多边形位移,当两个面共面时,会出现十分难看的z - fighting 问题。多边形位移因子。多边形位移单位。
alphaTest		alpha测试,取值范围0.0-1.0

4.2.1简单的材质THREE.MeshBasicMaterial
MeshBasicMaterial不受光照影响。

属性	赋值	描述
color	THREE.Color	颜色
wireframe	boolean	是否以线框方式渲染几何体
wireframeLinewidth	float	线框宽度
wireframeLinecap	string	线框端点类型，参照LineBasicMaterial的定义
wireframeLinejoin	string	线框连接类型，参照LineBasicMaterial的定义
shading	number	着色方式 THREE.SmoothShading平滑着色：用多种颜色进行绘制每个顶点都是单独进行处理的，各顶点和各图元之间采用均匀插值。
vertexColors	number	顶点颜色
fog		雾化

4.2.2基于深度着色的THREE.MeshDepthMaterial
MeshDepthMaterial外观由物体到相机的距离决定。该材质的颜色由默认属性设定。

属性	赋值	描述
wireframe
wireframeLinewidth

4.2.3联合材质
示例：

   
   
var cubeSize = Math.ceil(3 + (Math.random() * 3));
    
    
var cubeGeometry = new THREE.CubeGeometry(cubeSize, cubeSize, cubeSize);

    
    
var cubeSize = Math.ceil(3 + (Math.random() * 3));

    
    //var cubeMaterial = new THREE.MeshLambertMaterial({color: Math.random() * 0xffffff });
    
    
var cubeMaterial = new THREE.MeshDepthMaterial();

    
    
var colorMaterial = new THREE.MeshBasicMaterial({color: 0x00ff00, transparent: true, blending: THREE.MultiplyBlending})

    
    
var cube = new THREE.SceneUtils.createMultiMaterialObject(cubeGeometry, [colorMaterial, cubeMaterial]);

    
    
cube.children[1].scale.set(0.99, 0.99, 0.99);//防止同网格引起闪烁。

设置transparent=true，three.js会检测blending属性，并进行融合。

4.2.4THREE.MeshNormalMaterial
MeshNormalMaterial网格上每个面渲染的颜色由该面向外的法向量决定。

4.2.5 THREE.MeshFaceMaterial 面材质数组。
示例：

   
   
var mats = [];
    
    mats.push(new THREE.MeshBasicMaterial({ color: 0x009e60 }));
    
    mats.push(new THREE.MeshBasicMaterial({ color: 0x0051ba }));
    
    mats.push(new THREE.MeshBasicMaterial({ color: 0xffd500 })); 
    
    mats.push(new THREE.MeshBasicMaterial({ color: 0xff5800 }));
    
    mats.push(new THREE.MeshBasicMaterial({ color: 0xC41E3A }));
    
    mats.push(new THREE.MeshBasicMaterial({ color: 0xffffff }));
    
    var faceMaterial = new THREE.MeshFaceMaterial(mats);

4.3.1 用于暗淡、不光亮表面的THREE.MeshLambertMaterial
MeshLambertMaterial用来创建看上去暗淡的并不光亮的表面。可以对场景中的光照产生反应。

属性	赋值	描述
ambilent	THREE.Color	默认值为白色。这是该材质的环境光。该颜色会与AmbientLight光源的颜色相乘。
emissive	THREE.Color	默认值为黑色。这是该材质发射的颜色。它其实不像一个光源，只是一种纯粹的、不受其它光照影响的颜色

4.3.2用于光亮表面的THREE.MeshPhongMaterial
MeshPhongMaterial可以创建一种光亮的材质。比MeshLambertMaterial多了属性。

属性	赋值	描述
specular	THREE.Color	默认是灰色的，0x111111. 高光色比如设置为漫射颜色,亮度加大,材质更像金属, 设成灰色,使材质更像塑料.
shininess	number	指定高亮部分的亮度。

4.3.3用THREE.ShaderMaterial创建着色器？

属性	赋值	描述
wireframe	THREE.Color	默认值：false。是否渲染成线框。
wireframeLineWidth	THREE.Color	在wireframe=true时，该属性定义线框中线宽度。

shading	number	着色方式 THREE.SmoothShading平滑着色：用多种颜色进行绘制每个顶点都是单独进行处理的，各顶点和各图元之间采用均匀插值。
vertexColors	number	顶点颜色
fog		雾化
fragmentShader	string	自定义片段着色器
vertexShader	string	自定义顶点着色器
uniforms	*	用户自定义uniforms变量
defines	*	用户自定义defines变量
attributes	*	用户自定义attributes变量
lights	boolean	是否使用场景内的灯光，默认关闭

第5章认识和使用几何体常用几何体：THREE.PlaneGeometry（平面）/THREE.CircleGeometry（圆形）/THREE.ShapeGeometry（塑形）/THREE.CubeGeometry（立方体）/THREE.SphereGeometry（球体）/THREE.CylinderGeometry（圆柱）/THREE.TorusGeometry（圆环）/THREE.TorusKnotGeometry（环面纽扣）/THREE.PolyhedronGeometry（多面体）。多面体：THREE.IcosahedronGeometry（二十面体）/THREE.OctahedronGeometry（八面体）/THREE.TetraHedronGeometry（四面体）
思考参数。
第6章使用高级几何体和二元操作 6.1ConvexGeometry(凸包):凸包就是包围一组点的最小图形。
var convexGeometry=new THREE.ConvexGeometry(points)
6.2LatheGeometry:光滑的曲线绕z轴旋转一定角度形成的图形。
var latheGeometry=new THREE.LatheGeometry(points,segments?,startAngle？,endAngle？)
6.3通过拉伸创建几何体
6.3.1ExtrudeGeometry:拉伸几何体。options属性。
var extrudeGeometry=new THREE.ExtrudeGeometry(shapes,options)
6.3.2TubeGeometry：管状几何体
var tubeGeometry=new THREE.TubeGeometry(path,segments=64,radius=1,radiusSegments=8,closed=false)
6.3.3使用svg转化js，再利用extrudeGeometry进行拉伸
6.3.4ParametricGeometry
var parametricGeometry=new THREE.PatamtricGeometr(func(u,v),slices,stacks)
6.4创建三维文本
6.4.1THREE.TextGeometry。options属性
var textGeometry=new THREE.TextGeometry(text,options)
6.4.2自定义字体
6.5使用二元操作组合网格，substract（相减）/intersect（联合）/union（相交）

   
   
加入合并库
    
    <script type='text/javascript'
    
     src='.../coffee-script.js'></script>
    
    <script type='text/coffeescript'
    
     src='.../ThreeBSP.coffee'></script>

7 粒子和粒子系统
THREE.Particle与THREE.Mesh一样，也是THREE.Object3D对象的扩展。

    
    

 THREE.ParticleBasicMaterial


     
      * color: <hex>,默认值:0xFFFFFF。ParticleSystem对象中所有粒子的颜色。如果vertexColors属性值为true,而且指定了几何体的colors属性，则忽略该属性。
     
      * map: new THREE.Texture( <Image> ),粒子材质。
     
      * size: <float>,默认值：1。粒子大小。
     
      * sizeAnnutation：<bool> 默认值：true。false,所有粒子相同尺寸；true，粒子大小受相机距离影响。
     
      * vetexColors:<bool>,默认值：fasle。是否应用colors中的颜色
     
      * opacity:<float>,默认值：1。透明度。
     
      * transparent:<bool>,默认值：false。true,根据opacity属性确定透明度。
     
      * blending: THREE.NormalBlending,渲染粒子融合模式。
     
      * fog: <bool> 默认值：true。粒子是否受场景的雾化效果。

    
    
 THREE.ParticleCanvasMaterial
     
      * color:<hex>,粒子的颜色。根据特定的融合模式，影响画布的颜色
     
      * program:<function>,以画布上下文为参数，渲染粒子形态的函数。
     
      * opacity:<float>，透明度
     
      * transparent:<bool>，是否应用透明度
     
      * blending:<>，融合模式。

     
     
 THREE.SpriteMaterial
      
       * color: <hex>,粒子的颜色。根据特定的融合模式，影响画布的颜色
      
       * opacity: <float>,透明度
      
       * map: new THREE.Texture( <Image> ),纹理图
      
       *
      
       * blending: THREE.NormalBlending,渲染粒子融合模式。
      
       * depthTest: <bool>,
      
       * depthWrite: <bool>,
      
       *
      
       * useScreenCoordinates: <bool>,是否为绝对坐标
      
       * sizeAttenuation: <bool>,
      
       * scaleByViewport: <bool>,
      
       * alignment: THREE.SpriteAlignment.center,
      
       *
      
       *uvOffset: new THREE.Vector2(),uv偏移量比率，0-1
      
       *uvScale: new THREE.Vector2(),uv大小比率，0-1

当用CanvasRenderer渲染器时，粒子可以直接添加到场景中。

    
    
var material = new THREE.ParticleBasicMaterial();
     
     for (var x = -5; x < 5; x++) {
     
      for (var y = -5; y < 5; y++) {
     
      var particle = new THREE.Particle(material);
     
      particle.position.set(x * 10, y * 10, 0);
     
      scene.add(particle);
     
     
     
      }
     
     }

用WebGLRenderer渲染器时，需要先创建一个THREE.ParticleSystem对象，并使用该对象创建粒子。

   
   
var geom = new THREE.Geometry();
    
    var material = new THREE.ParticleBasicMaterial({size: 4, vertexColors: true, color: 0xffffff});
    
    
    
    for (var x = -5; x < 5; x++) {
    
     for (var y = -5; y < 5; y++) {
    
     var particle = new THREE.Vector3(x * 10, y * 10, 0);
    
     geom.vertices.push(particle);
    
     geom.colors.push(new THREE.Color(Math.random() * 0x00ffff));
    
     }
    
    }
    
    
    
    var system = new THREE.ParticleSystem(geom, material);
    
    scene.add(system);

秒客网

《three.js开发指南》笔记

相关文章

《three.js开发指南》 笔记

相关文章

《three.js开发指南》笔记