低代码项目的界面中添使用模型或者场景

回复

本帖最后由 yamazaki1201 于 2024-3-13 11:42 编辑

功能：在一个场景，将模型或者场景添加到界面中。如下如图所示：
低代码项目的界面中添使用模型或者场景

实现原理：在创建第一个了3d场景对象后，再创建一个新的3d场景对象，再将这个新的3d场景对象绑定到dom元素上。

实现步骤：代码如下

var app = new THING.App({
url: 'https://www.thingjs.com/static/models/factory',
background: '#000000',
env: 'Seaside',
});
// 第一个3d场景加载完成后
app.on('load', function (ev) {
new THING.widget.Button('在创建界面上的新的场景', function () { //创建按钮
createUI2()
})
})
function createUI2() {
//
$('#div2d').append(`
<div style=' position:absolute;top:100px;z-index:10;width:300px;height:200px;'>
<div style='color: rgb(0,0,0); background-color: #FFF; text-align: center;'>模型展示</div>
<div id="div3d2" style="width:300px;height:180px;"></div>
</div>`);
// 第一种：创建第二个3d场景，并绑定在id为div3d2的dom元素
let app2 = new THING.App({
'el': 'div3d2',
url: 'https://www.thingjs.com/static/models/factory',
})
// 第二种：只创建模型，不创建园区场景
// let app2 = new THING.App({
// 'el': 'div3d2',
// })
// app2.create({ //
// type: 'Thing',
// id: 'No1234567',
// name: 'truck',
// url: '/api/models/9f3b92eaf1f84447a9879454fcbb89d8/0/gltf/', // 模型地址
// position: [0, 0, 0], // 世界坐标系下的位置
// complete: function (ev) { //回调函数
// }
// });
}