眾所周知，小地圖在游戲中是至關(guān)重要的，小地圖用于顯示周圍環(huán)境信息。在數(shù)字孿生可視化場景中小地圖也是經(jīng)常應(yīng)用于場景中的，用來顯示地圖或者當(dāng)前場景的視角。首先，小地圖是以主角為中心的。其次，小地圖上應(yīng)該用圖標(biāo)來代替真實的人物或者物體模型，因為小地圖通常很小，可能無法看清真實的模型。

創(chuàng)建小地圖的方法網(wǎng)上有很多種，這里我使用ThingJS來實現(xiàn)數(shù)字孿生可視化場景的小地圖的功能，可以用來顯示地圖或者當(dāng)前數(shù)字孿生可視化場景的視角，方便而且不需要使用額外的插件。 ThingJS 中使用系統(tǒng)內(nèi)置的控件集成一些功能應(yīng)用的開發(fā)，也可自定義開發(fā)控件來對一些功能模塊進行封裝。

大多數(shù)小地圖都是方形的，所以本文也將在數(shù)字孿生可視化場景中創(chuàng)建方形小地圖。原理很簡單就是在數(shù)字孿生可視化場景中創(chuàng)建兩個相機，然后把相機1的位置傳給相機2。通常小地圖周圍還會根據(jù)需求添加一些按鈕和標(biāo)簽。

第一步加載數(shù)字孿生可視化場景；第二步設(shè)置好兩個攝像機位置、距離、角度等;第三步添加小地圖控件；第四步根據(jù)需要添加按鈕。

具體代碼如下：

var app = new THING.App({ url: 'https://www.thingjs.com/static/models/storehouse'});var control;app.on('load', function () { app.camera.distanceLimited = [0, 50];// 設(shè)置攝像機距離范圍[最小值, 最大值] app.camera.xAngleLimitRange = [10, 80];// 限制攝像機俯仰角[最小值，最大值] // 設(shè)置攝像機位置和目標(biāo)點 app.camera.position = [-21.874885906496672, 25.144446501358352, 32.15174699792633]; app.camera.target = [1.074795849331875, 0.9467607412215804, 2.8844752703106087]; new THING.widget.Button('添加控件', add_control); new THING.widget.Button('重置', remove_control);}); /** * 添加控件 */function add_control() { if (control) return; control = new THING.MiniMapControl({ width: 200, height: 200, position: THING.CornerType.RightBottom, opacity: 0.8, cameraViewImg: 'https://www.thingjs.com/static/images/minimap1.png', cameraCenterImg: 'https://www.thingjs.com/static/images/minimap0.png', // hasClose: true, // 是否有關(guān)閉按鈕（默認(rèn)沒有）當(dāng)點擊關(guān)閉按鈕時，小地圖 enable 為 false // closeBtnImg: 'https://www.thingjs.com/static/images/minimap2.png' }) // 添加小地圖控件 app.addControl(control);} /** * 刪除控件 */function remove_control() { if (control) { app.removeControl(control); control = null; // control.minimap.enable = !control.minimap.enable; // 顯示、隱藏小地圖 }}

—————————————————

數(shù)字孿生可視化：https://www.thingjs.com/