《three.js开发指南》 笔记

时间:2022-03-12 05:11:00
3D对象基类THREE.Object3D。
第2章 使用构建Three.js场景的基础     2.1创建场景
  1. .add(obj:Object);              在场景中添加对象
  2. .remove(obj:Object);        在场景冲移除对象
  3. .children();                        获取该场景所有对象数组;
  4. .getChildByName(name:String);    通过name属性获得子对象;
  5. .traverse(function);                        function(e:child)便利子对象;
  6. .fog                                                添加雾化效果;
  7. .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联合材质
        示例:
   
   
  1. var cubeSize = Math.ceil(3 + (Math.random() * 3));
  2. var cubeGeometry = new THREE.CubeGeometry(cubeSize, cubeSize, cubeSize);
  3. var cubeSize = Math.ceil(3 + (Math.random() * 3));
  4. //var cubeMaterial = new THREE.MeshLambertMaterial({color: Math.random() * 0xffffff });
  5. var cubeMaterial = new THREE.MeshDepthMaterial();
  6. var colorMaterial = new THREE.MeshBasicMaterial({color: 0x00ff00, transparent: true, blending: THREE.MultiplyBlending})
  7. var cube = new THREE.SceneUtils.createMultiMaterialObject(cubeGeometry, [colorMaterial, cubeMaterial]);
  8. 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 面材质数组。
            示例:
   
   
  1. var mats = [];
  2. mats.push(new THREE.MeshBasicMaterial({ color: 0x009e60 }));
  3. mats.push(new THREE.MeshBasicMaterial({ color: 0x0051ba }));
  4. mats.push(new THREE.MeshBasicMaterial({ color: 0xffd500 }));
  5. mats.push(new THREE.MeshBasicMaterial({ color: 0xff5800 }));
  6. mats.push(new THREE.MeshBasicMaterial({ color: 0xC41E3A }));
  7. mats.push(new THREE.MeshBasicMaterial({ color: 0xffffff }));
  8. 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(相交)
        
   
   
  1. 加入合并库
  2. <script type='text/javascript'
  3. src='.../coffee-script.js'></script>
  4. <script type='text/coffeescript'
  5. src='.../ThreeBSP.coffee'></script>

    7 粒子和粒子系统
        THREE.Particle与THREE.Mesh一样,也是THREE.Object3D对象的扩展。             
    
    
  1. THREE.ParticleBasicMaterial
  2. * color: <hex>,默认值:0xFFFFFFParticleSystem对象中所有粒子的颜色。如果vertexColors属性值为true,而且指定了几何体的colors属性,则忽略该属性。
  3. * map: new THREE.Texture( <Image> ),粒子材质。
  4. * size: <float>,默认值:1。粒子大小。
  5. * sizeAnnutation:<bool> 默认值:truefalse,所有粒子相同尺寸;true,粒子大小受相机距离影响。
  6. * vetexColors:<bool>,默认值:fasle。是否应用colors中的颜色
  7. * opacity:<float>,默认值:1。透明度。
  8. * transparent:<bool>,默认值:falsetrue,根据opacity属性确定透明度。
  9. * blending: THREE.NormalBlending,渲染粒子融合模式。
  10. * fog: <bool> 默认值:true。粒子是否受场景的雾化效果。

    
    
  1.  THREE.ParticleCanvasMaterial
  2. * color:<hex>,粒子的颜色。根据特定的融合模式,影响画布的颜色
  3. * program:<function>,以画布上下文为参数,渲染粒子形态的函数。
  4. * opacity:<float>,透明度
  5. * transparent:<bool>,是否应用透明度
  6. * blending:<>,融合模式。
     
     
  1. THREE.SpriteMaterial
  2. * color: <hex>,粒子的颜色。根据特定的融合模式,影响画布的颜色
  3. * opacity: <float>,透明度
  4. * map: new THREE.Texture( <Image> ),纹理图
  5. *
  6. * blending: THREE.NormalBlending,渲染粒子融合模式。
  7. * depthTest: <bool>,
  8. * depthWrite: <bool>,
  9. *
  10. * useScreenCoordinates: <bool>,是否为绝对坐标
  11. * sizeAttenuation: <bool>,
  12. * scaleByViewport: <bool>,
  13. * alignment: THREE.SpriteAlignment.center,
  14. *
  15. *uvOffset: new THREE.Vector2(),uv偏移量比率,0-1
  16. *uvScale: new THREE.Vector2(),uv大小比率,0-1

         当用CanvasRenderer渲染器时,粒子可以直接添加到场景中。
    
    
  1. var material = new THREE.ParticleBasicMaterial();
  2. for (var x = -5; x < 5; x++) {
  3. for (var y = -5; y < 5; y++) {
  4. var particle = new THREE.Particle(material);
  5. particle.position.set(x * 10, y * 10, 0);
  6. scene.add(particle);
  7. }
  8. }

        用WebGLRenderer渲染器时,需要先创建一个THREE.ParticleSystem对象,并使用该对象创建粒子。
   
   
  1. var geom = new THREE.Geometry();
  2. var material = new THREE.ParticleBasicMaterial({size: 4, vertexColors: true, color: 0xffffff});
  3. for (var x = -5; x < 5; x++) {
  4. for (var y = -5; y < 5; y++) {
  5. var particle = new THREE.Vector3(x * 10, y * 10, 0);
  6. geom.vertices.push(particle);
  7. geom.colors.push(new THREE.Color(Math.random() * 0x00ffff));
  8. }
  9. }
  10. var system = new THREE.ParticleSystem(geom, material);
  11. scene.add(system);