Skip to content
章节导航

通过传入参数生成直线+曲线的路径

js
/**
 * @description: 通过传入对应的参数生成路径
 * @param {Array<{type: String, curve: Array<object>, closed?: Boolean, curveType?: String, tension?: Float}>} pathList - 路径列表
 * @return {Object} THREE.CurvePath
 */
export function createCurvePath(pathList, name = '暂无') {
  // {type:[new THREE.Vector3()]}
  // 创建样条曲线,作为运动轨迹
  let curvePath = new THREE.CurvePath();
  pathList.forEach((item) => {
    if (item.type === 'line') {
      createLine(item.curve, curvePath);
    } else if (item.type === 'CatmullRom') {
      createCatmullRom(item, curvePath);
    } else if (item.type === 'QuadraticBezier') {
      createQuadraticBezier(item.curve, curvePath);
    } else if (item.type === 'CubicBezier') {
      createCubicBezier(item.curve, curvePath);
    } else {
      throw new Error('Invalid curve type');
    }
  });
  const geometry = new THREE.BufferGeometry().setFromPoints(curvePath.getPoints(5000));
  // 材质对象
  const material = new THREE.LineBasicMaterial({
    color: 'blue',
  });
  // 线条模型对象
  const line = new THREE.Line(geometry, material);
  line.name = name;
  window.trunkFloatLineObj.add(line); // 线条对象添加到场景中
  return curvePath;
}

/**
 * @description: 生成直线轨迹并添加到curvePath中
 * @param {Array<object>} curve - 直线路径列表
 * @param {Array} curvePath - 生成的路线存储位置
 * @return {*}
 */
function createLine(curve, curvePath) {
  if (curve.length < 2) {
    return;
  }
  curvePath.add(new THREE.LineCurve3(...curve.slice(0, 2)));
  createLine(curve.slice(1), curvePath);
}

/**
 * @description: 生成曲线轨迹并添加到curvePath中
 * @param {Object<type: String, curve: Array<object>, closed?: Boolean, curveType?: String, tension?: Float>} item - 曲线路径类型、列表等
 * @param {Array} curvePath - 生成的路线存储位置
 * @return {*}
 */
function createCatmullRom(item, curvePath) {
  curvePath.add(new THREE.CatmullRomCurve3(item.curve, item.closed, item.curveType, item.tension));
}

/**
 * @description: 生成三维二次贝塞尔曲线轨迹并添加到curvePath中
 * @param {Array<object>} curve - 三维二次贝塞尔曲线路径列表
 * @param {Array} curvePath - 生成的路线存储位置
 * @return {*}
 */
function createQuadraticBezier(curve, curvePath) {
  if (curve.length < 3) {
    return;
  }
  curvePath.add(new THREE.QuadraticBezierCurve3(...curve.slice(0, 3)));
  createQuadraticBezier(curve.slice(2), curvePath);
}

/**
 * @description: 生成三维三次贝塞尔曲线轨迹并添加到curvePath中
 * @param {Array<object>} curve - 三维三次贝塞尔曲线路径列表
 * @param {Array} curvePath - 生成的路线存储位置
 * @return {*}
 */
function createCubicBezier(curve, curvePath) {
  if (curve.length < 4) {
    return;
  }
  curvePath.add(new THREE.CubicBezierCurve3(...curve.slice(0, 4)));
  createCubicBezier(curve.slice(3), curvePath);
}

此函数需要传入的参数格式,以下是生成直线的示例,还可以根据此格式生成直线+曲线示例或曲线示例等等

js
export const northTotalCurve = [
  // NorthLoader
  // 第一条线
  [
    {
      type: 'line',
      curve: [
        new THREE.Vector3(-271939.26880017394, 1093.2702551998507, 424862.2269652648),
        new THREE.Vector3(-273984.9265795111, 1071.2968905048122, 422517.9575572271),
      ],
    },
  ],
  [
    {
      type: 'line',
      curve: [
        new THREE.Vector3(-274112.7062427171, 1078.7491532903762, 422283.0686944429),
        new THREE.Vector3(-274031.73066986457, 1078.7491532903762, 420868.1861210554),
      ],
    },
  ],
  [
    {
      type: 'line',
      curve: [
        new THREE.Vector3(-273947.36161539267, 1078.7491532903762, 420686.04175192135),
        new THREE.Vector3(-273255.657166917, 1095.3167387409137, 420082.44670946576),
        new THREE.Vector3(-272304.84902066854, 796.1131391839217, 419246.62626390305),
        new THREE.Vector3(-271482.92603835074, 500.1492306380611, 418523.737537866),
      ],
    },
  ],
  [
    {
      type: 'line',
      curve: [
        new THREE.Vector3(-271394.79884458386, 512.4290263540895, 418443.8679960754),
        new THREE.Vector3(-268598.46789377957, 512.4290263540895, 416014.98314573214),
      ],
    },
  ],
  [
    {
      type: 'line',
      curve: [
        new THREE.Vector3(-268412.1175461058, 512.4290263540895, 415848.0161488082),
        new THREE.Vector3(-267013.7816994299, 512.4290263540895, 414623.6293262839),
      ],
    },
  ],
]