如何将dom元素放到marker对象中

回复

本帖最后由 yamazaki1201 于 2024-7-15 15:08 编辑

marker顶牌两种效果：
1：顶牌总是面向摄像头的（默认会开启精灵材质）；
2：顶牌固定在某个方向和位置（不开启精灵材质）
如何将dom元素放到marker对象中

整体代码：

var app = new THING.App({
url: 'https://www.thingjs.com/static/models/factory', // 场景地址
background: '#000000',
env: 'Seaside',
});
var marker
let name = '叉车'
THING.Utils.dynamicLoad([
'/uploads/wechat/703071/file/marker用html写/index.css',],
function () {
},
)
app.on("load", function () {
const markDown = document.createElement('div');
// 这里的html为顶牌样式
markDown.innerHTML = `
<div class='name' id='canvas22' style="">
<div class='one'>
${name}
<button id='button-2222'>222</button>
</div>
<div style='width:100%;height:30px;margin-top:20px;'>
<div style='width:25px;height:15px;color:#FFFFFF;margin:0px auto;background-image:url("/uploads/wechat/703071/file/marker用html写/img/顶牌_底三角.png");background-size:cover;'>
</div>
</div>
`
$('#div3d').append(markDown)
marker = app.create({
type: 'Marker',
name: '叉车顶牌',
alwaysOnTop: true,
size: 1,
parent: app.query("car01")[0],
//两种写法：获取dom元素
// element:markDown,
element: document.getElementById('canvas22'),
localPosition: [0, 1, 0],
useSpriteMaterial:true, //默认开启精灵材质（始终面向摄像头），
complete: function (ev) {
}
})
})

复制代码

[分享] 如何将dom元素放到marker对象中