《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. 
    
    
  2. 
var cubeGeometry = new THREE.CubeGeometry(cubeSize, cubeSize, cubeSize);

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

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

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

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

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

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

            4.2.4THREE.MeshNormalMaterial
    MeshNormalMaterial网格上每个面渲染的颜色由该面向外的法向量决定。
            4.2.5 THREE.MeshFaceMaterial 面材质数组。
             示例：
   
   
    

  1. var mats = [];
    2. 
    
    
  2. mats.push(new THREE.MeshBasicMaterial({ color: 0x009e60 }));
    3. 
    
    
  3. mats.push(new THREE.MeshBasicMaterial({ color: 0x0051ba }));
    4. 
    
    
  4. mats.push(new THREE.MeshBasicMaterial({ color: 0xffd500 })); 
    5. 
    
    
  5. mats.push(new THREE.MeshBasicMaterial({ color: 0xff5800 }));
    6. 
    
    
  6. mats.push(new THREE.MeshBasicMaterial({ color: 0xC41E3A }));
    7. 
    
    
  7. mats.push(new THREE.MeshBasicMaterial({ color: 0xffffff }));
    8. 
    
    
  8. var faceMaterial = new THREE.MeshFaceMaterial(mats);
    9.


            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. 
    
    
  2. <script type='text/javascript'
    3. 
    
    
  3.  src='.../coffee-script.js'></script>
    4. 
    
    
  4. <script type='text/coffeescript'
    5. 
    
    
  5.  src='.../ThreeBSP.coffee'></script>
    6.

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

  1. 
 THREE.ParticleBasicMaterial
    

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

    
    
    

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

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

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

  1. var material = new THREE.ParticleBasicMaterial();
    2. 
     
     
  2. for (var x = -5; x < 5; x++) {
    3. 
     
     
  3.  for (var y = -5; y < 5; y++) {
    4. 
     
     
  4.  var particle = new THREE.Particle(material);
    5. 
     
     
  5.  particle.position.set(x * 10, y * 10, 0);
    6. 
     
     
  6.  scene.add(particle);
    7. 
     
     
    8. 
     
     
  8.  }
    9. 
     
     
  9. }
    10.

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

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


标签：

相关文章