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({
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不要設置為負值 聲明透視相機 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-master\chapter-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,
2,
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的方向，能讓其隨着鼠標的方向轉動
<script type="text/javascript" src="../libs/OrbitControls.js"></script>
聲明：new THREE.OrbitControls(camera);（render的時候，orbit.update()即可;）
飛行控件:
new THREE.FlyControls()
翻滾控件:
new THREE.RollControls()
軌跡球控件：
<script type="text/javascript" src="../libs/TrackballControls.js"></script>
new THREE.TrackballControls
路徑控件
new THREE.PathControls()
文件系統:
new THREE.FileLoader();
定義投影儀（r85版本里面貌似被淘汰了）
<script type="text/javascript" src="../libs/Projector.js"></script>
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