自定义特效主题开发说明

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

下载后的主题包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两种效果应用。



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


应用于材质:
  • env-sRGB 材质应用效果说明:使用环境贴图,纹理编码修正为sRGB
  • uv-animate 材质应用效果说明:使用uv动画
应用于网格对象:
  • bloom-lineframe 材质应用效果说明:使用泛光特效,网格对象转换为线框
  • outline-noshadow 材质应用效果说明:使用边缘发光特效,禁止产生阴影