效果模板

该示例主要是实现了园区效果模板的切换、开启和关闭园区效果模板、开启和关闭特效地面、开启和关闭特效粒子以及园区室内外切换时更换模板。示例效果可访问如下地址：
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. 
   
2. let ctrl = null; // 模板控制器
   
3. let campus = null; // 园区对象
   
4. let lighting = null; // 灯光效果
   
5. let postEffect = null; // 后期设置
   
6. let skyEffect = null; // 天空盒
   
7. let background = null; // 背景
   
8. let modelData = null; // 模板数据
   
9. let modelDataUrl = ''; // 模板路径
   
10. let tempData = null; // 临时模板数据，在关闭模板后，再次开启效果时调用
    
11. let tempUrl = ''; // 临时模板路径，在关闭模板后，再次开启效果时调用
    
12. let groundVisible = true; // 特效地面是否显示
    
13. let particleVisible = true; // 特效粒子是否显示
    
14. 
    
15. const app = new THING.App({
    
16.     url: '/api/scene/7ccb8574cf69076e83a28e30', // 园区路径
    
17. });
    
18. 
    
19. // 引入模板数据
    
20. THING.Utils.dynamicLoad(['/uploads/wechat/364422/file/园区模板/EffectThemeControl.js',
    
21. '/uploads/wechat/364422/file/园区模板/campusModelA/frame.js',
    
22. '/uploads/wechat/364422/file/园区模板/campusModelB/frame.js'
    
23. ], function () {
    
24.     app.on('load', function (ev) {
    
25.         // 存储园区加载时的灯光效果、后期设置、天空盒或者背景
    
26.         lighting = deepClone(app.lighting);
    
27.         postEffect = deepClone(app.postEffect);
    
28.         skyEffect = deepClone(app.skyBox);
    
29.         background = app.background;
    
30.         
    
31.         app.level.change(ev.campus);
    
32. 
    
33.         // 关闭，进到室内自动切换天空盒
    
34.         app.level.options['autoChangeBackground'] = false;
    
35. 
    
36.         // 初始化
    
37.         let control = new THING.EffectThemeControl();
    
38.         app.addControl(control, '效果模板控制器');
    
39. 
    
40.         // 获取模板控制器
    
41.         ctrl = app.getControl('效果模板控制器');
    
42.     });
    
43. 
    
44.     THING.widget.Button('模板A', function () {
    
45.         // 效果模板A，由于底层会对数据更改，数据入参需深拷贝，但最好是由底层对入参进行深拷贝处理
    
46.         modelData = deepClone(data); // 模板数据
    
47.         tempData = deepClone(data);// 模板数据
    
48.         modelDataUrl = 'https://www.thingjs.com/uploads/wechat/364422/file/园区模板/campusModelA/'; // 模板包地址
    
49.         tempUrl = 'https://www.thingjs.com/uploads/wechat/364422/file/园区模板/campusModelA/'; // 模板包地址
    
50.         removeModel(); // 移除模板
    
51.         initEffectThemeControl(modelData, modelDataUrl); // 应用模板
    
52.     });
    
53.     THING.widget.Button('模板B', function () {
    
54.         // 效果模板B
    
55.         modelData = deepClone(data1); // 模板数据
    
56.         tempData = deepClone(data1);// 模板数据
    
57.         modelDataUrl = 'https://www.thingjs.com/uploads/wechat/364422/file/园区模板/campusModelB/'; // 模板包地址
    
58.         tempUrl = 'https://www.thingjs.com/uploads/wechat/364422/file/园区模板/campusModelB/'; // 模板包地址
    
59.         removeModel(); // 移除模板
    
60.         initEffectThemeControl(modelData, modelDataUrl); // 应用模板
    
61.     });
    
62. 
    
63.     THING.widget.Button('模板效果开', function () {
    
64.         // 开启模板效果
    
65.         showModel(true);
    
66.     });
    
67. 
    
68.     THING.widget.Button('模板效果关', function () {
    
69.         // 关闭模板效果
    
70.         showModel(false);
    
71.     });
    
72. 
    
73.     THING.widget.Button('特效地面', function () {
    
74.         // 开启特效地面
    
75.         showGround();
    
76.     });
    
77. 
    
78.     THING.widget.Button('粒子模型', function () {
    
79.         // 开启粒子模型
    
80.         showParticle();
    
81.     });
    
82. 
    
83.    
    
84. });
    
85. 
    
86. // 模板数据注册和应用
    
87. function initEffectThemeControl(modelData, modelDataUrl) {
    
88.     // 注册模板,modelData是模板数据。如果是本地效果模板包，必须填第三个参数modelDataUrl，该参数是模板包相对于该片代码的路径，default自定义名字
    
89.     ctrl.registerTheme('default', modelData, modelDataUrl);
    
90. 
    
91.     // 获取园区
    
92.     campus = app.query('.Campus')[0];
    
93. 
    
94.     // 应用效果模板
    
95.     campus.applyTheme('default'); // class等
    
96.     ctrl.applyEffectTheme('default', campus); // 特效地面和粒子
    
97.     ctrl.applyThemeEnvironment('default', campus); // 环境和灯光
    
98. }
    
99. 
    
100. // 开启和关闭模板效果
     
101. function showModel (boolean) {
     
102.     if (boolean) {
     
103.         // 开启
     
104.         modelData = deepClone(tempData); // 模板数据
     
105.         modelDataUrl = tempUrl; // 模板路径
     
106.         initEffectThemeControl(modelData, modelDataUrl); // 引用模板
     
107.     } else {
     
108.         // 关闭
     
109.         removeModel(); // 销毁模板
     
110.         // 关闭效果模板后全局参数设置为默认的
     
111.         globalEffectConfig(lighting, postEffect, skyEffect, background);
     
112.     }
     
113. }
     
114. 
     
115. // 全局效果配置参数
     
116. function globalEffectConfig(config, effectConfig, skyBox, background) {
     
117.     app.lighting = config; // 灯光效果
     
118.     app.postEffect = effectConfig; // 后期设置
     
119.     app.skyBox = skyBox; // 天空盒
     
120.     app.background = background; // 背景
     
121. }
     
122. 
     
123. // 特效地面开关
     
124. function showGround () {
     
125.     groundVisible = !groundVisible;
     
126.     app.query('.GroundObject').visible = groundVisible;
     
127. }
     
128. 
     
129. // 特效粒子开关
     
130. function showParticle () {
     
131.     particleVisible = !particleVisible;
     
132.     app.query('.ParticleSystem').visible = particleVisible;
     
133. }
     
134. 
     
135. function removeModel () {
     
136.     // 销毁效果模板
     
137.     if (THING.ThemeManager.findStyle('default')) {
     
138.         ctrl.destroyEffectTheme('default', campus);
     
139.         campus.applyTheme(null);
     
140.         // 清除全局参数背景和天空盒
     
141.         app.skyBox = null;
     
142.         app.background = null;
     
143.     }
     
144. }
     
145. 
     
146. // 深拷贝
     
147. function deepClone(params) {
     
148.     return JSON.parse(JSON.stringify(params));
     
149. }

复制代码