Three.js是一个比较伟大的webgl开源库,它简化了浏览器3D编程,使得使用JavaScript在浏览器中创建复杂的场景变得容易很多。Github上众多webgl demo令我兴奋不已,跃跃欲试。由于这个库还处在开发阶段,因此资料非常匮乏,爱好者大部分时间不得不通过阅读该库的源码进行学习,我现在也准备这样做。
这是第一篇笔记,先从最基础的核心(Core)对象开始。
Core::Vector2
该构造函数用来创建一个表示二维向量的对象
复制代码 代码如下:
THREE.Vector2 = function ( x, y ) {
this.x = x || 0;
this.y = y || 0;
};
Vector2对象的功能函数采用定义构造函数的原型对象来实现,形如:
复制代码 代码如下:
THREE.Vector2.prototype = {
constructor: THREE.Vector2,
set: function ( x, y ) {
this.x = x;
this.y = y;
return this;
},
copy: function ( v ) {
this.x = v.x;
this.y = v.y;
return this;
},
...... // 更多的函数
};
函数set(x,y)用以指定向量的值,调用者本身的x,y值被影响了,而该方法本身又返回调用者本身,这种情况很常见,以下不再说明。通过文字能够表述清楚功能的函数不再引用源代码,这一点以下也不再说明。
函数copy(v)用来将向量v复制进调用者。
函数add(a,b)和函数sub(a,b)分别表示对向量a,b相加和相减。
函数addSelf(v)和subSelf(v)分别表示对调用者本身加上或减去向量v。
函数multiplyScale(s)和divideScale(s)分别表示对调用者本身乘以或除以s。
函数lerpSelf(v,alpha)将调用者向v所指的方向旋转alpha,当alpha为1时,调用者最终等于v,而当alpha=0时,调用者还等于原来。
复制代码 代码如下:
lerpSelf: function ( v, alpha ) {
this.x += ( v.x - this.x ) * alpha;
this.y += ( v.y - this.y ) * alpha;
return this;
},
函数negate()对调用者取反。
函数dot(v)返回float类型的调用者和向量v的点乘。
函数lengthSq()和函数length()返回float类型的调用者长度平方或长度。
函数normalize()将调用者本身归一化。
函数distanceToSquared(v)和distanceTo(v)将返回调用者和向量v的距离。这里的距离其实是两向量起点都在原点时,终点之间的距离,也就是向量this-v的长度。
函数setLength(s)将向量的长度缩放至为s,方向不变。
函数equals(v)判断调用者与向量v的值是否相同。
函数isZero()判断调用者是否是零向量。
函数clone()返回一个与调用者值一样的新向量,相当于将其复制出去,注意与copy(v)的区别。
Core::Vector3
该构造函数创建一个表示三维向量的对象
复制代码 代码如下:
THREE.Vector3 = function ( x, y, z ) {
this.x = x || 0;
this.y = y || 0;
this.z = z || 0;
};
三维向量和二维向量有许多共通之处,比如set,add,dot,length,clone等,此处尽数略去,只记录三维向量比二维向量多出的部分函数。
函数setX(x),setY(y)和setZ(z)用来单独设置某一分量的值。
函数cross(a,b)和crossSelf(v)分别使调用者变为a,b的叉乘或者调用者本身与v的叉乘。叉乘是一个向量,垂直于参与叉乘的两个向量并呈右手螺旋法则。
函数getPositionFromMatrix(m),getRotationFromMatrix(m),getScaleFromMatrix(m)从4×4的模型矩阵中提取位置分量,旋转分量和缩放分量。模型矩阵表示了一系列平移、旋转、缩放变换的叠加效果。(这里第二个函数出现在文档中,在源码中被另外两个函数代替了,也许还没来得及更新)。
函数angleTo(v)计算调用者和向量v的夹角。
Core::Vector4
该构造函数创建一个表示四维向量的对象
复制代码 代码如下:
THREE.Vector4 = function ( x, y, z, w ) {
this.x = x || 0;
this.y = y || 0;
this.z = z || 0;
this.w = ( w !== undefined ) ? w : 1;
};
四维向量用来表示齐次坐标,其函数和Vector2,Vector3中的函数功能重合,仅仅是多一个分量而已,这里不再记录。
Core::Matrix3
该构造函数创建一个表示3×3矩阵的对象
THREE.Matrix3 = function () {
this.elements = new Float32Array(9);
};
3×3矩阵有9个元素,存储在矩阵对象的属性elements中,elements是一个数组。
函数getInverse(m)返回矩阵m的逆矩阵,同时改变调用者本身。
函数transpose()转置调用者。
函数transposeToArray(r)将调用者转置进数组r而不改变自身。(这个地方似乎源码错了,var m=this.m应该为var m=this.elements。)
Core::Matrix4
该构造函数创建一个表示4×4矩阵的对象,4×4矩阵在三维图形学中非常重要,模型矩阵、视图矩阵和投影矩阵都是这样的矩阵。
复制代码 代码如下: