效果模板

回复

本帖最后由张唯威于 2022-10-31 11:23 编辑

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

室内外切换时更换模板是监听层级事件，进入室内和退出室内时切换模板，示例代码如下：

app.on(THING.EventType.EnterLevel, '.Building', function(ev) {
if (ev.previous._type === 'Campus') {
// 进入室内，切换为另外一个模板
modelData = deepClone(data1); // 模板数据
modelDataUrl = 'https://www.thingjs.com/uploads/wechat/364422/file/园区模板/campusModelB/'; // 模板包地址
removeModel(); // 移除模板
initEffectThemeControl(modelData, modelDataUrl); // 应用模板
}
});
app.on(THING.EventType.EnterLevel, '.Campus', function(ev) {
if (ev.previous && ev.previous._type === 'Building') {
// 退出室内，室外切换为原前模板
modelData = deepClone(data); // 模板数据
modelDataUrl = 'https://www.thingjs.com/uploads/wechat/364422/file/园区模板/campusModelA/'; // 模板包地址
removeModel(); // 移除模板
initEffectThemeControl(modelData, modelDataUrl); // 应用模板
}
});

复制代码

园区效果模板的切换、开启和关闭效果模板、开启和关闭特效地面、开启和关闭特效粒子详细代码如下：

let ctrl = null; // 模板控制器
let campus = null; // 园区对象
let lighting = null; // 灯光效果
let postEffect = null; // 后期设置
let skyEffect = null; // 天空盒
let background = null; // 背景
let modelData = null; // 模板数据
let modelDataUrl = ''; // 模板路径
let tempData = null; // 临时模板数据，在关闭模板后，再次开启效果时调用
let tempUrl = ''; // 临时模板路径，在关闭模板后，再次开启效果时调用
let groundVisible = true; // 特效地面是否显示
let particleVisible = true; // 特效粒子是否显示
const app = new THING.App({
url: '/api/scene/7ccb8574cf69076e83a28e30', // 园区路径
});
// 引入模板数据
THING.Utils.dynamicLoad(['/uploads/wechat/364422/file/园区模板/EffectThemeControl.js',
'/uploads/wechat/364422/file/园区模板/campusModelA/frame.js',
'/uploads/wechat/364422/file/园区模板/campusModelB/frame.js'
], function () {
app.on('load', function (ev) {
// 存储园区加载时的灯光效果、后期设置、天空盒或者背景
lighting = deepClone(app.lighting);
postEffect = deepClone(app.postEffect);
skyEffect = deepClone(app.skyBox);
background = app.background;
app.level.change(ev.campus);
// 关闭，进到室内自动切换天空盒
app.level.options['autoChangeBackground'] = false;
// 初始化
let control = new THING.EffectThemeControl();
app.addControl(control, '效果模板控制器');
// 获取模板控制器
ctrl = app.getControl('效果模板控制器');
});
THING.widget.Button('模板A', function () {
// 效果模板A，由于底层会对数据更改，数据入参需深拷贝，但最好是由底层对入参进行深拷贝处理
modelData = deepClone(data); // 模板数据
tempData = deepClone(data);// 模板数据
modelDataUrl = 'https://www.thingjs.com/uploads/wechat/364422/file/园区模板/campusModelA/'; // 模板包地址
tempUrl = 'https://www.thingjs.com/uploads/wechat/364422/file/园区模板/campusModelA/'; // 模板包地址
removeModel(); // 移除模板
initEffectThemeControl(modelData, modelDataUrl); // 应用模板
});
THING.widget.Button('模板B', function () {
// 效果模板B
modelData = deepClone(data1); // 模板数据
tempData = deepClone(data1);// 模板数据
modelDataUrl = 'https://www.thingjs.com/uploads/wechat/364422/file/园区模板/campusModelB/'; // 模板包地址
tempUrl = 'https://www.thingjs.com/uploads/wechat/364422/file/园区模板/campusModelB/'; // 模板包地址
removeModel(); // 移除模板
initEffectThemeControl(modelData, modelDataUrl); // 应用模板
});
THING.widget.Button('模板效果开', function () {
// 开启模板效果
showModel(true);
});
THING.widget.Button('模板效果关', function () {
// 关闭模板效果
showModel(false);
});
THING.widget.Button('特效地面', function () {
// 开启特效地面
showGround();
});
THING.widget.Button('粒子模型', function () {
// 开启粒子模型
showParticle();
});
});
// 模板数据注册和应用
function initEffectThemeControl(modelData, modelDataUrl) {
// 注册模板,modelData是模板数据。如果是本地效果模板包，必须填第三个参数modelDataUrl，该参数是模板包相对于该片代码的路径，default自定义名字
ctrl.registerTheme('default', modelData, modelDataUrl);
// 获取园区
campus = app.query('.Campus')[0];
// 应用效果模板
campus.applyTheme('default'); // class等
ctrl.applyEffectTheme('default', campus); // 特效地面和粒子
ctrl.applyThemeEnvironment('default', campus); // 环境和灯光
}
// 开启和关闭模板效果
function showModel (boolean) {
if (boolean) {
// 开启
modelData = deepClone(tempData); // 模板数据
modelDataUrl = tempUrl; // 模板路径
initEffectThemeControl(modelData, modelDataUrl); // 引用模板
} else {
// 关闭
removeModel(); // 销毁模板
// 关闭效果模板后全局参数设置为默认的
globalEffectConfig(lighting, postEffect, skyEffect, background);
}
}
// 全局效果配置参数
function globalEffectConfig(config, effectConfig, skyBox, background) {
app.lighting = config; // 灯光效果
app.postEffect = effectConfig; // 后期设置
app.skyBox = skyBox; // 天空盒
app.background = background; // 背景
}
// 特效地面开关
function showGround () {
groundVisible = !groundVisible;
app.query('.GroundObject').visible = groundVisible;
}
// 特效粒子开关
function showParticle () {
particleVisible = !particleVisible;
app.query('.ParticleSystem').visible = particleVisible;
}
function removeModel () {
// 销毁效果模板
if (THING.ThemeManager.findStyle('default')) {
ctrl.destroyEffectTheme('default', campus);
campus.applyTheme(null);
// 清除全局参数背景和天空盒
app.skyBox = null;
app.background = null;
}
}
// 深拷贝
function deepClone(params) {
return JSON.parse(JSON.stringify(params));
}

复制代码

[分享] 效果模板

效果模板

相关帖子

浏览过的版块