Three.js学习笔记-Core(核心)
BufferAttribute
存储和BufferGeometry相关的属性(如定点位置，面部索引，法线，颜色和UV，自定义属性)
构造函数
BufferAttribute( array : TypedArray, itemSize : Integer, normalized : Boolean )
array: 实例化缓冲区
itemSize: 数组中关联特殊顶点的值
normalized: 可选的，规格化数据
特性
- dynamic 默认false,缓冲区是否是动态的
- array/itemSize/name/normalized
- count: Integer 存储的数组长度除以itemSize
- needsUpdate: Boolean 修改了数组中的值时需要设为true
- onUploadCallback: Function
- updateRange: Object offset默认0，起始的更新的位置；count默认-1，不使用updateRange
- version: Integer 版本
方法 - clone(): BufferAttribute
- copy(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])
TypeBufferAttribute
构造方法
- TypedBufferAttribut(array,itemSize,normalized: Boolean)
array有九种类型THREE.Float64BufferAttribute/Float32BufferAttribute/Uint32BufferAttribute/Int32BufferAttribute/Uint16BufferAttribute/Int16BufferAttribute/Uint8BufferAttribute/Int8BufferAttribute/Uint8ClampedBufferAttribute
属性方法都继承自BufferAttribute
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 默认null
- 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() 在程序运行的内存中删除BufferGeometry时调用
- merge(bufferGeometry,offset)
- normalizeNormals() 纠正集合表面的照明
- getAttribute(name)
- removeAttribute(name)
- getIndex()
- lookAt(vector)
- rotateX/Y/Z(radians)
- scale(x,y,z)
- setIndex(index:BufferAttribute)
- setFromObject(object)
- setFromPoints(point)
- setDrawRange(start,count)
- translate(x,y,z)
- updateFromObject(object)
Clock
它可用就用preformance.now(),否则用不太准确的Date.now()
构造函数
Clock(autoStart: Boolean) 默认true
特性
- autoStart 默认true
- startTime strat() 方法最后调用的时间
- oldTime 保存start,getElapsiveTime或getDelta方法最后调用的时间
- running: Boolean
- elapsedTime 时钟运行总时间
方法 - start() 设置startTime和oldTime为当前时间；elapsedTime为0 running为true
- stop() 设置oldTime为当前时间
- getElapsedTime() 获取时钟开始到设置oldTime是当前时间的时间，如果autoStart是true,表的状态不是running,则开始计时
- getDelta() 获取自设置oldTime以来传递的秒，并将旧时间设置为当前时间；如果autoStart是true,表的状态不是running,则开始计时
DirectGeometry
内部用作将Geometry转换BufferGeometry
EventDispatcher
自定义事件 github-EventDispatcher
构造函数
EventDispatcher()
方法
- addEventListener(sype,linstener)
- hasEventListener(sype,linstener)
- removeEventListener(sype,linstener)
- dispatchEvent(event)
var Car = function () {
this.start = function () {
this.dispatchEvent( { type: 'start', message: 'vroom vroom!' } );
};
};
// Mixing the EventDispatcher.prototype with the custom object prototype
Object.assign( Car.prototype, EventDispatcher.prototype );
// Using events with the custom object
var car = new Car();
car.addEventListener( 'start', function ( event ) {
alert( event.message );
} );
car.start();
Face3
用在Geometry中。为所有的标准几何体自动创建，当你需要自定义几何体的时候需要手动创建
构造函数
Face3( a : Integer, b : Integer, c : Integer, normal : Vector3, color : Color, materialIndex : Integer )
- a 顶点a的索引
- b 顶点b的索引
- c 顶点c的索引
- normal 面的法线 默认(0,0,0)
- color 面的颜色
用Face3去创建一个cube时，cube的每个面是两个三角形组成。需要注意创建面的顶点的创建顺序，顶点的顺序决定了面是面向摄像机还是背向摄像机。对于渲染引擎来说，三角形渲染的效率更高。
Geometry
存储特性(顶点，位置，面，颜色等)
构造函数
Geometry()
特性
- boundingBox 默认null 通过computeBoundingBox()来计算
- boundingSphere 默认null 通过computeBoundingSphere()来计算
- name/uuid
- colors: Array 定点颜色，匹配数量和顶点序
- faces: Array 模型中每个定点如何连接形成面，还包括面，颜色，法线的信息
- faceVertexUvs :Array 面上的UV层
- id/isGeometry/morphTargets: Array/morphNormasl: Array
- lineDistances: array 定点之间的距离在线性几何体 这是LineDashedMaterial正确渲染所必需的
- skinWeight: Array 作用在SkinnerMesh
- skinIndices: Array
- vertices: Array 模型中每个顶点的位置
- (vertices/element/uvs/normals/colors/groups/lineDistances)NeedUpdate: Boolean 只要数组内容发生变化就需要设为true
方法 - EventDispatcher方法可用
- applyMatrix(matrix4)/center()/clone()/copy(geometry)/dispose()/lookAt(v3)
- computeBoundingBox/computeBoundingSphere() 默认不需要计算 ，需要显示计算，否则为null
- computeFace/computeMorph/computeVertexNormals() 法向量决定不同光源下的颜色
- fromBufferGeometry(geometry) 将缓冲几何转换成几何体
- merg(geometry,matrix4,materialIndexOfffset)/mergMesh(mesh)/mergVertices()
- normalize()
- rotateX/rotateY/rotateZ(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(layer: Integer)
- enable(layer: Integer)
- set(layer: Integer)
- test(layer: Integer)
- 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 id对象实例的唯一编号，只会获取到第一个匹配的值
- getObjectByName(name: String): Object3D 匹配对象的子对象的name属性，返回第一个匹配的对象，默认是空值，需要手动设置(除了导入的模型，导入的模型的name属性是建模时设置的名称)
- 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 在quaternion对象上调用setFromAxisAngle(asix,angle: radians)
- setRotationFromEular(eular: Eular): null 在quaternion对象上调用setFromRotationMatrix(m)
- 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 遍历，以Object3D对象作为第一个参数的函数。对此对象和所有后代执行回调- 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(
用于鼠标拾取(计算出鼠标结束的3D空间中的对象)以及其他事情)
方法 - 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
了解JavaScript的WebGL编程。
全局GLSL变量，被传递给着色器程序。