WebGL和ThreeJs学习5--ThreeJS基本功能控件

Threejs

2017年6月6日

15:06

Stats:

new Stats();性能监视器，性能测试的方法，引入 Stats.js http://www.hewebgl.com/article/getarticle/58

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（）；声明渲染器renderer

new THREE.WebGLDeferredRenderer();处理复杂光的延迟渲染器

new THREE.CanvasRenderer();

new THREE.WebGLDeferredRenderer({

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不要设置为负值声明透视相机 http://www.hewebgl.com/article/getarticle/59

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(); learning-threejs-masterchapter-05

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：定义材质的颜色是否受全局雾效的影响。定义一种线条的材质 http://www.hewebgl.com/article/getarticle/56

new THREE.LineDashedMaterial( parameters )

new THREE.MeshLambertMaterial({map: textureGrass});

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

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

var material = new THREE.MeshToonMaterial( {
                                map: imgTexture,
                                bumpMap: imgTexture,
                                bumpScale: bumpScale,
                                color: diffuseColor,
                                specular: specularColor,
                                reflectivity: beta,
                                shininess: specularShininess,
                                envMap: alphaIndex % 2 === 0 ? null : reflectionCube
                            } );

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坐标位置

THREE.SceneUtils.createMultiMaterialObject(ground,

[new THREE.MeshBasicMaterial({wireframe: true, overdraw: true, color: 000000}),

new THREE.MeshBasicMaterial({color: 0x00ff00, transparent: true, opacity: 0.5}

)

]);支持mesh使用多种材质

Mesh.geometry.vertices=

Mesh.geometry.verticesNeedUpdate=

Mesh.geometry.computeFaceNormals() ；

Mesh.translateX(number)；移动

light

new THREE.Light ( hex ) hex是一个16进制的颜色值 http://www.hewebgl.com/article/getarticle/60

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进制的颜色值，环境光。环境光并不在乎物体材质的 color 属性，而是 ambient 属性

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.background = new THREE.Color().setHSL( 0.51, 0.6, 0.6 );

scene.background = new THREE.CubeTextureLoader()//天空盒1
                    .setPath( 'textures/cube/Park3Med/' )
                    .load( [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ] );

var path = "textures/cube/Park2/";//天空盒2
                var format = '.jpg';
                var urls = [
                        path + 'posx' + format, path + 'negx' + format,
                        path + 'posy' + format, path + 'negy' + format,
                        path + 'posz' + format, path + 'negz' + format
                    ];
                var textureCube = new THREE.CubeTextureLoader().load( urls );
                textureCube.format = THREE.RGBFormat;
                scene = new THREE.Scene();
                scene.background = textureCube;

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)，动画引擎实现动画效果，声明 http://www.hewebgl.com/article/getarticle/58

new TWEEN.Tween( mesh.position) .to( { x: -400 }, 3000 ).repeat( Infinity ).start();TWEEN.Tween的构造函数接受的是要改变属性的对象，这里传入的是mesh的位置。Tween的任何一个函数返回的都是自身，所以可以用串联的方式直接调用各个函数。to函数，接受两个参数，第一个参数是一个集合，里面存放的键值对，键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时间。"

texture.wrapS = THREE.RepeatWrapping;

texture.wrapT = THREE.RepeatWrapping;

texture.repeat.set(4, 4);

texture.needsUpdate = true;

grid:

new THREE.GridHelper( 1000, 50 );边长为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); scene.add(axes);

法向量ArrowHelper

new THREE.ArrowHelper(

face.normal,

centroid,

0x3333FF,

0.5,

0.5);

cube.add(arrow);

datGUI:

new dat.GUI() ;用来添加用户界面

gui.add(controls, 'rotationSpeed', 0, 0.5);，controls是控制的变量，rotationspeed是属性之一，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）注册动画

newTHREE.Animation(mesh, model.animation);定义动画

newTHREE.SkeletonHelper(mesh); SkeletonHelper可以用线显示出骨架,帮助我们调试骨架,可有可无

PosTProcessing

var clearPass = new THREE.ClearPass();
var clearMaskPass = new THREE.ClearMaskPass();
var maskPass1 = new THREE.MaskPass( scene1, camera );
var outputPass = new THREE.ShaderPass( THREE.CopyShader );

THREEJS基本功能一览表

Camera

OrthographicCamera

PerspectiveCamera

Core（核心对象）

BufferGeometry

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