three.js 源代码凝视(十)Math/Line3.js

商域无疆 (http://blog.csdn.net/omni360/)

本文遵循“署名-非商业用途-保持一致”创作公用协议

转载请保留此句:商域无疆 -  本博客专注于 敏捷开发及移动和物联设备研究:数据可视化、GOLANG、Html5、WEBGL、THREE.JS,否则,出自本博客的文章拒绝转载或再转载,谢谢合作。

俺也是刚開始学,好多地儿肯定不正确还请见谅.

下面代码是THREE.JS 源代码文件里Math/Line3.js文件的凝视.

很多其它更新在 : https://github.com/omni360/three.js.sourcecode/blob/master/Three.js

// File:src/math/Line3.js

/**
 * @author bhouston / http://exocortex.com
 */
/*
///Line3对象的构造函数.用来创建一个三维线段对象.Line3对象的功能函数採用
///定义构造的函数原型对象来实现.
///
///	使用方法: var start = new Vector3(0,0,0),end = new Vector3(1,1,1); var line = new Line3(start,end);
///	创建一个起始点start为0,0,0,结束点end为1,1,1的线段.
*/
///<summary>Vector3</summary>
///<param name ="start" type="Vector3">起始点坐标</param>
///<param name ="end" type="Vector3">结束点坐标</param>
THREE.Line3 = function ( start, end ) {

	this.start = ( start !== undefined ) ? start : new THREE.Vector3();
	this.end = ( end !== undefined ) ? end : new THREE.Vector3();

};

/****************************************
****以下是Line3对象提供的功能函数.
****************************************/
THREE.Line3.prototype = {

	constructor: THREE.Line3,		//构造器

	/*
	///set方法用来从新设置三维线段的起始点,结束点,start,end坐标值.并返回新的坐标值的三维线段.
	*/
	///<summary>set</summary>
	///<param name ="start" type="Vector3">起始点坐标</param>
	///<param name ="end" type="Vector3">结束点坐标</param>
	///<returns type="Line3">返回新坐标值的三维线段</returns>
	set: function ( start, end ) {

		this.start.copy( start );
		this.end.copy( end );

		return this;		//返回新坐标值的三维线段

	},

	/*
	///copy方法用来复制三维线段的起始点,结束点,start,end坐标值.并返回新的坐标值的三维线段.
	*/
	///<summary>copy</summary>
	///<param name ="line" type="Line3">三维线段</param>
	///<returns type="Line3">返回新坐标值的三维线段</returns>
	copy: function ( line ) {

		this.start.copy( line.start );
		this.end.copy( line.end );

		return this;	//返回新坐标值的三维线段

	},

	/*
	///center方法用来获得线段的中点.
	/// NOTE:optionalTarget是可选參数,假设没有设置,系统自己主动创建一个暂时Vector3对象
	*/
	///<summary>center</summary>
	///<param name ="optionalTarget" type="Vector3">optionalTarget是可选參数,假设没有设置,系统自己主动创建一个暂时Vector3对象</param>
	///<returns type="Line3">返回三维线段中点坐标</returns>
	center: function ( optionalTarget ) {

		var result = optionalTarget || new THREE.Vector3();			//optionalTarget是可选參数,假设没有设置,系统自己主动创建一个暂时Vector3对象
		return result.addVectors( this.start, this.end ).multiplyScalar( 0.5 );		//返回三维线段中点坐标

	},

	/*
	///delta方法用来获得线段的向量,然后在通过矩阵应用各种便变换,放大缩小,移动等.
	/// NOTE:optionalTarget是可选參数,假设没有设置,系统自己主动创建一个暂时Vector3对象
	/// NOTE:向量就是有向线段这句是错的,由于有向线段是固定的,即不能平移,而向量是能够平移的
	*/
	///<summary>delta</summary>
	///<param name ="optionalTarget" type="Vector3">optionalTarget是可选參数,假设没有设置,系统自己主动创建一个暂时Vector3对象</param>
	///<returns type="Line3">返回三维线段的向量</returns>
	delta: function ( optionalTarget ) {

		var result = optionalTarget || new THREE.Vector3();		//optionalTarget是可选參数,假设没有设置,系统自己主动创建一个暂时Vector3对象
		return result.subVectors( this.end, this.start );		//返回三维线段的向量

	},

	/*
	///distanceSq方法用来获得当前三维线段起始点到端点的点积(点乘,数量积)(仅仅读).
	/// NOTE:关于点积的介绍參考维基百科:http://zh.wikipedia.org/wiki/%E6%95%B0%E9%87%8F%E7%A7%AF
	*/
	///<summary>distanceSq</summary>
	///<returns type="Vector">返回当前三维线段起始点到端点的点积(点乘,数量积)</returns>
	distanceSq: function () {

		return this.start.distanceToSquared( this.end );	//返回当前三维线段起始点到端点的点积(点乘,数量积)

	},

	/*
	///distanceTo方法将返回当前三维线段起始点到端点的的距离(仅仅读).
	*/
	///<summary>distanceTo</summary>
	///<returns type="Number">返回当前三维线段起始点到端点的距离(仅仅读).</returns>
	distance: function () {

		return this.start.distanceTo( this.end );	//返回当前三维线段起始点到端点的距离(仅仅读).

	},

	/*
	///at方法将返回沿当前三维线段方向的随意向量,当t=0,返回起点向量,当t=1返回结束点向量.
	/// NOTE:optionalTarget是可选參数,假设没有设置,系统自己主动创建一个暂时Vector3对象
	*/
	///<summary>at</summary>
	///<param name ="t" type="Number">数值,取值范围0-1</param>
	///<param name ="optionalTarget" type="Vector3">optionalTarget是可选參数,假设没有设置,系统自己主动创建一个暂时Vector3对象</param>
	///<returns type="Line3">返回沿当前三维线段方向的随意向量/returns>
	at: function ( t, optionalTarget ) {

		var result = optionalTarget || new THREE.Vector3();	//optionalTarget是可选參数,假设没有设置,系统自己主动创建一个暂时Vector3对象

		return this.delta( result ).multiplyScalar( t ).add( this.start );	//返回沿当前三维线段方向的随意向量

	},

	/*
	///closestPointToPointParameter方法将返回一个基于点投影到线段上点的參数(就是參数point投影到线段的位置)。假设參数clampToLine为真,那么返回值将是0和1之间。
	*/
	///<summary>closestPointToPointParameter</summary>
	///<param name ="point" type="Vector3">数值,取值范围0-1</param>
	///<param name ="clampToLine" type="Boolean">假设參数clampToLine为真,那么返回值将是0和1之间。</param>
	///<returns type="Number">返回一个基于近期点投影到线段上点的參数/returns>
	closestPointToPointParameter: function () {

		var startP = new THREE.Vector3();
		var startEnd = new THREE.Vector3();

		return function ( point, clampToLine ) {

			startP.subVectors( point, this.start );
			startEnd.subVectors( this.end, this.start );

			var startEnd2 = startEnd.dot( startEnd );
			var startEnd_startP = startEnd.dot( startP );

			var t = startEnd_startP / startEnd2;

			if ( clampToLine ) {

				t = THREE.Math.clamp( t, 0, 1 ); 	//调用THREE.Math.clamp()方法保证t值在0-1之间.

			}

			return t;	//返回一个基于近期点投影到线段上点的參数(就是參数point投影到线段的位置)

		};

	}(),

	/*
	///closestPointToPoint方法将返回一个基于点投影到线段上的向量。假设參数clampToLine为真,那么返回的向量在线段起始点和结束点之间。
	/// NOTE:optionalTarget是可选參数,假设没有设置,系统自己主动创建一个暂时Vector3对象
	*/
	///<summary>closestPointToPoint</summary>
	///<param name ="point" type="Vector3">数值,取值范围0-1</param>
	///<param name ="clampToLine" type="Boolean">假设參数clampToLine为真,那么返回的向量在线段起始点和结束点之间。</param>
	///<param name ="optionalTarget" type="Vector3">optionalTarget是可选參数,假设没有设置,系统自己主动创建一个暂时Vector3对象</param>
	///<returns type="Number">返回一个基于近期点投影到线段上的向量/returns>
	closestPointToPoint: function ( point, clampToLine, optionalTarget ) {

		var t = this.closestPointToPointParameter( point, clampToLine );

		var result = optionalTarget || new THREE.Vector3();

		return this.delta( result ).multiplyScalar( t ).add( this.start );	//返回一个基于近期点投影到线段上的向量

	},

	/*
	///applyMatrix4方法对线段的起始点,结束点应用矩阵变换.达到旋转,缩放,移动的目的.
	*/
	///<summary>applyMatrix4</summary>
	///<param name ="m" type="Matrix4">仿射矩阵</param>
	///<returns type="Line3">返回新坐标值的三维线段</returns>
	applyMatrix4: function ( matrix ) {

		this.start.applyMatrix4( matrix );
		this.end.applyMatrix4( matrix );

		return this;	//返回新坐标值的三维线段

	},

	/*
	///equals方法将当前线段和參数line做对照,线段对照,就是起始点和结束点对照. 推断线段是否相等,返回true或者false.
	*/
	///<summary>equals</summary>
	///<param name ="line" type="Line3">作对照的线段</param>
	///<returns type="Boolean">返回true或者false</returns>
	equals: function ( line ) {

		return line.start.equals( this.start ) && line.end.equals( this.end );	//返回true或者false

	},

	/*clone方法
	///clone方法克隆一个三维线段对象.
	*/
	///<summary>clone</summary>
	///<returns type="Line3">返回三维线段对象</returns>
	clone: function () {

		return new THREE.Line3().copy( this );	//返回三维线段对象

	}

};

商域无疆 (http://blog.csdn.net/omni360/)

本文遵循“署名-非商业用途-保持一致”创作公用协议

转载请保留此句:商域无疆 -  本博客专注于 敏捷开发及移动和物联设备研究:数据可视化、GOLANG、Html5、WEBGL、THREE.JS,否则,出自本博客的文章拒绝转载或再转载,谢谢合作。

下面代码是THREE.JS 源代码文件里Math/Line3.js文件的凝视.

很多其它更新在 : https://github.com/omni360/three.js.sourcecode/blob/master/Three.js

时间: 2024-10-09 05:31:31

three.js 源代码凝视(十)Math/Line3.js的相关文章

three.js 源代码凝视(十六)Math/Frustum.js

商域无疆 (http://blog.csdn.net/omni360/) 本文遵循"署名-非商业用途-保持一致"创作公用协议 转载请保留此句:商域无疆 -  本博客专注于 敏捷开发及移动和物联设备研究:数据可视化.GOLANG.Html5.WEBGL.THREE.JS,否则,出自本博客的文章拒绝转载或再转载,谢谢合作. 俺也是刚開始学,好多地儿肯定不正确还请见谅. 下面代码是THREE.JS 源代码文件里Math/Frustum.js文件的凝视. 很多其它更新在 : https://g

three.js 源代码凝视(九)Math/Matrix4.js

商域无疆 (http://blog.csdn.net/omni360/) 本文遵循"署名-非商业用途-保持一致"创作公用协议 转载请保留此句:商域无疆 -  本博客专注于 敏捷开发及移动和物联设备研究:数据可视化.GOLANG.Html5.WEBGL.THREE.JS,否则,出自本博客的文章拒绝转载或再转载,谢谢合作. 今天把math库中最大的对象Matrix4凝视完了,发现之前好多的凝视理解的不太正确,还有好多的凝视由于马虎,好多小错误.能改的都在github上更新了,只是大概意思,

three.js 源代码凝视(七)Math/Euler.js

商域无疆 (http://blog.csdn.net/omni360/) 本文遵循"署名-非商业用途-保持一致"创作公用协议 转载请保留此句:商域无疆 -  本博客专注于 敏捷开发及移动和物联设备研究:数据可视化.GOLANG.Html5.WEBGL.THREE.JS,否则,出自本博客的文章拒绝转载或再转载,谢谢合作. 下面代码是THREE.JS 源代码文件里Math/Quaternion.js文件的凝视. 很多其它更新在 : https://github.com/omni360/th

three.js 源码注释(十)Math/Line3.js

商域无疆 (http://blog.csdn.net/omni360/) 本文遵循"署名-非商业用途-保持一致"创作公用协议 转载请保留此句:商域无疆 -  本博客专注于 敏捷开发及移动和物联设备研究:数据可视化.GOLANG.Html5.WEBGL.THREE.JS,否则,出自本博客的文章拒绝转载或再转载,谢谢合作. 俺也是刚开始学,好多地儿肯定不对还请见谅. 以下代码是THREE.JS 源码文件中Math/Line3.js文件的注释. 更多更新在 : https://github.

js 技巧 (十)广告JS代码效果大全 【1】

广告JS代码效果大全 1.[普通效果]     现在很多网站广告做的如火如荼,现在我就来介绍一下常见的对联浮动广告效果的代码使用方法,介绍的这种效果,在1024*768分辨率下正常显示,在800*600的分辨率下可以自动隐藏,以免遮住页面影响访问者浏览内容,下面就是实现效果所需代码: var delta=0.015 var collection;     function floaters() {     this.items = [];     this.addItem = function(

js 技巧 (十)广告JS代码效果大全 【3】

3.[允许关闭]     与前面两个代码不同的是,广告图下方增加了一个图片按纽,允许访客点击关闭广告图片,下面文本框中就是实现效果所需代码: var delta=0.015;     var collection;     var closeB=false;     function floaters() {     this.items = [];     this.addItem = function(id,x,y,content)     {     document.write('<DI

js 技巧 (十)广告JS代码效果大全 【2】

2.[鼠标感应]     与前面一个代码不同的是,当鼠标移动到广告图片上是可以感应显示另外设置好的广告大图效果,下面就是实现效果所需代码: function bigshow(){     document.all.div_250.style.visibility = 'visible';     document.all.div_80.style.visibility = 'hidden';     }     function bighide(){     document.all.div_8

three.js 来源目光(十三)Math/Ray.js

商域无疆 (http://blog.csdn.net/omni360/) 本文遵循"署名-非商业用途-保持一致"创作公用协议 转载请保留此句:商域无疆 -  本博客专注于 敏捷开发及移动和物联设备研究:数据可视化.GOLANG.Html5.WEBGL.THREE.JS,否则,出自本博客的文章拒绝转载或再转载,谢谢合作. 俺也是刚開始学,好多地儿肯定不正确还请见谅. 下面代码是THREE.JS 源代码文件里Math/Ray.js文件的凝视. 很多其它更新在 : https://githu

three.js 源码注释(十四)Math/Sphere.js

商域无疆 (http://blog.csdn.net/omni360/) 本文遵循"署名-非商业用途-保持一致"创作公用协议 转载请保留此句:商域无疆 -  本博客专注于 敏捷开发及移动和物联设备研究:数据可视化.GOLANG.Html5.WEBGL.THREE.JS,否则,出自本博客的文章拒绝转载或再转载,谢谢合作. 俺也是刚开始学,好多地儿肯定不对还请见谅. 以下代码是THREE.JS 源码文件中Math/Sphere.js文件的注释. 更多更新在 : https://github