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

[分享] 效果模板

[复制链接]

效果模板

发表于 2022-10-31 11:19:05 来自 分享 阅读模式 倒序浏览
zzv_icon1493 zzr_icon0 查看全部
本帖最后由 张唯威 于 2022-10-31 11:23 编辑

该示例主要是实现了园区效果模板的切换、开启和关闭园区效果模板、开启和关闭特效地面、开启和关闭特效粒子以及园区室内外切换时更换模板。示例效果可访问如下地址:
https://www.thingjs.com/pp/b1a053c2a79739dcc3ec7e2c
https://www.thingjs.com/pp/46be30035338591e96489011

室内外切换时更换模板是监听层级事件,进入室内和退出室内时切换模板,示例代码如下:
  1. app.on(THING.EventType.EnterLevel, '.Building', function(ev) {
  2.     if (ev.previous._type === 'Campus') {
  3.         // 进入室内,切换为另外一个模板
  4.         modelData = deepClone(data1); // 模板数据
  5.         modelDataUrl = 'https://www.thingjs.com/uploads/wechat/364422/file/园区模板/campusModelB/'; // 模板包地址
  6.         removeModel(); // 移除模板
  7.         initEffectThemeControl(modelData, modelDataUrl); // 应用模板
  8.     }
  9. });
  10. app.on(THING.EventType.EnterLevel, '.Campus', function(ev) {
  11.     if (ev.previous && ev.previous._type === 'Building') {
  12.         // 退出室内,室外切换为原前模板
  13.         modelData = deepClone(data); // 模板数据
  14.         modelDataUrl = 'https://www.thingjs.com/uploads/wechat/364422/file/园区模板/campusModelA/'; // 模板包地址
  15.         removeModel(); // 移除模板
  16.         initEffectThemeControl(modelData, modelDataUrl); // 应用模板
  17.     }
  18. });
复制代码
园区效果模板的切换、开启和关闭效果模板、开启和关闭特效地面、开启和关闭特效粒子详细代码如下:

  1. let ctrl = null; // 模板控制器
  2. let campus = null; // 园区对象
  3. let lighting = null; // 灯光效果
  4. let postEffect = null; // 后期设置
  5. let skyEffect = null; // 天空盒
  6. let background = null; // 背景
  7. let modelData = null; // 模板数据
  8. let modelDataUrl = ''; // 模板路径
  9. let tempData = null; // 临时模板数据,在关闭模板后,再次开启效果时调用
  10. let tempUrl = ''; // 临时模板路径,在关闭模板后,再次开启效果时调用
  11. let groundVisible = true; // 特效地面是否显示
  12. let particleVisible = true; // 特效粒子是否显示

  13. const app = new THING.App({
  14.     url: '/api/scene/7ccb8574cf69076e83a28e30', // 园区路径
  15. });

  16. // 引入模板数据
  17. THING.Utils.dynamicLoad(['/uploads/wechat/364422/file/园区模板/EffectThemeControl.js',
  18. '/uploads/wechat/364422/file/园区模板/campusModelA/frame.js',
  19. '/uploads/wechat/364422/file/园区模板/campusModelB/frame.js'
  20. ], function () {
  21.     app.on('load', function (ev) {
  22.         // 存储园区加载时的灯光效果、后期设置、天空盒或者背景
  23.         lighting = deepClone(app.lighting);
  24.         postEffect = deepClone(app.postEffect);
  25.         skyEffect = deepClone(app.skyBox);
  26.         background = app.background;
  27.         
  28.         app.level.change(ev.campus);

  29.         // 关闭,进到室内自动切换天空盒
  30.         app.level.options['autoChangeBackground'] = false;

  31.         // 初始化
  32.         let control = new THING.EffectThemeControl();
  33.         app.addControl(control, '效果模板控制器');

  34.         // 获取模板控制器
  35.         ctrl = app.getControl('效果模板控制器');
  36.     });

  37.     THING.widget.Button('模板A', function () {
  38.         // 效果模板A,由于底层会对数据更改,数据入参需深拷贝,但最好是由底层对入参进行深拷贝处理
  39.         modelData = deepClone(data); // 模板数据
  40.         tempData = deepClone(data);// 模板数据
  41.         modelDataUrl = 'https://www.thingjs.com/uploads/wechat/364422/file/园区模板/campusModelA/'; // 模板包地址
  42.         tempUrl = 'https://www.thingjs.com/uploads/wechat/364422/file/园区模板/campusModelA/'; // 模板包地址
  43.         removeModel(); // 移除模板
  44.         initEffectThemeControl(modelData, modelDataUrl); // 应用模板
  45.     });
  46.     THING.widget.Button('模板B', function () {
  47.         // 效果模板B
  48.         modelData = deepClone(data1); // 模板数据
  49.         tempData = deepClone(data1);// 模板数据
  50.         modelDataUrl = 'https://www.thingjs.com/uploads/wechat/364422/file/园区模板/campusModelB/'; // 模板包地址
  51.         tempUrl = 'https://www.thingjs.com/uploads/wechat/364422/file/园区模板/campusModelB/'; // 模板包地址
  52.         removeModel(); // 移除模板
  53.         initEffectThemeControl(modelData, modelDataUrl); // 应用模板
  54.     });

  55.     THING.widget.Button('模板效果开', function () {
  56.         // 开启模板效果
  57.         showModel(true);
  58.     });

  59.     THING.widget.Button('模板效果关', function () {
  60.         // 关闭模板效果
  61.         showModel(false);
  62.     });

  63.     THING.widget.Button('特效地面', function () {
  64.         // 开启特效地面
  65.         showGround();
  66.     });

  67.     THING.widget.Button('粒子模型', function () {
  68.         // 开启粒子模型
  69.         showParticle();
  70.     });

  71.    
  72. });

  73. // 模板数据注册和应用
  74. function initEffectThemeControl(modelData, modelDataUrl) {
  75.     // 注册模板,modelData是模板数据。如果是本地效果模板包,必须填第三个参数modelDataUrl,该参数是模板包相对于该片代码的路径,default自定义名字
  76.     ctrl.registerTheme('default', modelData, modelDataUrl);

  77.     // 获取园区
  78.     campus = app.query('.Campus')[0];

  79.     // 应用效果模板
  80.     campus.applyTheme('default'); // class等
  81.     ctrl.applyEffectTheme('default', campus); // 特效地面和粒子
  82.     ctrl.applyThemeEnvironment('default', campus); // 环境和灯光
  83. }

  84. // 开启和关闭模板效果
  85. function showModel (boolean) {
  86.     if (boolean) {
  87.         // 开启
  88.         modelData = deepClone(tempData); // 模板数据
  89.         modelDataUrl = tempUrl; // 模板路径
  90.         initEffectThemeControl(modelData, modelDataUrl); // 引用模板
  91.     } else {
  92.         // 关闭
  93.         removeModel(); // 销毁模板
  94.         // 关闭效果模板后全局参数设置为默认的
  95.         globalEffectConfig(lighting, postEffect, skyEffect, background);
  96.     }
  97. }

  98. // 全局效果配置参数
  99. function globalEffectConfig(config, effectConfig, skyBox, background) {
  100.     app.lighting = config; // 灯光效果
  101.     app.postEffect = effectConfig; // 后期设置
  102.     app.skyBox = skyBox; // 天空盒
  103.     app.background = background; // 背景
  104. }

  105. // 特效地面开关
  106. function showGround () {
  107.     groundVisible = !groundVisible;
  108.     app.query('.GroundObject').visible = groundVisible;
  109. }

  110. // 特效粒子开关
  111. function showParticle () {
  112.     particleVisible = !particleVisible;
  113.     app.query('.ParticleSystem').visible = particleVisible;
  114. }

  115. function removeModel () {
  116.     // 销毁效果模板
  117.     if (THING.ThemeManager.findStyle('default')) {
  118.         ctrl.destroyEffectTheme('default', campus);
  119.         campus.applyTheme(null);
  120.         // 清除全局参数背景和天空盒
  121.         app.skyBox = null;
  122.         app.background = null;
  123.     }
  124. }

  125. // 深拷贝
  126. function deepClone(params) {
  127.     return JSON.parse(JSON.stringify(params));
  128. }
复制代码

avatar
游客~
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

130700ppkpl8x3t7tt1b1t