總結一下ThingJs的常用Marker使用及不同型別之間的區別

Marker 是3D場景內的標記，往往用於頂牌，可以傳入div, image或canvas寫文字，可以拾取、跟隨物體、和物體一併刪除

1.UI介面

UI介面，直接採用dom元素做介面，主要職責是要更新位置，根本就沒有新THREE的Object產生，完全是同步；

效果圖

實現程式碼如下：

HTML部分

 <!-- 3D場景容器 -->
 <div id="div3d"></div>
 <!-- 3D場景建築頂marker -->
 <div id="buildMarker" class="loadview">
     <img src="img/normalLocation.png" alt="定點陣圖標">
     <span class="buildName"></span>
  </div>
 

註釋：html程式碼部分，需要建立一個3D場景容器，UI型別的3D介面，是可以用html程式碼編寫的。

JS部分

//3D場景載入
var app = new THING.App({
    container: 'div3d',
    url: 'https://www.thingjs.com/static/models/storehouse',
    skyBox: 'BlueSky'
});
// 建立elem元素
function create_element(id) {
    var srcElem = document.getElementById(id);
    var newElem = srcElem.cloneNode(true);
    newElem.style.display = "block";
    app.domElement.insertBefore(newElem, srcElem);
    return newElem;
}
//場景載入
app.on('load', function () {
    app.buildings.forEach(build => {
        //建立UI介面
        var marker = app.create({
            type: "UI",
            offset: [0, 5, 0],
            size: 4,
            parent: build,
            pivot: [0.5, 1],
            el: create_element('board')
        });
        $('#board .buildName').text(build.type);
    })
});
 

註釋：首先要載入3D場景，然後建立UI介面

屬性解析：pivot是UI介面的特殊屬性，可以設定UI介面在場景中的重心，

                 el屬性，繫結dom元素

                 type型別，設定成UI

注意：UI介面在3D場景中，不會跟隨場景的縮放而改變自身的尺寸，所以不太適合做頂牌使用。

2.Marker標記，type型別設定成Marker

可以傳入HTML的Marker

效果圖

HTML部分

<!-- 3D場景容器 -->
<div id="div3d"></div>
<!-- 3D場景建築頂marker -->
<div id="buildMarker" class="loadview">
    <img src="img/normalLocation.png" alt="定點陣圖標">
    <span class="buildName"></span>
</div>
 

JS部分

//3D場景載入
app = new THING.App({
    container: 'div3d',
    url: 'https://www.thingjs.com/static/models/storehouse',
    skyBox: 'BlueSky'
});
//場景載入
app.on('load', function (ev) {
    var buildings = app.buildings;
    buildings.forEach(function (building) {
        $('#buildMarker .buildName').text('建築ID：' + building.id);
        // 建立Marker
        var buildingMarker = app.create({
            type: "Marker",
            offset: [0, 5, 0],
            size: 4,
            parent: building,
            element: document.getElementById('buildMarker'),
        });
    })
});

屬性分析：element：掛架dom元素

                  parent：設定marker的父類

注意：可插入dom元素的marker，可以根據domElement屬性，獲取掛架的 DOM 元素，動態控制dom元素

可以傳入url的marker

效果圖

JS部分

//場景載入
app.on('load', function () {
    app.buildings.forEach(build => {
        var marker2 = app.create({
            type: "Marker",
            offset: [0, 3, 0],
            size: 2,
            url: "https://thingjs.com/static/images/reminder.png",
            parent: build
        })
    })
});