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

功能：在一个场景，将模型或者场景添加到界面中。如下如图所示：


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

实现步骤：代码如下

1. var app = new THING.App({
   
2.     url: 'https://www.thingjs.com/static/models/factory',
   
3.     background: '#000000',
   
4.     env: 'Seaside',
   
5. });
   
6. // 第一个3d场景加载完成后
   
7. app.on('load', function (ev) {
   
8.     new THING.widget.Button('在创建界面上的新的场景', function () {  //创建按钮
   
9.         createUI2()
   
10.     })
    
11. })
    
12. 
    
13. function createUI2() {
    
14.     //
    
15.     $('#div2d').append(`
    
16.     <div style=' position:absolute;top:100px;z-index:10;width:300px;height:200px;'>
    
17.     <div style='color: rgb(0,0,0); background-color: #FFF; text-align: center;'>模型展示</div>
    
18.     <div id="div3d2" style="width:300px;height:180px;"></div>
    
19.     </div>`);
    
20. 
    
21. 
    
22.     // 第一种：创建第二个3d场景 ，并绑定在id为div3d2的dom元素
    
23.     let app2 = new THING.App({
    
24.         'el': 'div3d2',
    
25.         url: 'https://www.thingjs.com/static/models/factory',
    
26.     })
    
27. 
    
28.     // 第二种：只创建模型，不创建园区场景
    
29.     // let app2 = new THING.App({
    
30.     //     'el': 'div3d2',
    
31.     // })
    
32.     // app2.create({  //
    
33.     //     type: 'Thing',
    
34.     //     id: 'No1234567',
    
35.     //     name: 'truck',
    
36.     //     url: '/api/models/9f3b92eaf1f84447a9879454fcbb89d8/0/gltf/', // 模型地址
    
37.     //     position: [0, 0, 0], // 世界坐标系下的位置
    
38.     //     complete: function (ev) {  //回调函数
    
39.     //     }
    
40.     // });
    
41. 
    
42. 
    
43. }

复制代码

注意点：如果只创建模型的时候，未看到模型，需要自己调整界面视角到合适位置，就能看到模型了。

测试测试