自定义特效主题开发说明

自定义特效主题样式修改:

目前三维可视化场景特效样式不支持线上自定义配置,但您可以下载到本地自行修改,满足您个性化配置需求。

下载后的主题包effects.json是可配置文件,其它都是特效包的基础素材。

特效主题参数说明如下所示:(修改完之后如果不生效注意清除浏览器缓存)

{
"version": "1.1",
"floor": [ // 地板特效
    {
        "floorNum": 1,                // 楼层地板
        "effectType": "alpha_trans",  // 透明过渡地板
        "offsetHeight": -10,          // 地板上下偏移
        "effectConfigs": {            // 特效效果配置
            "color": "#d7d7d7",       // 颜色
            "repeatImg": "images/building/baidiban.png", // 重复纹理贴图
            "repeat": { "x": 2000, "y": 2000 },          // 重复纹理贴图x,y方向的平铺次数
            "transFactor": [0.3, 0.9],                   // 透明过渡插值
            "radius": 3000            // 透明过渡最大半径
        }
    }
],
"directLight": [ // 平行光/太阳光
    {
        "replaceLight": "mainLight", // 采用当前光照配置替换三维场景现有光照
        "intensity": 0.3,            // 光照强度
        "direction": { "x": -0.2, "y": 0.71, "z": 0.6 }, // 光照方向
    },
    {   // 新增光源 
        "color": "#888888",          // 光照颜色
        "intensity": 0.7,            // 光照强度
        "direction": { "x": 0, "y": 0.25, "z": 0.5 }     // 光照方向
    }
],
"buildingScanLight": [    // 建筑扫描光(目前仅支持矢量建筑/房间)
    {
        "type": "horizon_scan",     // 水平扫描光
        "lineScanCenter": { "x": 0, "y": 0 }, // 扫描中心点
        "scanColor": "#aad5ff",     // 扫描光颜色
        "scanSpeed": 150,           // 扫描光速度
        "scanExtent": [500, -500],  // 扫描范围
        "scanLightWidth": 25        // 扫描光宽度
    },
    {
        "type": "center_spread",    // 中心扫描光
        "lineScanCenter": { "x": 0, "y": 0 }, // 扫描中心点
        "scanColor": "#FFFFFF",     // 扫描光颜色
        "scanSpeed": 800            // 扫描光速度
        "maxRadius": 2500,          // 扩散最大半径
    }
],
"roomEffect": [ // 矢量建筑/房间特效
    {
        "roomStyle": "38",          // 对应三维场景房间对象的RoomStyle
        "color": "#6f6a76",         // 颜色
        "topImg": "images/building/color.png",        // 默认顶部贴图为白色
        "sideImg": "images/building/color.png",       // 默认侧面贴图为白色
        "colorImg": "images/building/grad_color.png", // 使用过度色贴图,使用时注意与color值搭配的问题,两者会发生色值相乘
        "opacity": 0.4,             // 透明度
        "transprentHightLight": false,      // 透明叠加高光
        "openScan": false,                  // 是否开启扫描光
        "scanLightType": ["center_spread"], // 扫描光类型
        "colorBreath": false,       // 是否开启颜色呼吸变化效果
        "roughness": 1,             // 材质粗糙度
        "metalness": 0              // 材质金属度
    }
],
"routes": [ // 特效线路网
    {
        "type": "outData",    // 外部管线数据(新版都是通过初始化时传入)
        "height": 5,          // 离地板高度
        "lineWidth": 4,       // 线宽
        "colors": [           // 配置不同类型datatype使用不同的颜色
            {
                "datatype": "usertype-1",
                "color": "#00ff00"
            }
        ],
        "isHightLight": true, // 是否开启高亮
        "speed": 0.004        // 速度
    }
],
"water": [ // 三维场景水域(仅支持矢量平面)
    {
        "roomStyle": "12",        // 对应三维场景房间对象的RoomStyle
        "floorNum": 2,            // 房间块所属三维场景楼层
        "color": "#2b8bb5",       // 水面颜色
        "lightColor": "#b2d9e5",  // 水面反光颜色
        "scale": 2.0,             // 波浪大小
        "waveFactor": 35.0,       // 波浪的起伏参数
        "speed": 0.008,           // 水面流动速度
        "groundScaleFactor": 0.5, // 水底重复纹理填充参数
        "roughness": 0.6,         // 水面的粗糙度
        "metalness": 0,           // 水面的金属度
        "mirrorReflection": 0.5   // 水面镜面反射参数
    }
],
"skybox": {
    "type": "box",        // 天空盒类型
    "resolution": 1024,   // 对十字架型的单张天空盒贴图的裁剪像素
    "size": 100000,       // 天空盒子大小
    "offsetY": -30000,    // 上下偏移高度,用于修正地平线效果
    "imgPaths": [         // 可传单张/或者6张
        "images/skybox3/sky/sky-3.png",
        "images/skybox3/sky/sky-1.png",
        "images/skybox3/sky/sky-5.png",
        "images/skybox3/sky/sky-6.png",
        "images/skybox3/sky/sky-2.png",
        "images/skybox3/sky/sky-4.png"
    ]
},
"envTexture": {    // 用于HDR环境反射贴图
    "imgPaths": [  // 目前仅支持6张HDR贴图
        "images/env/hdr3/px.png",
        "images/env/hdr3/nx.png",
        "images/env/hdr3/py.png",
        "images/env/hdr3/ny.png",
        "images/env/hdr3/pz.png",
        "images/env/hdr3/nz.png"
    ],
    intensity: 4   // 控制反射光强度
},
"models": [ // 模型特效配置
    {
        "name": "daolu.gltf", // 模型名称
        "anisotropy": "max"   // 纹理贴图各项异性配置
        "invisible": ["jinzheng_ef_lineframe_noface"], // 需要隐藏的子对象
        "lineframe": [        // 需要绘制边缘线的子对象
            "jinzheng_ef_lineframe_noface", 
            "jinzheng_ef_lineframe", 
            "pai_ef_lineframe", 
            "jinzheng_ef_transparentHL_lineframe"
        ],
        "transprentHightLight": ["jinzheng_ef_transparentHL_lineframe"], // 需要设置透明高光贴图的子对象
        "sRGB": true          // 是否开启sRGB纹理编码
        "renderOrder": [      // 在sortObject开启的前提下,给指定的对象设置渲染优先级
            {
                "name": "Object001",
                "order": 68
            }
        ]
    }
],
"screenEffects": {    // 全屏特效
    "unrealBloom": {  // bloom泛光特效
        "bloomStrength": 1,
        "bloomThreshold": 0,
        "bloomRadius": 0
    },
    "outline": {      // 边缘检测发光
        "color": "#ff9800", // 发光颜色
        "edgeWidth": 3.0, 
        "edgeSpread": 0.0, 
        "edgeThickness": 2.0,
        "blink": true // 是否开启闪烁
    }
},
"ground": [ // 地板类房间(常用于水泥地面平铺或者草地随机平铺处理)【目前应用上较为特殊,实际上可以用模型代替】
    {
        "roomStyle": "25",
        "repeatType": "repeat",
        "repeatImg": "images/ground/HZ-lvhua.png",
        "repeatScaleFactor": 0.05
    }
],
"shadow": { // 三维场景阴影配置【目前仅支持小范围三维场景阴影处理】
    "setShadowLight": "mainLight" // 设置产生阴影的三维场景光源
},
"modelEffects": [ // 模型特效配置
    {
        "name": "template1", // 模型模板1, 可绑定多种特效处理,应用在模型内部经过命名配置的组件中
        "anisotropy": "max",
        "envTexture": {
            "roughness": 0.7,
            "intensity": 6
        },
        "unrealBloom": {
            "intensity": 0.5
        }
    },
    {
        "name": "template2", // 模型模板2
        "anisotropy": "max",
        "envTexture": {
            "roughness": 0.1,
            "intensity": 6
        }
    }
]}
             

通过模型命名和内部配置设置模型特效:

模型内部材质/网格对象命名规则示例:XXX + "_ef_" + YYY

XXX代表当前材质/网格对象需要进行特效配置, YYY代表特效配置json上的modelEffect的每种特效模板效果,多种模板则以“_”分开


例如:材质/网格对象中的命名:building_ef_template1_template2

解析:该模型中设置了building的材质,需要使用特效,分别应用template1、template2两种效果应用。

语义化特效模板命名 为了更友好地维护更新模型内部应用特效模板,特效模板命名应语义化。现提供以下应用参考:

应用于材质:
应用于网格对象: