商域无疆 (http://blog.csdn.net/omni360/)
本文遵循“署名-非商业用途-保持一致”创作公用协议
转载请保留此句：商域无疆 - 本博客专注于 敏捷开发及移动和物联设备研究：数据可视化、GOLANG、Html5、WEBGL、THREE.JS，否则，出自本博客的文章拒绝转载或再转载，谢谢合作。
俺也是刚开始学,好多地儿肯定不对还请见谅.
以下代码是THREE.JS 源码文件中objects/Line.js文件的注释.
更多更新在 : https://github.com/omni360/three.js.sourcecode
/**
* @author mrdoob / http://mrdoob.com/
*/
/*
///Line对象,创建一条线,或者一组线.
/// 用法:var geometry = new THREE.Geometry(); //创建geometry对象
/// var material = new THREE.LineBasicMaterial({color: 0xffff00}); //创建材质对象,这里有专门适用于line对象的材质对象LineBasicMaterial.
/// geometry.verteces.push(new THREE.Vector3(-10,0,0), //为geometry对象添加verteces顶点数据
/// new THREE.Vector3(0,10,0),
/// new THREE.Vector3(10,0,0)
/// );
/// var line = new THREE.Mesh(geometry, material,THREE.LineStrip); //通过geometry的顶点数据创建材质为material,类型为THREE.LineStrip(不闭合的折线)的线.
/// scene.add(line); //将线添加到场景中.
*/
///<summary>Line</summary>
///<param name ="geometry" type="THREE.Geometry">Geometry对象(灯笼的框架)</param>
///<param name ="material" type="THREE.Material">Material对象(材质对象)</param>
///<param name ="type" type="线类型常量">线类型常量,有不闭合折线(THREE.LineStrip),多组双顶点线段(THREE.LinePieces)</param>
///<returns type="Mesh">返回Line对象</returns>
THREE.Line = function ( geometry, material, type ) {
THREE.Object3D.call( this ); //调用Object3D对象的call方法,将原本属于Object3D的方法交给当前对象Line来使用.
this.geometry = geometry !== undefined ? geometry : new THREE.Geometry(); //将参数geometry赋值给line对象的geometry属性
this.material = material !== undefined ? material : new THREE.LineBasicMaterial( { color: Math.random() * 0xffffff } ); //将参数material赋值给line对象的material属性,如果没有传递material参数,将创建随机颜色材质,赋值给当前mesh对象
this.type = ( type !== undefined ) ? type : THREE.LineStrip; //将参数type赋值给line对像的type属性,如果没有传递type参数,默认初始化为THREE.LineStrip类型.
};
THREE.LineStrip = 0; //不闭合折线
THREE.LinePieces = 1; //多组双顶点线段
//TODO: 缺少THREE.LineLoop //闭合折线.
/*************************************************
****下面是Line对象的方法属性定义,继承自Object3D
**************************************************/
THREE.Line.prototype = Object.create( THREE.Object3D.prototype );
/*
///raycast方法用来获得当前对象与射线（参数raycaster）的交点.raycaster.intersectObject会调用这个方法。主要是用来进行碰撞检测,
/// 在选择场景中的对象时经常会用到,判断当前鼠标是否与对象重合用来选择对象.
/// NOTE：raycast方法中参数intersects参数用来存储交点的集合，格式如下
/// intersects.push( {
///
/// distance: distance,
/// point: intersectionPoint,
/// face: null,
/// faceIndex: null,
/// object: this
///
/// } );
///
*////<summary>raycast</summary>
///<param name ="raycaster" type="THREE.Raycaster">射线对象</param>
///<param name ="intersects" type="ObjectArray">交点的属性集合</param>
///<returns type="ObjectArray">交点的属性集合</returns>
THREE.Line.prototype.raycast = ( function () {
var inverseMatrix = new THREE.Matrix4();
var ray = new THREE.Ray();
var sphere = new THREE.Sphere();
return function ( raycaster, intersects ) {
var precision = raycaster.linePrecision; //射线和Line对象相交的精度因子。
var precisionSq = precision * precision; //精度因子的平方
var geometry = this.geometry;
if ( geometry.boundingSphere === null ) geometry.computeBoundingSphere(); //确保boundingSphere属性不为null
// Checking boundingSphere distance to ray
//检查线段的球体界限到射线的距离
sphere.copy( geometry.boundingSphere );
sphere.applyMatrix4( this.matrixWorld );
if ( raycaster.ray.isIntersectionSphere( sphere ) === false ) { //如果几何体的球体界限与射线不想交
return; //返回
}
inverseMatrix.getInverse( this.matrixWorld ); //获得当前对象的this.matrixWorld属性的逆矩阵
ray.copy( raycaster.ray ).applyMatrix4( inverseMatrix ); //给射线对象的原点,方向,乘以逆矩阵,
/* if ( geometry instanceof THREE.BufferGeometry ) {
} else */ if ( geometry instanceof THREE.Geometry ) {
var vertices = geometry.vertices;
var nbVertices = vertices.length;
var interSegment = new THREE.Vector3();
var interRay = new THREE.Vector3();
var step = this.type === THREE.LineStrip ? 1 : 2;
for ( var i = 0; i < nbVertices - 1; i = i + step ) { //如果是不闭合折线,每次自变量+1,如果是多组双顶点线段,自变量每次+2
var distSq = ray.distanceSqToSegment( vertices[ i ], vertices[ i + 1 ], interRay, interSegment ); //distanceSqToSegment方法将返回有参数vertices[ i ], vertices[ i + 1 ]组成的线段到当前射线的最小距离.interRay, interSegment,分别用来存储在射线上和在线段上的垂足
if ( distSq > precisionSq ) continue; //如果最小距离大于精度因子,退出循环.
var distance = ray.origin.distanceTo( interRay ); //射线原点到射线到线段的垂足的距离.
if ( distance < raycaster.near || distance > raycaster.far ) continue; //如果距离小于射线的近端,或大于射线的远端,跳出循环
intersects.push( { //将相交的对象,顶点索引,距离,交点保存到intersects属性数组中
distance: distance, //距离
// What do we want? intersection point on the ray or on the segment??
// 我们要什么,交点在射线上或者在线段上
// point: raycaster.ray.at( distance ), 如果要在射线上,那就将raycaster.ray.at( distance )的赋值给point
point: interSegment.clone().applyMatrix4( this.matrixWorld ), //如果想要获得交点在线段的位置,将interSegment.clone().applyMatrix4( this.matrixWorld )赋值给point
face: null, //面
faceIndex: null, //面所在属性数组中的索引
object: this //对象
} );
}
}
};
}() );
/*clone方法
///clone方法克隆一个Line网格对象.
*/
///<summary>clone</summary>
///<param name ="object" type="Object3D">接收克隆的Object3D对象</param>
///<returns type="Ray">返回Line网格对象.</returns>
THREE.Line.prototype.clone = function ( object ) {
if ( object === undefined ) object = new THREE.Line( this.geometry, this.material, this.type );
THREE.Object3D.prototype.clone.call( this, object ); //继承Object3D的clone方法
return object; //返回Mesh网格对象.
};
商域无疆 (http://blog.csdn.net/omni360/)
本文遵循“署名-非商业用途-保持一致”创作公用协议
转载请保留此句：商域无疆 - 本博客专注于 敏捷开发及移动和物联设备研究：数据可视化、GOLANG、Html5、WEBGL、THREE.JS，否则，出自本博客的文章拒绝转载或再转载，谢谢合作。
以下代码是THREE.JS 源码文件中objects/Line.js文件的注释.
更多更新在 : https://github.com/omni360/three.js.sourcecode
时间： 2024-10-19 12:04:40