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

liuwei000000 18天前 95

总结一下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>

JavaScript代码

//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


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可以跟随场景缩放而改变自身的尺寸


最新回复 (0)

你可以在 登录 or 注册 后,对此帖发表评论!

返回