请选择 进入手机版 | 继续访问电脑版
分享
查看: 908|回复: 1

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

[复制链接]

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

发表于 2023-10-24 18:51:57 来自 分享 只看大图 阅读模式 倒序浏览
zzv_icon908 zzr_icon1 查看全部
本帖最后由 yamazaki1201 于 2024-3-13 11:42 编辑

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

实现原理:在创建第一个了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. function createUI2() {
  13.     //
  14.     $('#div2d').append(`
  15.     <div style=' position:absolute;top:100px;z-index:10;width:300px;height:200px;'>
  16.     <div style='color: rgb(0,0,0); background-color: #FFF; text-align: center;'>模型展示</div>
  17.     <div id="div3d2" style="width:300px;height:180px;"></div>
  18.     </div>`);


  19.     // 第一种:创建第二个3d场景 ,并绑定在id为div3d2的dom元素
  20.     let app2 = new THING.App({
  21.         'el': 'div3d2',
  22.         url: 'https://www.thingjs.com/static/models/factory',
  23.     })

  24.     // 第二种:只创建模型,不创建园区场景
  25.     // let app2 = new THING.App({
  26.     //     'el': 'div3d2',
  27.     // })
  28.     // app2.create({  //
  29.     //     type: 'Thing',
  30.     //     id: 'No1234567',
  31.     //     name: 'truck',
  32.     //     url: '/api/models/9f3b92eaf1f84447a9879454fcbb89d8/0/gltf/', // 模型地址
  33.     //     position: [0, 0, 0], // 世界坐标系下的位置
  34.     //     complete: function (ev) {  //回调函数
  35.     //     }
  36.     // });


  37. }
复制代码

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

avatar

65

主题

69

帖子

596

积分

高级会员

Rank: 4

积分
596
18979425409
 楼主|
发表于 2023-10-24 18:51:58 来自手机 显示全部楼层
测试测试
avatar
游客~
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

130700ppkpl8x3t7tt1b1t