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

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

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

第一步加載數(shù)字孿生可視化場(chǎng)景；第二步設(shè)置好兩個(gè)攝像機(jī)位置、距離、角度等;第三步添加小地圖控件；第四步根據(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è)置攝像機(jī)距離范圍[最小值, 最大值] app.camera.xAngleLimitRange = [10, 80];// 限制攝像機(jī)俯仰角[最小值，最大值] // 設(shè)置攝像機(jī)位置和目標(biāo)點(diǎn) 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)點(diǎn)擊關(guān)閉按鈕時(shí)，小地圖 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/