PathTracker與ObjectTracker完整使用指南詳情 - 3d,javascript,three.js xxx 博客

PathTracker與ObjectTracker完整使用指南

在3D地圖可視化場景中，相機控制和對象追蹤是核心功能。mapv-three提供了兩個強大的追蹤器：PathTracker（路徑追蹤器）和ObjectTracker（對象追蹤器）。本文將深入解析這兩個組件的使用方法，幫助開發者快速掌握相機追蹤和對象追蹤技術。

一、PathTracker：路徑追蹤器

PathTracker用於沿指定路徑進行相機或對象的動畫追蹤。它支持多種路徑數據格式，可以設置不同的視圖模式來實現各種追蹤效果。

1.1 基本用法

沿路徑追蹤相機

最基本的用法是讓相機沿着路徑移動：

// 創建路徑追蹤器
const tracker = engine.add(new mapv-three.PathTracker());

// 設置路徑數據（座標數組格式）
tracker.track = [
    [112.368264, 23.176959, 38.553634],
    [112.370264, 23.178959, 40.553634],
    [112.372264, 23.180959, 42.553634]
];

// 開始追蹤
tracker.start({
    duration: 10000,  // 持續時間（毫秒）
    pitch: 60,        // 俯仰角
    range: 100        // 距離
});

讓3D模型沿路徑移動

除了追蹤相機，PathTracker還可以讓3D對象沿着路徑移動：

// 創建3D模型
const model = engine.add(new mapv-three.SimpleModel({
    url: 'path/to/model.glb'
}));

// 創建路徑追蹤器
const tracker = engine.add(new mapv-three.PathTracker());
tracker.track = pathCoordinates;
tracker.object = model;  // 設置要追蹤的對象

// 開始追蹤
tracker.start({
    duration: 8000,
    range: 50
});

1.2 支持的路徑數據格式

PathTracker支持三種路徑數據格式，開發者可以根據數據源選擇最合適的格式。

座標數組格式

最簡單的格式，直接使用座標點數組：

tracker.track = [
    [lng1, lat1, alt1],
    [lng2, lat2, alt2],
    [lng3, lat3, alt3]
];

GeoJSON格式

支持標準的GeoJSON格式，可以包含額外的屬性信息：

tracker.track = {
    type: 'Feature',
    geometry: {
        type: 'LineString',
        coordinates: [
            [lng1, lat1, alt1],
            [lng2, lat2, alt2]
        ]
    },
    properties: {
        frameInfo: []  // 可選的幀信息
    }
};

幀信息數組格式

包含更豐富信息的格式，支持速度、時間、朝向等參數：

tracker.track = [
    {
        x: lng1, y: lat1, z: alt1,
        yaw: 1.57,      // 偏航角
        pitch: 0.7,     // 俯仰角
        speed: 10,      // 速度（米/秒）
        time: 1000      // 時間（毫秒）
    },
    // ... 更多點
];

1.3 視圖模式

PathTracker提供了多種視圖模式，滿足不同場景的需求。

跟隨模式（follow）

相機跟隨路徑方向，自動調整朝向：

tracker.track = pathData;
tracker.viewMode = 'follow';
tracker.start({
    duration: 7000,
    heading: 10,
    pitch: 70,
    range: 10
});

鎖定模式（lock）

相機保持固定角度，不隨路徑改變朝向：

tracker.track = pathData;
tracker.viewMode = 'lock';
tracker.start({
    duration: 50000,
    pitch: 70,
    range: 100
});

解鎖模式（unlock）

相機不鎖定，可以自由調整：

tracker.viewMode = 'unlock';
tracker.object = model;
tracker.start({
    duration: 50000,
    pitch: 70,
    range: 100
});

關鍵幀模式（keyFrame）

使用預定義的關鍵幀信息控制相機角度：

// 在GeoJSON的properties中添加frameInfo
pathData.properties.frameInfo = [
    { pitch: 0.7, yaw: 1.57, time: 1000 },
    { pitch: 0.9, yaw: 0, time: 2000 },
    { pitch: 1.2, yaw: 2, time: 3000 }
];

tracker.track = pathData;
tracker.viewMode = 'keyFrame';
tracker.start({
    range: 0
});

關鍵幀模式還支持瞄準點（aim）功能：

pathData.properties.frameInfo = [
    {
        aim: [lng, lat, alt],  // 瞄準點座標
        time: 1000
    }
];

活動幀模式（activeFrame）

類似於關鍵幀，但支持更靈活的插值：

tracker.track = pathData;
tracker.viewMode = 'activeFrame';
tracker.start({
    range: 0
});

1.4 高級配置

插值閾值控制

interpolateDirectThreshold參數控制路徑插值的平滑程度：

// 值越大，路徑拐角過渡越平滑，但也會越偏離實際路線
tracker.interpolateDirectThreshold = 100;

曲線插值

啓用曲線插值可以使路徑更加平滑：

tracker.pointHandle = 'curve';

暫停和恢復

支持暫停和恢復追蹤：

// 暫停追蹤
const stateInfo = tracker.pause();
console.log(stateInfo);

// 恢復追蹤
tracker.start();

// 重新播放
tracker.replay();

回調函數

提供多個生命週期回調：

tracker.onStart = () => {
    console.log('追蹤開始');
};

tracker.onUpdate = (state) => {
    console.log('狀態更新:', state);
};

tracker.onFinish = () => {
    console.log('追蹤完成');
};

二、ObjectTracker：對象追蹤器

ObjectTracker用於追蹤指定的3D對象或座標點，讓相機始終跟隨目標對象。

2.1 基本用法

追蹤3D模型

最常用的場景是追蹤一個3D模型：

// 創建3D模型
const model = engine.add(new mapv-three.SimpleModel({
    url: 'path/to/model.glb'
}));

// 創建對象追蹤器
const tracker = engine.add(new mapv-three.ObjectTracker());

// 開始追蹤
tracker.track(model, {
    range: 100,    // 距離100米
    pitch: 60,     // 俯仰角60度
    heading: 45    // 方位角45度
});

2.2 配置參數

ObjectTracker提供了豐富的配置選項：

tracker.track(object, {
    range: 100,        // 追蹤距離（米）
    pitch: 60,         // 俯仰角（度）
    heading: 45,       // 方位角（度）
    height: 50,        // 高度偏移（米）
    extraDir: 30,      // 額外方向修正角度（度）
    duration: 0,       // 持續時間（0表示持續追蹤）
    easing: 'linear',  // 緩動函數
    lock: true         // 是否鎖定視圖
});

參數説明

range/radius：相機與對象的距離，單位米
pitch：俯仰角，控制相機上下角度
heading：方位角，控制相機左右角度
height：高度偏移，在非地球模式下可以調整相機高度
extraDir：額外方向修正，用於微調相機朝向
duration：持續時間，0表示持續追蹤直到手動停止
easing：緩動函數，可選值：'linear'、'easeIn'、'easeOut'、'easeInOut'
lock：是否鎖定視圖，鎖定後相機角度固定

2.3 追蹤幀回調

ObjectTracker提供了追蹤幀回調，可以在每幀更新時執行自定義邏輯：

tracker.onTrackFrame = (lastState, currentState) => {
    console.log('追蹤狀態更新:', currentState);
    // 可以在這裏添加自定義邏輯
    // 例如：根據對象位置更新UI
    // 或者：觸發其他動畫效果
};

2.4 停止追蹤

停止追蹤並重置狀態：

tracker.stop();

三、聯合使用場景

在實際項目中，PathTracker和ObjectTracker經常需要聯合使用，實現更復雜的追蹤效果。

3.1 路徑追蹤 + 對象追蹤

讓對象沿路徑移動，同時相機追蹤對象：

// 創建模型
const model = engine.add(new mapv-three.SimpleModel({
    url: 'path/to/model.glb'
}));

// 創建路徑追蹤器（讓模型沿路徑移動）
const pathTracker = engine.add(new mapv-three.PathTracker());
pathTracker.track = pathData;
pathTracker.object = model;
pathTracker.viewMode = 'unlock';  // 解鎖視圖模式
pathTracker.start({
    duration: 50000,
    pitch: 70,
    range: 100
});

// 創建對象追蹤器（讓相機追蹤模型）
const objectTracker = engine.add(new mapv-three.ObjectTracker());
objectTracker.track(model, {
    pitch: 80,
    radius: 100,
    height: 100
});

重要提示：為了避免抖動，需要先初始化PathTracker，然後再初始化ObjectTracker。這是因為PathTracker會更新對象位置，如果先根據對象計算旋轉再更新對象，使用的就是上一幀的對象信息。

四、最佳實踐

4.1 性能優化

合理設置插值閾值：根據路徑複雜度調整interpolateDirectThreshold，避免過度平滑導致性能問題
使用合適的視圖模式：如果不需要動態調整角度，使用lock模式可以減少計算
及時停止追蹤：不需要追蹤時及時調用stop()方法

4.2 數據準備

路徑數據預處理：如果路徑點過多，可以預先進行抽稀處理
座標格式統一：確保所有座標使用相同的座標系和單位
幀信息優化：使用關鍵幀模式時，合理設置關鍵幀數量，避免過多導致卡頓

五、常見問題

5.1 追蹤抖動問題

問題：使用PathTracker和ObjectTracker聯合時出現抖動

解決方案：

確保先初始化PathTracker，再初始化ObjectTracker
調整interpolateDirectThreshold參數
檢查對象位置更新頻率

5.2 路徑格式不支持

問題：設置的路徑數據格式不被識別

解決方案：

檢查數據格式是否符合三種支持格式之一
確保座標數組格式正確：[[lng, lat, alt], ...]
GeoJSON格式需要包含geometry.type === 'LineString'

5.3 相機角度不正確

問題：相機角度不符合預期

解決方案：

檢查pitch和heading參數設置
使用viewMode控制視圖行為
在關鍵幀模式下檢查frameInfo數據

六、總結

PathTracker和ObjectTracker是mapv-three中強大的追蹤工具，它們可以單獨使用，也可以聯合使用，實現各種複雜的相機控制和對象追蹤效果。

關鍵要點：

PathTracker適合沿路徑移動的場景，支持多種數據格式和視圖模式
ObjectTracker適合追蹤固定對象的場景，配置簡單靈活
聯合使用時需要注意初始化順序，避免抖動問題
合理使用配置參數和回調函數，可以優化性能和用户體驗

參考：

https://www.npmjs.com/package/@baidumap/mapv-three?activeTab=...
https://lbsyun.baidu.com/jsapithree/tutorial/usage/PathTracker
https://lbsyun.baidu.com/jsapithree/tutorial/usage/ObjectTracker

博客 / 詳情