Three学习笔记-1

Threejs

Stats–性能监视器

new Stats();性能监视器，性能测试的方法，引入 Stats.js 。
stats.setMode(1);参数为0的时候，表示显示的是FPS界面，参数为1的时候，表示显示的是MS界面。
Stats的begin和end 函数本质上是在统计代码执行的时间和帧数，然后用公式fps=帧数/时间，就能够得到FPS。
MS表示渲染一帧需要的毫秒数，这个数字是越小越好。再次点击又可以回到FPS视图中。
stats.domElement.style.position = ‘absolute’;stats的domElement表示绘制的目的地（DOM）
stats.domElement.style.left = ‘0px’
document.body.appendChild( stats.domElement );
stats.begin();代码前调用begin，代码执行后调用end()，能够统计出这段代码执行的平均帧数。
stats.end();
stats.update();

renderer–声明渲染器

new THREE.WebGLRenderer（）；
new THREE.WebGLDeferredRenderer();处理复杂光的延迟渲染器
new THREE.CanvasRenderer();
new THREE.WebGLDeferredRenderer({
            width: window.innerWidth,
            height: window.innerHeight,
            scale: 1,
            antialias: true,
            tonemapping: THREE.FilmicOperator,
            brightness: 2.5
        });

 renderer.setSize(width, height);设置渲染器的大小为窗口的内宽度，也就是内容区的宽度  .                                                                 
 renderer.setClearColor(0xFFFFFF,1.0);                                                                                       
 renderer.shadowMapEnabled = true;允许阴影射                                                                
 renderer.render( scene, camera, renderTarget, forceClear )，
 renderTarget：渲染的目标，默认是渲染到前面定义的render变量中forceClear
 每次绘制之前都将画布的内容给清除，即使自动清除标志autoClear为false，也会清除。                                                             
 requestAnimationFrame(render);循环渲染                                                                  

camera–照相机

 new THREE.PerspectiveCamera( fov, aspect, near, far );

camera.fov=45，类似于物体和camera的距离，值越小物体越近就越大，aspect实际窗口的纵横比，near不要设置为负值
声明透视相机

声明正交相机，定义一个视景体

    new THREE.OrthographicCamera( left, right, top, bottom, near, far );                                                                                
    camera.position= new THREE.Vector3(0,0,0); 
    camera.position.x=0；
    camera的xyz坐标位置                                                                        
    camera.up = new THREE.Vector3(0,1,0);        
    camera.up.x = 0;
    camera的坐标系，y轴向上，即右手坐标系                                                                        
    camera.lookAt({x : 0, y : 0, z : 0 });
    或者camera.lookAt(scene.position);
    camera面向的位置                                                                        
    camera.updateProjectionMatrix();                         

geometry–几何物体

    new THREE.Geometry();        声明几何物体.                                                                        
    new THREE.PlaneGeometry( 500, 300, 1, 1 );     平面的四边形        
    new THREE.CircleGeometry(radius,segments,thetastarts,thetalength)平面圆
    new THREE.RingGeometry;     用来在三维空间内创建一个二维圆环面对象
    new THREE.ShapeGeometry();     平面塑形                
    new THREE.Shape();    使用ShapeGeometry定制图形，必须使用shape的绘制函数

Shape对象注意与ShapGeometry对象的区别的绘图函数

THREE.BoxGeometry=function(width,height,depth,widthSegments,heightSegments, depthSegments)  立方体
    widthSegments：宽度分段份数
    heightSegments：高度分段份数
    depthSegments：长度分段份数  

new THREE.SphereGeometry(4, 20, 20);  圆      

new THREE.CylinderGeometry( radiusTop, radiusBottom, height, radiusSegments, heightSegments, openEnded, thetaStart, thetaLength)   声明圆柱体        

new THREE.ConvexGeometry（）.凸面体
new THREE.IcosahedronGeometry（）正20面体
new THREE.DodecahedronGeometry（）
new THREE.LatheGeometry（）扫描体
new THREE.OctahedronGeometry（）正八面体
new THREE.ParametricGeometry(THREE.ParametricGeometries.mobius3d, 20, 10)
new THREE.TorusKnotGeometry（）环面纽结,可以画万花筒或者花
new THREE.TetrahedronGeometry（）正四面体,锥形
new THREE.TorusGeometry(3, 1, 10, 10)  圆环        
new THREE.TubeGeometry(3, 1, 10, 10)  管状几何体
new THREE.ExtrudeGeometry(3, 1, 10, 10)   拉伸几何体        
new THREE.ParamtericGeometry(3, 1, 10, 10)  创建几何体        

new THREE.CubeGeometry(width, height, depth, segmentsWidth, segmentsHeight, segmentsDepth, materials, sides)

    new THREETextGeometry(3, 1, 10, 10)        文字几何体
    geometry.clone()
    geometry.vertices=vertices;
    geometry.faces=faces;        
    geometry.computeCentroids();
    geometry.mergeVertices();                                                                          
    geometry.vertices[0].uv = new THREE.Vector2(0,0);                                                                                        
    geometry.receiveShadow = true;接受并且显示阴影                                                                        
    geometry.castShadow = true;投射阴影                                                                        
    geometry.vertices.push(new THREE.Vector3(  100, 0, -100 ))，在几何物体中加入一个点，几何体里面有一个vertices变量，可以用来存放点。
    geometry.geometry.parameters.height；某物体的参数，高度                                        
    geometry.colors.push（color1,color2）        
    geometry.geometry.parameters.widthSegments;        
    geometry.geometry.parameters.heightSegments;

color :

  new THREE.Color( 0x444444 );        声明颜色变量        

material :

  new THREE.MeshLambertMaterial( { color:0xFFFFFF} );        

兰伯特材质。在没有light的情况下，任何颜色的material都是黑色的。Lambert材质表面会在所有方向上均匀地散射灯光，这就会使颜色看上去比较均匀。Lambert材质会受环境光的影响，呈现环境光的颜色，与材质本身颜色关系不大。物体在环境光影响下，最终表现出来的颜色的向量值，应该是环境光颜色向量和物体本身颜色向量的向量积。在渲染程序中，它是表面各可视属性的结合，这些可视属性是指表面的色彩、纹理、光滑度、透明度、反射率、折射率、发光度等。

  new THREE.LineBasicMaterial( parameters );

Parameters： 是一个定义材质外观的对象，它包含多个属性来定义材质。这些属性是：
Color：线条的颜色，用16进制来表示，默认的颜色是白色。
Linewidth：线条的宽度，默认时候1个单位宽度。
Linecap：线条两端的外观，默认是圆角端点，当线条较粗的时候才看得出效果，如果线条很细，那么几乎看不出效果。
Linejoin：两个线条的连接点处的外观，默认是“round”，表示圆角。
VertexColors：定义线条材质是否使用顶点颜色，这是一个boolean值。意思是：线条各部分的颜色会根据顶点的颜色来进行插值。
Fog：定义材质的颜色是否受全局雾效的影响。
定义一种线条的材质

new THREE.LineDashedMaterial( parameters )      

LineDashedMaterial方法 根据参数 parameters 创建线段的虚线线型材质,parameters参数的格式看上面.
LineDashedMaterial对象的功能函数采用
————定义构造的函数原型对象来实现.大部分属性方法继承自材质的基类Material.
————用材质来定义线性,第一次见,真的很有想象力.简直就是对绘图软件的终结.

new THREE.MeshLambertMaterial({map: textureGrass});
new THREE.MeshLambertMaterial({opacity: 0.6, color: 0x44ff44, transparent: true}); 

MeshPhongMaterial方法根据参数parameters创建mesh(网格)的Lambert(兰伯特)材质类型,表面有光泽的材质类型,计算每个像素,
MeshPhongMaterial对象的功能函数采用,定义构造的函数原型对象来实现.大部分属性方法继承自材质的基类Material.

材质容器。可以为几何体的每一个面指定不同的材质。

new THREE.MeshFaceMaterial(mats);

光亮表面的

new THREE.MeshPhongMaterial({color: 0xffffff, specular: 0xffffff, shininess: 200});

基本属性：
color、opacity、shading、blending、depthTest、depthWrite、wireframe、wireframeLineWith、wirefLinecap、wireframeLinejoin、vertexColors、fog。

独特属性：
ambient、emissive
specular：指定该材质的光亮程度及其高光部分的颜色。如果将他设置成跟color属性相同的颜色，将会得到一种更加类似金属的材质。如果设置为灰色，材质将变得更像塑料。
shininess：指定高光部分的亮度。默认是30.

meshMaterial.opacity
meshMaterial.visible
meshMaterial.ambient = new THREE.Color
meshMaterial.emissive = new THREE.Color
meshMaterial.specular = new THREE.Color
meshMaterial.shininess
meshMaterial.side = THREE.FrontSide;
meshMaterial.needsUpdate
meshMaterial.color.setStyle
meshMaterial.metal = e;
meshMaterial.wrapAround = e;
meshMaterial.wrapRGB.x = e;

mesh–网格

new THREE.Mesh( geometry,material);该基础材质不会对场景中的光源产生反应                                                                        

mesh.position(x,y,z)，mesh的xyz坐标位置

支持mesh使用多种材质
THREE.SceneUtils.createMultiMaterialObject(ground,[
     new THREE.MeshBasicMaterial({wireframe: true, overdraw: true, color: 000000}),
     new THREE.MeshBasicMaterial({color: 0x00ff00, transparent: true, opacity: 0.5})
            ]);

Mesh.geometry.vertices=
Mesh.geometry.verticesNeedUpdate=true //告知Three.js顶点需要更新
Mesh.geometry.computeFaceNormals() //重新计算侧面的法线
Mesh.translateX(number)；移动                                                                

tlight–灯光

new THREE.Light ( hex )        hex是一个16进制的颜色值 

看这里

new THREE.THREE.SpotLight( hex, intensity, distance, angle, exponent,visible )        

distance光源可以照多远；
Angle：聚光灯着色的角度，用弧度作为单位，这个角度是和光源的方向形成的角度；
exponent：光源模型中，衰减的一个参数，越大衰减约快。

聚光灯

new THREE.AreaLight(); 区域光                                                                        
new THREE.DirectionaLight(hex, intensity ); 方向光，一组没有衰减的平行的光线，类似太阳光的效果。                                                                        
new THREE.AmbientLight( hex );

hex是一个16进制的颜色值，环境光。

new THREE.PointLight( color, intensity, distance );

Color：光的颜色
Intensity：光的强度，默认是1.0,就是说是100%强度的灯光，
distance：光的距离，从光源所在的位置，经过distance这段距离之后，光的强度将从Intensity衰减为0。 默认情况下，这个值为0.0，表示光源强度不衰减。

点光源

New HemisphereLight（groudColor,color,intensity）半球光
New LensFlare（texture,size,distance,blending,color）镜头炫光                                        
light.position.set(0, 0,300);光源的xyz坐标                                                                        
light.castShadow = true;投射阴影        
light.visible = !e;        移除该光源
Light.color=；可以改变光源的颜色                                                        

在 Three.js 中，能形成阴影的光源只有 THREE.DirectionalLight 与 THREE.SpotLight ；而相对地，能表现阴影效果的材质只有 THREE.LambertMaterial 与 THREE.PhongMaterial 。因而在设置光源和材质的时候，一定要注意这一点。

Scene–场景

new THREE.Scene();声明一个场景                                                                        
scene.add(mesh);                                                                                        
scene.add(light);
scene.remove(lastObject);  溢出某个物体
scene.children.length;   场景内物体的个数        
scene.traverse（function）;  传递过来的function将在每一个object上面执行一次，也可以使用for循环
Scene.getChildByName(name)        
Scene.overrideMaterial=new THREE.MeshBasicMaterial({map:texture});场景中全部物体使用该材质        
Scene.fog=new THREE.Fog(）；添加雾化效果                                                        

Tween–动画

声明

new TWEEN.Tween( mesh.position);  动画引擎实现动画效果

new TWEEN.Tween( mesh.position).to( { x: -400 }, 3000 ).repeat( Infinity ).start();

Tween的任何一个函数返回的都是自身，所以可以用串联的方式直接调用各个函数。

第一个参数是一个集合，里面存放的键值对，键x表示mesh.position的x属性，值-400表示，动画结束的时候需要移动到的位置;
第二个参数，是完成动画需要的时间，这里是3000ms。

repeat( Infinity )表示重复无穷次，也可以接受一个整形数值，例如5次。
TWEEN.update();在渲染函数中去不断的更新Tween，这样才能够让mesh.position.x移动位置

Line–线

new THREE.Line( geometry, material, THREE.LinePieces );

第一个参数是几何体geometry，里面包含了2个顶点和顶点的颜色。
第二个参数是线条的材质，或者是线条的属性，表示线条以哪种方式取色。
第三个参数是一组点的连接方式。

group–组

new THREE.Group();
group.add(sphere); 
group.add(cube);

texture–质地

THREE.Texture(image, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy);       

Image：这是一个图片类型，基本上它有ImageUtils来加载，如下代码:

var image = THREE.ImageUtils.loadTexture(url);

Mapping : 是一个THREE.UVMapping()类型，它表示的是纹理坐标。

wrapS：表示x轴的纹理的回环方式，就是当纹理的宽度小于需要贴图的平面的宽度的时候，平面剩下的部分应该以何种方式贴图的问题。
wrapT：表示y轴的纹理回环方式。 magFilter和minFilter表示过滤的方式，这是OpenGL的基本概念，不设置的时候，它会取默认值。

format：表示加载的图片的格式，这个参数可以取值THREE.RGBAFormat，RGBFormat等。

THREE.RGBAFormat表示每个像素点要使用四个分量表示，分别是红、绿、蓝、透明来表示。

RGBFormat则不使用透明，也就是说纹理不会有透明的效果。

type：表示存储纹理的内存的每一个字节的格式，是有符号，还是没有符号，是整形，还是浮点型。不过这里默认是无符号型（THREE.UnsignedByteType）。

anisotropy：各向异性过滤。使用各向异性过滤能够使纹理的效果更好，但是会消耗更多内存、CPU、GPU时间.

grid : 格子

texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set(4, 4);
texture.needsUpdate = true;        

边长为1000，大网格中有小网格，小网格的边长是50.

new THREE.GridHelper( 1000, 50 );                                                                      
grid.setColors( 0x0000ff, 0x808080 );
网格线的颜色一头是0x0000ff，另一头是0x808080。线段中间的颜色取这两个颜色的插值颜色。                                                                        

Rotation : 旋转

new THREE.Euler();旋转中心在立方体的中心                                                                                

mesh.rotateX(0.01);                                                                                        
mesh.rotateY(0.01);                                                                                        
mesh.rotateZ(0.01);                                                                                        

UglifyJS : 压缩工具

Helper:

AxisHelper是一个坐标轴对象，添加到场景中我们就可以看到世界坐标系的具体位置。

new THREE.AxisHelper(20);  坐标轴AxisHelper :  
scene.add(axes);        

法向量ArrowHelper

new THREE.ArrowHelper(face.normal,centroid,2,0x3333FF,0.5,0.5);
cube.add(arrow);

datGUI:

new dat.GUI() ;用来添加用户界面
gui.add(controls, 'rotationSpeed', 0, 0.5);

controls是控制的变量
0--0.5是取值变化范围        

var controls = new function () {
      this.rotationSpeed = 0.02;
      this.bouncingSpeed = 0.03;
 };

var gui = new dat.GUI();
      gui.add(controlsFunction, 'name', 0, 0.5); //取值范围
      gui.add(controls, 'numberOfObjects').listen(); //监听并显示
      f1 = gui.addFolder('Vertices ' + (i + 1));
      f1.add(controlPoints[i], 'x', -10, 10);

gui.add(controls, 'disableSpotlight').onChange(function (e) {
            spotLight.visible = !e;
 });

ASCII–文本画

new THREE.AsciiEffect(renderer);
effect.setSize(width,height);
$("div").append(effect.domElement);
effect.render(scene,renderer);

普通雾化效果Fog

new THREE.Fog(color,near,far)            
new THREE.FogExp2(color,浓度)            

粒子系统：

new THREE.SpriteMaterial();
new THREE.Sprite(material);
new THREE.SpriteCanvasMaterial()
new THREE.ParticleBasicMaterial();
new THREE.Particle(material);
new THREE.PointCloudMaterial({size: 4, vertexColors: true, color: 0xffffff});
new THREE.PointCloud(geom, material);

轨道控件：

控制object的方向，能让其随着鼠标的方向转动

声明：

new THREE.OrbitControls(camera);（render的时候，orbit.update()即可;）

飞行控件:

new THREE.FlyControls()

翻滚控件:

new THREE.RollControls()

轨迹球控件：

声明：

new THREE.TrackballControls

路径控件 ：

new THREE.PathControls()

文件系统 ：

new THREE.FileLoader();        

定义投影仪（r85版本里面貌似被淘汰了）

声明

new THREE.Projector();

在某个position位置向场景中发射一束光线

new THREE.Raycaster（）

时钟控件：

new THREE.Clock();可以精确的计算出上次调用后经过的时间

骨骼动画

new THREE.SkinnedMesh(geometry,mat).bones[];带有蒙皮的网格对象
THREE.AnimationHandler.add（geometry.animation）注册动画
new THREE.Animation(mesh, model.animation);定义动画
new THREE.SkeletonHelper(mesh); 
SkeletonHelper可以用线显示出骨架,帮助我们调试骨架,可有可无 

THREEJS基本功能一览表

• 摄像机 Camera
  正交摄像机 OrthographicCamera
  透视投影相机 PerspectiveCamera

• Core（核心对象）
  BufferGeometry 这个类是另一种创建几何体对象的方式和BufferAttribute配合使用
  Clock（用来记录时间）
  EventDispatcher
  Face3
  Face4
  Geometry
  Object3D
  Projector
  Raycaster（计算鼠标拾取物体时很有用的对象）

• Lights（光照）
  Light
  AmbientLight
  AreaLight
  DirectionalLight
  HemisphereLight
  PointLight
  SpotLight

• Loaders（加载器，用来加载特定文件）
  Loader
  BinaryLoader
  GeometryLoader
  ImageLoader
  JSONLoader
  LoadingMonitor
  SceneLoader
  TextureLoader

• Materials（材质，控制物体的颜色、纹理等）
  Material
  LineBasicMaterial
  LineDashedMaterial
  MeshBasicMaterial
  MeshDepthMaterial
  MeshFaceMaterial
  MeshLambertMaterial
  MeshNormalMaterial
  MeshPhongMaterial
  PointCloudMaterial（ParticleBasicMaterial）
  SpriteCanvasMaterial（ParticleCanvasMaterial）
  ParticleDOMMaterial
  ShaderMaterial
  SpriteMaterial
  MeshStandardMaterial：
  MeshPhysicalMaterial

• Math（和数学相关的对象）
  Box2
  Box3
  Color
  Frustum
  Math
  Matrix3
  Matrix4
  Plane
  Quaternion
  Ray
  Sphere
  Spline
  Triangle
  Vector2
  Vector3
  Vector4

• Objects（物体）
  Bone
  Line
  LOD
  Mesh（网格，最常用的物体）
  MorphAnimMesh
  PointCloud（ParticleSystem）
  Ribbon
  SkinnedMesh
  Sprite

• Renderers（渲染器，可以渲染到不同对象上）
  CanvasRenderer
  WebGLRenderer（使用 WebGL 渲染，这是本书中最常用的方式）
  WebGLDefferedRenderer
  WebGLRenderTarget
  WebGLRenderTargetCube
  WebGLShaders（着色器，在最后一章作介绍）

  Renderers / Renderables
  RenderableFace3
  RenderableFace4
  RenderableLine
  RenderableObject
  RenderableParticle
  RenderableVertex

• Scenes（场景）
  Fog
  FogExp2
  Scene

• Textures（纹理）
  CompressedTexture
  DataTexture
  Texture

• Extras
  FontUtils
  GeometryUtils
  ImageUtils
  SceneUtils

• Extras / Animation
  Animation
  AnimationHandler
  AnimationMorphTarget
  KeyFrameAnimation

• Extras / Cameras
  CombinedCamera
  CubeCamera

• Extras / Core
  Curve
  CurvePath
  Gyroscope
  Path
  Shape

• Extras / Geometries（几何形状）
  CircleGeometry
  ConvexGeometry
  CubeGeometry
  CylinderGeometry
  ExtrudeGeometry
  IcosahedronGeometry
  LatheGeometry
  OctahedronGeometry
  ParametricGeometry
  PlaneGeometry
  PolyhedronGeometry
  ShapeGeometry
  SphereGeometry
  TetrahedronGeometry
  TextGeometry
  TorusGeometry
  TorusKnotGeometry
  TubeGeometry

• Extras / Helpers
  ArrowHelper
  AxisHelper
  BoxHelper
  CameraHelper
  DirectionalLightHelper
  FaceNormalHelper
  GridHelper
  HemisphereLightHelper
  PointLightHelper
  PolarGridHelper
  RectAreaLightHelper
  SkeletonHelper
  SpotLightHelper
  VertexNormalsHelper

• Extras / Objects
  ImmediateRenderObject
  LensFlare
  MorphBlendMesh

• Extras / Renderers / Plugins
  DepthPassPlugin
  LensFlarePlugin
  ShadowMapPlugin
  SpritePlugin

• Extras / Shaders 着色器
  ShaderFlares
  ShaderSprite