Threejs源码解析（Line3.js）

最新推荐文章于 2025-06-18 14:06:15 发布

原创最新推荐文章于 2025-06-18 14:06:15 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个三维线段类的实现细节，包括构造函数、坐标设置、克隆、拷贝、中心点计算等功能，并提供了距离计算、方向向量获取及矩阵变换等方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import { Vector3 } from './Vector3.js';
import { _Math } from './Math.js';

/**
 * @author bhouston / http://clara.io
 */
/**
 *  线段
 * @param start 开始位置
 * @param end 结束位置
 * @constructor
 */
function Line3( start, end ) {

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

}

Object.assign( Line3.prototype, {
    /**
     * @desc 根据start,end坐标值设置3维线段
     * @param {THREE.Vector3} start
     * @param {THREE.Vector3} end
     * @returns {THREE.Line3}
     */
   set: function ( start, end ) {

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

      return this;

   },
    /**
    * 克隆
     */
   clone: function () {

      return new this.constructor().copy( this );

   },
    /**
    * 拷贝
     * @param line
     * @returns {copy}
     */
   copy: function ( line ) {

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

      return this;

   },
    /**
    * 获取线段中心位置
     * @param target
     */
   getCenter: function ( target ) {

      if ( target === undefined ) {

         console.warn( 'THREE.Line3: .getCenter() target is now required' );
         target = new Vector3();

      }

      return target.addVectors( this.start, this.end ).multiplyScalar( 0.5 );

   },
    /**
    * 获取线段的向量
     * @param target
     * @returns {*|{!type, !doc}}
     */
   delta: function ( target ) {

      if ( target === undefined ) {

         console.warn( 'THREE.Line3: .delta() target is now required' );
         target = new Vector3();

      }

      return target.subVectors( this.end, this.start );

   },
    /**
    * 获取当前线段起点到结束点的点积
     * @returns {*|{!type, !doc}}
     */
   distanceSq: function () {

      return this.start.distanceToSquared( this.end );

   },
    /**
    * 获取当前起点到结束点的距离
     * @returns {*|{!type, !doc}}
     */
   distance: function () {

      return this.start.distanceTo( this.end );

   },
    /**
     * @desc 当前三维线段方向的任意向量<br />
     * @param {float} t [0,1] 当t=0,返回起点向量,当t=1返回结束点向量
     * @param {THREE.Vector3} optionalTarget
     * @returns {THREE.Vector3}
     */
   at: function ( t, target ) {

      if ( target === undefined ) {

         console.warn( 'THREE.Line3: .at() target is now required' );
         target = new Vector3();

      }

      return this.delta( target ).multiplyScalar( t ).add( this.start );

   },
    /**
     * @function
     * @desc 返回一个基于点投影到线段上点的参数(就是参数point投影到线段的位置)
     * @param {THREE.Vector3} point
     * @param {boolean} clampToLine  为true，那么返回值将是0和1之间
     * @return {float}
     */
   closestPointToPointParameter: function () {

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

      return function closestPointToPointParameter( 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 = _Math.clamp( t, 0, 1 );

         }

         return t;

      };

   }(),
    /**
     * @desc 返回一个基于点投影到线段上的向量
     * @param {THREE.Vector3} point
     * @param {boolean} clampToLine 为true，那么返回的向量在线段起始点和结束点之间。
     * @param {THREE.Vector3} optionalTarget
     * @returns {*|THREE.Vector3}
     */
   closestPointToPoint: function ( point, clampToLine, target ) {

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

      if ( target === undefined ) {

         console.warn( 'THREE.Line3: .closestPointToPoint() target is now required' );
         target = new Vector3();

      }

      return this.delta( target ).multiplyScalar( t ).add( this.start );

   },
    /**
     * @desc 线段的起始点,结束点应用矩阵变换.达到旋转,缩放,移动的目的
     * @param {THREE.Matrix3} matrix
     * @returns {THREE.Line3}
     */
   applyMatrix4: function ( matrix ) {

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

      return this;

   },
    /**
    * 判断三维线段是否相等
     * @param line
     * @returns {*}
     */
   equals: function ( line ) {

      return line.start.equals( this.start ) && line.end.equals( this.end );

   }

} );


export { Line3 };