1. 程式人生 > >Three.js學習筆記-Core(核心)

Three.js學習筆記-Core(核心)

BufferAttribute

儲存和BufferGeometry相關的屬性(如定點位置,面部索引,法線,顏色和UV,自定義屬性)
建構函式
BufferAttribute( array : TypedArray, itemSize : Integer, normalized : Boolean )
array: 例項化緩衝區
itemSize: 陣列中關聯特殊頂點的值
normalized: 可選的,規格化資料
特性
- array/itemSize/name/normalized
- count: Integer 儲存的陣列長度除以itemSize
- needsUpdate: Boolean 修改了陣列中的值需要設為true
- onUploadCallback: Function
- updateRange: Object offset預設0,起始的更新的位置;count預設-1,不使用updateRange
- version: Integer 版本
方法


- clone(): BufferAttribute
- copyArray(array): BufferAttribute
- copyAt ( index1 : Integer, bufferAttribute : BufferAttribute, index2 : Integer ) : null 從bufferAttribute[index2]複製到array[index1]
- copyColorsArray(colors): BufferAttribute
- copyVector2/3/4sArray(vactors): BufferAttribute
- getX/Y/Z/W(index): Number
- onUpload(callback: Function): null
- set(value: Array,offset: Integer) offset可選的而開始複製的位置
- setArray(array: TypedArray) 設定後需要needsUpdate為true
- setDynamic(value: Boolean) 設定動態的值
- setX/Y/Z/W/XY/XYZ/XYZW(index,[x,y,z,w])

BufferGeometry

網格,線或點幾何的有效表示。包括緩衝區內的頂點位置,面索引,法線,顏色,UV和自定義屬性,從而降低將所有這些資料傳遞到GPU的成本
訪問屬性
需要用getAttribute來訪問
position/normal/color(itemSize:3),由formFeometry()來設定
建構函式
BufferFeometry()
特性
- attributes: Object
- boundingBox/Sphere: Box3 預設null
- drawRange: Object 不能直接設定,而是使用setDrawRange
- groups: Array 其中的每一個將在單獨的WebGL中呈現
- id: Integer /index: BufferAttribute/isBufferFeometry: Boolean/name
- userData/uuid
- morphAttributes: Object
方法


- EventDispatcher 方法可用
- addAttribute(name,value)/applyMatrix(matrix)/center()/clone()/copy(bufferGeometry)
- addGroup(staart,count,matrixIndex)/clearGroups()
- computeBoundingBox () /computeBoundingSphere ()/computeVertexNormals ()
- dispose()
- getAttribute(name)/getIndex()/lookAt(vector)/rotateX/Y/Z(radians)/scale(x,y,z)
- setIndex(index)/setDrawRange(start,count)
- translate(x,y,z)

Clock

它可用就用preformance.now(),否則用不太準確的Date.now()
建構函式
Clock(autoStart: Boolean) 預設true
特性
- autoStart/startTime/oldTime/running: Boolean/elapsedTime 時鐘執行總時間
方法
- start()/stop()/getElapsedTime()/getDelta()

DirectGeometry

內部用作將Geometry轉換BufferGeometry

EventDispatcher

自定義事件 github-EventDispatcher
建構函式
EventDispatcher()
方法
- add/has/removeEventListener(sype,linstener)
- dispatchEvent(event)

Face3

用在Geometry中。為所有的標準幾何體自動建立,當你需要自定義幾何體的時候需要手動建立
建構函式
Face3( a : Integer, b : Integer, c : Integer, normal : Vector3, color : Color, materialIndex : Integer )

Geometry

儲存特性(定點,位置,面,顏色等)
建構函式
Geometry()
特性
- boundingBox/boundingSphere/name/uuid
- colors: Array 定點顏色,匹配數量和頂點序
- faces: Array 模型中每個定點如何連線形成面,還包括面,顏色,法線的資訊
- faceVertexUvs :Array 面上的UV層
- id/isGeometry/morphTargets: Array/morphNormasl: Array
- lineDistances: array 定點之間的距離線上性幾何體
- skinWeight: Array 作用在SkinnerMesh
- skinIndices: Array
- vertices: Array 模型中每個頂點的位置
- vertices/element/uvs/normals/colors/groups/lineDistancesNeedUpdate: Boolean 只要陣列內容發生變化就需要設為true
方法
- EventDispatcher方法可用
- applyMatrix(matrix4)/center()/clone()/copy(geometry)/dispose()/lookAt(v3)
- computeBoundingBox/Sphere()
- computeFace/Morph/VertexNormals()
- fromBufferGeometry(geometry) 將緩衝幾何轉換成幾何體
- merg(geometry,matrix4,materialIndexOfffset)/mergMesh(mesh)/mergVertices()
- normalize()
- rotateX/Y/Z(radians)
- scale/translate(x,y,z)/toJSON()
- setFromPoints(points: Array)
- sortFacesByMaterialIndex ( )

相對應各個類的例項,

InstancedBufferAttribute

InstancedBufferGeometry

InstancedInterleavedBuffer

InterleavedBuffer

意味著可能具有不同型別的多個屬性(例如,位置,法線,紫外線,顏色)被打包到單個陣列緩衝器中

InterleavedBufferAttribute

Layers

預設所有的Object3D都是0層,總共32層,層數0~31 控制可見性
建構函式
Layers()
特性
- mask:Integer 儲存此層物件屬於32層的哪一層
方法
- disable/enable/set/test/toggle(layer: Integer)

Object3D

大多數物件的基類
建構函式
Object3D()
特性
- castShadow: Boolean 投射陰影,預設false
- children: Object3D 陣列表示物件的子類
- frustumCulled 預設true,設定後在每一幀渲染時檢查物件在相機的截頭體(四稜臺)
- id: Integer 只讀,物件例項的唯一數字
- isObject3D: Boolean
- layers: Layers 只有該物體至少有一層與正在使用的照相機相同,該物體才是可見的
- matrix: Matrix4 本地變換矩陣
- matrixAutoUpdate: Boolean 預設true
- matrixWorld: Matrix4 全域性的變換矩陣,沒有父物件則和本地轉換一樣
- matrixWorldNeedsUpdate: Boolean 預設false。設定此項後,它將計算該幀中的matrixWorld並將此屬性重置為false
- modelViewMatrix: Matrix4 傳遞給著色器計算物件的位置
- name: String 預設null,可選的物件的名
- normalMatrix: Matrix3 傳遞給著色器來計算物件上的燈光
- onAfterRender: Function 可選的渲染物件後的回撥函式,引數 renderer, scene, camera, geometry, material, group.
- onBeforeRender: Function
- parent: Object3D
- position: Vector3 物件的本地位置,預設(0,0,0)
- quaternion: Quaternion 物件的本地旋轉(四元數)
- receiveShadow: Boolean 預設false,材料是否接收陰影
- renderOrder: Number 預設0,呈現從低到高的方式
- rotation: Eular 物件本地旋轉(尤拉角,弧度)
- scale: Vector3 預設(1,1,1) 縮放
- up: Vector3 預設(0,1,0),LookAt()用它來確定結果的方向
- userData: Object 儲存使用者自定義資料的物件
- uuid: String 自動分配的不可編輯
- visible: Boolean 預設true
靜態特性
- DefaultUp: Vector3 預設(0,1,0),用作直射光,聚光燈的預設位置
- DefaultMatrixAutoUpdate: Vector3 新建立的Object3D物件預設設定matrixAutoUpdate

方法
- EventDispatcher() 在這個類上可用
- add(object: Object3D…) 給新增子物件,物件對多隻能有一個父物件
- applyMatrix(matrix: Mateix4): null 更新位置,旋轉和縮放
- applyQuaternion(quaternion: Quaternion) 更新旋轉
- clone(recursive: Boolean) 預設true,物件的後代也被克隆
- copy(object: Object3D,recursive: Boolean): this 複製物件到當前物件
- getObjectById(id: Integer): Object3D
- getObjectByName(name: String): Object3D
- getObjectByProperty(name: string,value: Float) : Object3D 搜尋物件的子類,返回第一個匹配的值
- getWorldposition(target: Vector3): Vector3
- getWorldQuaternion(target: Quaternion): Quaternion
- getWorldScale(target: Vector3): Vector3
- getWorldDirection(target: Vector3): Vector3
- localToWorld(vector: Vector3): Vector3 轉換本地座標到世界座標
- lootAt(vector: Vector3): null 不支援有旋轉/轉換的父類物件 旋轉物體的面朝向世界座標中的一個點
- lookAt(x: Float,y: Float,z: Float): null 可以讓攝像機追蹤某個物件的位置
- raycast(raycast: Raycast, intersects: Array): Array 獲取投射線和物件之間的交集
- remove(object: object3D…): null 移除任意數量的子物件
- rotateOnAxis(axis: Vector3,angle: Float): this
- rotateOnWorldAxis(axis: Vector3,angle: Float): this
- rotateX/Y/Z(rad: Float): this 旋轉軸是x/y/z軸,旋轉rad弧度
- setRotationFromAxisAngle(axis: Vector3,angle: Float): null
- setRotationFromEular(eular: Eular): null
- setRotationFromMatrix ( m : Matrix4 ) : null
- setRotationFromQuaternion ( q : Quaternion ) : null
- toJSON(q: Quaternion): null
- translateOnAxis ( axis : Vector3, distance : Float ) : this
- translateX/Y/Z ( distance : Float ) : this
- traverse ( callback : Function ) : null 遍歷,物件和後代均執行回撥
- traverseVisible ( callback : Function ) : null 只針對可見的物件
- traverseAncestors ( callback : Function ) : null 對所有祖先執行回撥
- updateMatrix () : null 更新本地的變換,物件本地的位置,旋轉,縮放發生變換時呼叫
- updateMatrixWorld ( force : Boolean ) : null 更新物件和子類的世界變換
- worldToLocal ( vector : Vector3 ) : Vector3 世界座標轉換本地座標

Raycaster

這個類來輔助raycasting的,Raycasting用於滑鼠選擇
直接是穿透的,只需要取獲取與射線相交的陣列中的第一個(也就是離射線最近的物件),然後將控制射線的滑鼠的值設定為一個不指向當前物件的二維空間座標
建構函式
Raycaster( origin : Vector3, direction : Vector3, near : Float, far : Float )
origin: 光線投射的地方
direction: 光線投射的方向,單位化,normalized()
near/far: 光線最遠最近投射的距離,預設0/Infinity
特性
- far
- linePrecision: Float 與直線物體相交時的精度因子
- near: Float
- params: Object 可選特效{Mesh:{},Line:{},LOD:{},Points:{threshold: 1},Sprite:{}}
- ray: Ray 用在raycasting
方法
- set(origin: Vector3,direction: Vector3)
- setFormCamera(coords : Vector2, camera : Camera) coods 滑鼠的2D座標介於0-1,camera光線來源的相機
- intersectObject ( object, recursive : Boolean, optionalTarget : Array ): object 與射線相交的物件,Array recursive 預設false,設定為true則檢查所有後代,
- intersectObjects ( objects: Array, recursive : Boolean, optionalTarget : Array )

var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();

function onMouseClick(event){
        mouse.x = (event.clientX / window.innerWidth) *2 -1;
        mouse.y = -(event.clientY / window.innerHeight) *2 +1;
}
window.addEventListener('click',onMouseClick,false);

raycaster.setFromCamera(mouse,camera)
        var intersect = raycaster.intersectObject( doorF );
        if(intersect.length > 0){
            if(intersect[0].object.userData.isOpen == false){
                    intersect[0].object.parent.quaternion.setFromAxisAngle(new THREE.Vector3( 0, 1, 0 ), Math.PI / 2 );
                    }
    console.log(intersect)
}

Uniform

全域性GLSL變數,被傳遞給著色器程式