Appearance
通过传入参数生成直线+曲线的路径
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),
],
},
],
]