Threejs源码解析（Object3D）
版本95
本来想就这么⽤算了，可是发现好多都不理解，也就起了解析源码的⼼思，下苦功夫了，以前⽼版本的有⼈写过，不过threejs 更新太快，有些变动，并且他只是简单的注释，并未详细的解释，对于我这种刚开始接触的⼩⽩来说，数学就是⼀⼤硬伤，本来想做个原⽣的射线拾取，结果看的我⼀脸懵逼，跳的函数太多，刚开始容易迷路，所有就打算慢慢啃；⽅法都尽量解释，以便知道这样的⽅法为什么得这样的结果；
相关连的部分，我会看完再回来更新；
Object3d 是所有模型的基类；
import { Quaternion } from '../math/Quaternion.js';
import { Vector3 } from '../math/Vector3.js';
import { Matrix4 } from '../math/Matrix4.js';
import { EventDispatcher } from './EventDispatcher.js';
import { Euler } from '../math/Euler.js';
import { Layers } from './Layers.js';
import { Matrix3 } from '../math/Matrix3.js';
import { _Math } from '../math/Math.js';
/**
* @author mrdoob / mrdoob/
* @author mikael emtinger / gomo.se/
* @author alteredq / alteredqualia/
* @author WestLangley / github/WestLangley
* @author elephantatwork / www.elephantatwork.ch
*/
var object3DId = 0;
function Object3D() {
/**
* Object.defineProperty（obj, prop ， descriptior）：表⽰新增或者修改⼀个已经存在的属性，并返回这个对象;
*        obj ：需定义属性的对象
*        prop:  需定义或者修改属性的名字
*        descriptor : 将被定义或修改的属性的描述符
*/
Object.defineProperty( this, 'id', { value: object3DId ++ } );
this.uuid = _ateUUID();//⽣成id
this.name = '';
this.parent = null;
this.children = [];
this.up = Object3D.DefaultUp.clone();//初始化以Y轴正⽅向的向量
var position = new Vector3();
var rotation = new Euler();//初始化欧拉⾓
var quaternion = new Quaternion();//初始化成四元矩阵
var scale = new Vector3( 1, 1, 1 );
/**
* 给对象rotation属性绑定setFromEuler()⽅法
* 当rotation属性值更改，调⽤setFromEuler()⽅法
*/
function onRotationChange() {
quaternion.setFromEuler( rotation, false );//欧拉⾓转化成四元数
}
/**
* 给对象quaternion属性绑定setFromQuaternion()⽅法
* 当quaternion属性值更改，setFromQuaternion()⽅法
rotate属性
*/
function onQuaternionChange() {
rotation.setFromQuaternion( quaternion, undefined, false );//通过设置四元，旋转得到坐标
}
/
/绑定监听
//定义属性
Object.defineProperties( this, {
position: {
enumerable: true,
value: position
},
rotation: {
enumerable: true,
value: rotation
},
quaternion: {
enumerable: true,
value: quaternion
},
scale: {
enumerable: true,
value: scale
},
modelViewMatrix: {
value: new Matrix4()
},
normalMatrix: {
value: new Matrix3()
}
} );
this.matrix = new Matrix4();//对象变换矩阵
this.matrixWorld = new Matrix4();//对象世界矩阵
this.matrixAutoUpdate = Object3D.DefaultMatrixAutoUpdate;//矩阵⾃动更新
this.matrixWorldNeedsUpdate = false;//每帧是否重新计算世界矩阵
this.layers = new Layers();//层
this.visible = true;//是否隐藏
this.castShadow = false;//是否⽣成阴影
this.frustumCulled = true;//锥形剔除
this.userData = {};//⽤户⾃定义数据
}
Object3D.DefaultUp = new Vector3( 0, 1, 0 );//Object3D 的up⽅向，⽤以camera 的up 默认y轴的正⽅向Object3D.DefaultMatrixAutoUpdate = true;
//事件
//事件
Object3D.prototype = Object.assign( ate( EventDispatcher.prototype ), {
constructor: Object3D,
isObject3D: true,
//在渲染之前
onBeforeRender: function () {},
//在渲染之后
onAfterRender: function () {},
//对变换矩阵的变换，达到缩放，旋转，移动的⽬的
applyMatrix: function ( matrix ) {
//在现有的矩阵上进⾏变换，两个矩阵相乘，更新原来的变换矩阵
this.matrix.multiplyMatrices( matrix, this.matrix );
//把变换矩阵分解成位置，四元，缩放
this.matrix.decompose( this.position, this.quaternion, this.scale );
},
//变换四元数
applyQuaternion: function ( q ) {
this.quaternion.premultiply( q );
return this;
},
//通过四元数的⽅式旋转任意坐标轴(参数axis)旋转⾓度(参数angle)，最后将结果返回到this.quternion属性中  setRotationFromAxisAngle: function ( axis, angle ) {
// assumes axis is normalized
this.quaternion.setFromAxisAngle( axis, angle );
},
//通过⼀次欧拉旋转(参数euler)设置四元数旋转，最后将结果返回到this.quternion属性中
setRotationFromEuler: function ( euler ) {
this.quaternion.setFromEuler( euler, true );
},
//利⽤⼀个参数m(旋转矩阵)，达到旋转变换的⽬的吧，最后将结果返回到this.quternion属性中
setRotationFromMatrix: function ( m ) {
// assumes the upper 3x3 of m is a pure rotation matrix (i.e, unscaled)
this.quaternion.setFromRotationMatrix( m );
},
//通过规范化的旋转四元数直接应⽤旋转
setRotationFromQuaternion: function ( q ) {
/
/ assumes q is normalized
py( q );
},
/**
* @function
* @desc 通过坐标轴旋转
* @param {THREE.Vector3} axis
* @param {float} angle 弧度
* @return {THREE.Object3D}
*/
rotateOnAxis: function () {
/
/ rotate object on axis in object space
// axis is assumed to be normalized
var q1 = new Quaternion();
return function rotateOnAxis( axis, angle ) {
q1.setFromAxisAngle( axis, angle );
this.quaternion.multiply( q1 );
return this;
};
}(),
/*
* 旋转世界坐标，不旋转⽗类，与上⾯⽅法类似
* */
rotateOnWorldAxis: function () {
// rotate object on axis in world space
// axis is assumed to be normalized
// method assumes no rotated parent
var q1 = new Quaternion();
return function rotateOnWorldAxis( axis, angle ) {        q1.setFromAxisAngle( axis, angle );
this.quaternion.premultiply( q1 );
return this;
};
}(),
/
**
* 绕X轴旋转angle度
*/
rotateX: function () {
var v1 = new Vector3( 1, 0, 0 );
return function rotateX( angle ) {
ateOnAxis( v1, angle );
};
}(),
/**
* 绕Z轴旋转angle度
*/
rotateY: function () {
var v1 = new Vector3( 0, 1, 0 );
return function rotateY( angle ) {
ateOnAxis( v1, angle );
};
}(),
/**
* 绕Z轴旋转angle度
*/
rotateZ: function () {
var v1 = new Vector3( 0, 0, 1 );
return function rotateZ( angle ) {
ateOnAxis( v1, angle );
};
}(),
/**
* @function
* @desc 对象延任意坐标轴(参数axis)移动指定距离(参数distance)
* @param {THREE.Vector3} axis 平移轴
* @param {float} distance 平移距离
* @return {THREE.Object3D}
*/
translateOnAxis: function () {
// translate object by distance along axis in object space 对象空间中沿轴的距离转换对象
// axis is assumed to be normalized
var v1 = new Vector3();
return function translateOnAxis( axis, distance ) {
return this;
};
}(),
/**
* 对象延X轴⽅向移动距离为（distance）
*/
translateX: function () {
var v1 = new Vector3( 1, 0, 0 );
return function translateX( distance ) {
anslateOnAxis( v1, distance );
};
}(),
/**
* 对象延Y轴⽅向移动距离为（distance）
*/
translateY: function () {
var v1 = new Vector3( 0, 1, 0 );
return function translateY( distance ) {

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。