本帖最后由 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) { //回调函数
- // }
- // });
- }
注意点：如果只创建模型的时候，未看到模型，需要自己调整界面视角到合适位置，就能看到模型了。
|
|
|
|
|
|
|
|
|
|
2225
1
