三维模型中如何展现火焰

示例描述与操作指南

当前示例为展示火焰效果的示例。
通过简单代码，使得火焰效果展示于页面上，用户可调整火焰大小以及火焰位置在建筑物上。

示例效果展示

实现步骤

第一步 监听点击构件
监听点击构件

// 监听点击构件
component.on("click", function (event) {
    if (disabled || !pickStatus) {
        return;
    }
    component.removeHighlight();
    const { status, point } = event;
    if (!status) {
        // 若点击的不是构件，则退出
        return;
    }
    const positionText = `${point.x},${point.y},${point.z}`
    Msg.info(`已拾取坐标点 (${positionText})`);
    position = [point.x, point.y, point.z];
});

第二步 选择着火点
监听点击起始点按钮，拾取坐标

// 监听点击选择按钮
$(".btn-select").click(function () {
    if (disabled) {
        // 若功能不可用，则退出
        return;
    }
    pickStatus = !pickStatus;
    if (pickStatus) {
        Msg.info("点击构件拾取坐标点");
    }
    const btnSelectDom = $(".btn-select");
    const status = btnSelectDom.text() === "选择";
    if (status) {
        btnSelectDom.text("正在拾取");
    } else {
        btnSelectDom.text("选择");
    }
});

第三步 生成火焰
生成火焰效果

// 监听点击模拟火焰按钮
$(".btn-run").click(function () {
    if (disabled) {
        // 若功能不可用，则退出
        return;
    }
    if (position === null) {
        Msg.warning("请先选择坐标点!");
        return;
    }
    const type = $(".select-fire-result").attr("data-type");
    let fireSize = fireSizeMap.hasOwnProperty(type) ? fireSizeMap[type]: fireSizeMap["medium"];
    fire.add({
        success: function (key) {
            fire.setPosition([{ key, position }]);
            fire.setScale([{ key, scale: fireSize }]);
            position = null;
        },
        error: function () {
            Msg.error("添加火焰失败!");
            position = null;
        },
    }); // 添加火焰
    $(".btn-select").text("选择");
    pickStatus = false;
});

下载完整代码

相关示例

智慧消防模拟

相关接口

model.on(‘load’)

fire.add

fire.remove

fire.setPosition

fire.setScale

component.removeHighlight

component.on(“click”)

toolbar.on(“home:click”)