ThingJs3DMarker标记在可视化场景中的使用

总结一下ThingJs的常用Marker使用及不同类型之间的区别

Marker 是3D场景内的标记，往往用于顶牌，可以传入div, image或canvas写文字，可以拾取、跟随物体、和物体一并删除

1.UI界面

UI界面，直接采用dom元素做界面，主要职责是要更新位置，根本就没有新THREE的Object产生，完全是同步；

效果图

实现代码如下：

HTML部分

 <!-- 3D场景容器 -->
 <div id="div3d">
    <!-- UI界面 -->
     <div id="buildMarker" class="loadview">
         <img src="img/normalLocation.png" alt="定位图标">
         <span class="buildName"></span>
     </div>
 </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('buildMarker')
        });
        $('#buildMarker .buildName').text(build.type);
    })
});

注释：首先要加载3D场景，然后创建UI界面

属性解析：pivot是UI界面的特殊属性，可以设置UI界面在场景中的重心，

                 el属性，绑定dom元素

                 type类型，设置成UI

注意：UI界面在3D场景中，不会跟随场景的缩放而改变自身的尺寸，所以不太适合做顶牌使用。

2.Marker标记，type类型设置成Marker

1>可以插入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元素

2>可以插入image的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
        })
    })
});

3>可以插入canvas的Marker

效果图

HTML部分

<div id="div3d"></div>
<!-- 创建marker的canvas容器 -->
<div id="canvas"></div>

JS部分

//创建marker
app.buildings.forEach(build => {
    var marker2 = app.create({
        type: "Marker",
        offset: [0, 3, 0],
        size: 8,
        canvas: createTextCanvas('建筑：' + build.id),
        parent: build
    })
})
});
// 绘制canvas
function createTextCanvas(text) {
    let width =  text.length * 48;
    let canvas = document.createElement("canvas");
    canvas.width = width;
    canvas.height = 120;
    const ctx = canvas.getContext("2d");
    ctx.fillStyle = "rgba(0,0,0,0.3)";
    ctx.fillRect(0,0,width,50);
    ctx.fill();
    ctx.font = "46px 微软雅黑";
    ctx.fillStyle = '#fff';
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.fillText(text, width/2, 25);
    return canvas;
}

属性解析：canvas：传入绘制好的图形

注释：canvas类型的marker，目前不支持绘制时插入图片

UI界面与Marker的区别

相同点：都可以跟随场景的转动，内容朝向屏幕

不同点：UI界面，在场景缩放的时，不能同时改变自身的尺寸，Marker可以跟随场景缩放而改变自身的尺寸

Marker与UI的常用属性

属性	属性值	解析
type	UI/Marker	创建类型
pivot	[x, y]	设置Marker或UI的重心
offset	[x, y, z]	相对父物体的偏移量
size	number	默认值是1
parent	THING.BaseObject	父物体
scale	[x, y, z]	缩放，默认值是[1, 1, 1]
keepSize	true/false	是否保持尺寸不变
visible	true/false	是否显示隐藏
方法	类型	解析
destroy	function	销毁marker或UI