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

回复

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

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

1.UI界面

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

效果图

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

实现代码如下：

HTML部分

<div id="div3d">
<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

效果图

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

html代码

<div id="div3d"></div>
<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

效果图

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

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

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

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

[发布] ThingJS3DMarker标记在可视化场景中的使用

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

相关帖子