您现在的位置: 首页 > SDK开发 > 三维场景默认特效修改样式


三维场景默认特效修改主题样式




三维场景默认特效自定义主题样式风格修改:

目前三维场景默认特效样式不支持线上配置自己定义,但您可以下载到本地,自行修改,满足您个性化配置需求。
下载后的文件夹*.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.7071067811865475, "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", // 扫描光颜色
        "maxRadius": 2500, // 扩散最大半径
        "scanSpeed": 800 // 扫描光宽度
    }
],
"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", // 模型模板1,
        "anisotropy": "max",
        "envTexture": {
            "roughness": 0.1,
            "intensity": 6
        }
    }
]
}

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

1. 模型内部材质/网格对象命名规则:XXX+“_ef_”, 代表当前材质/网格对象需要进行特效配置,后面紧接上面特效配置json上的modelEffect的每种特效模板效果,多种模板以“_”分开

例如:材质/网格对象中的命名:building_ef_template1_template2, 解析:该模型中设置了这种命名的材质,需要使用特效,分别应用template1、template2两种效果应用。
【建议:为了更友好地维护更新模型内部应用特效模板,特效模板命名应语义化。提供以下参考:】

应用于材质:

  • env-sRGB
    1. 材质应用效果说明:使用环境贴图,纹理编码修正为sRGB
  • uv-animate
    1. 材质应用效果说明:使用uv动画

应用于网格对象:

  • bloom-lineframe
    1. 材质应用效果说明:使用泛光特效,网格对象转换为线框
  • outline-noshadow
    1. 材质应用效果说明:使用边缘发光特效,禁止产生阴影