# 效果管理

在本教程中，你可以通过BIMFACE提供的EffectManager类对场景内的效果进行管理。

提示：本教程需要先成功加载场景，场景的加载方法可参考场景加载 (opens new window)。

# 教程

在上一节【构件管理】中，你已经实现了对场景内不同图层对应构件/要素的管理操作。在场景中除了图层相关的数据，也包含着各类效果数据，面对不同的应用场景，你可能还需要对各类效果进行编辑管理。为了便于管理，我们引入了效果管理器（EffectManager (opens new window)）的类。

对场景效果进行二次开发的前提仍是场景已加载完成，即需要在viewer中对场景的加载情况进行监听。

// 对场景加载情况进行监听
viewer.addEventListener(Glodon.Bimface.Viewer.ViewerGISEvent.SceneAdded, function () {
  // 在这里添加二次开发的相关代码
});

添加了场景加载的监听事件后，你就可以在监听事件的回调函数中基于EffectManager类对场景内的效果进行管理操作。

# 获取效果管理器

效果管理器不需要单独进行构造，在创建场景时会自动生成。你可以通过接口获取到场景的EffectManager。

// 声明effectManager变量
let effectManager;
// 获取效果管理器
effectManager = viewer.getEffectManager();

# 获取场景中的效果对象

获取到场景的效果管理器后，你可以通过接口获取已有的效果对象，并支持对满足条件的效果对象进行显隐操作、移除操作等。

// 根据效果ID获取对应效果对象
let effect = effectManager.getEffect('effectId');

// 获取效果ID列表批量获取对应效果对象
let effects1 = effectManager.getEffects({ids:['effectId1','effectId2']});

// 获取效果类型批量获取场景内对应的效果对象列表，例如获取场景内的所有锚点对象
let effects2 = effectManager.getEffects({type: Glodon.Bimface.Common.Type.EffectType.PrismPoint});

// 隐藏场景内的所有动线效果
effectManager.hide({type: Glodon.Bimface.Common.Type.EffectType.CurveAnimation});

// 显示场景内的所有效果
effectManager.show({all: true});

# 添加新效果

在场景中，我们可以通过EffectManager添加新的效果，效果类型包括：

PrismPoint (opens new window)：锚点效果
FireEffect (opens new window)：火焰效果
CurveAnimation (opens new window)：曲线动画效果(动线效果)
FanScan (opens new window)：扇形扫描效果
RingScan (opens new window)：环状扫描效果
WaterEffect (opens new window)：水面效果
WallEffect (opens new window)：电子围墙
SkyBoxManager (opens new window)：天空盒效果
Rain (opens new window)：雨景效果

为了在场景中添加不同类型的效果，你需要构造以上不同类型的效果对象，再基于EffectManager的接口，将效果对象添加至场景中进行展示。

除了具体的效果对象，EffectManager也支持在效果目录树中添加文件夹，并且可以基于接口参数将效果添加至指定的文件夹中。

需要注意的是，单个场景中仅支持存在一个天空盒效果、一个雨景效果。

# 添加文件夹

// ********************** 添加文件夹 **********************
effectManager.addGroup({id:'groupId',name:'文件夹-1'});

# 添加锚点效果

// ********************** 添加锚点效果 **********************
// 构造锚点对象的配置项
let prismPointConfig = new Glodon.Bimface.Plugins.Anchor.PrismPointConfig();
// 设置锚点对象的位置、大小、动画时长等参数
prismPointConfig.position = {x:0,y:20,z:5};
prismPointConfig.size = 10;
prismPointConfig.duration = 1500;
// 设置锚点对象的颜色及线框颜色
prismPointConfig.color = new Glodon.Web.Graphics.Color(50,211,166,0.4);
prismPointConfig.wireframeColor = new Glodon.Web.Graphics.Color(142,255,222,1);

// 构造锚点对象
let prismPoint = new Glodon.Bimface.Plugins.Anchor.PrismPoint(prismPointConfig);

// 调用EffectManager的接口将锚点对象添加至新增的文件夹中
effectManager.addEffect(prismPoint,{id:'prismPointId',name:'锚点效果', parentId:'groupId'});

# 添加火焰效果

// ********************** 添加火焰效果 **********************
// 构造火焰效果的配置项
let fireEffectConfig = new Glodon.Bimface.Plugins.ParticleSystem.FireEffectConfig();
// 设置火焰对象的位置、Viewer参数
fireEffectConfig.position = {x:5,y:20,z:1};
// 设置火焰对象的viewer对象
fireEffectConfig.viewer = viewerGIS;

// 构造火焰对象
let fireEffect = new Glodon.Bimface.Plugins.ParticleSystem.FireEffect(fireEffectConfig);

// 调用EffectManager的接口将火焰对象添加至新增的文件夹中
effectManager.addEffect(fireEffect,{id:'fireEffectId',name:'火焰效果', parentId:'groupId'});

# 添加动线效果

// ******************** 添加动线效果 ************************
// 构造样条曲线
let splineCurve = new Glodon.Bimface.Plugins.Geometry.SplineCurve({
  points: [{ "x": 14425257, "y": 24064823, "z": z },{ "x": 14425257, "y": 24064823, "z": z }],
  viewer: viewerGIS,
  width: 4
});
// 设置曲线贴图
splineCurve.setMap({
  src: "https://static-test.bimface.com/attach/3f9b4c5612194a71b0523766840351e6_流线贴图1028-6.png",
  // 设置是否允许颜色覆盖
  enableColorOverride: false
});

// 构造曲线动画的配置项
let curveAnimationConfig = new Glodon.Bimface.Plugins.Animation.CurveAnimationConfig();
// 配置Viewer对象、曲线对象、动画时间、动画循环、动画类型等参数
curveAnimationConfig.viewer = viewerGIS;
curveAnimationConfig.curves = [splineCurve];
curveAnimationConfig.time = 1500;
curveAnimationConfig.loop = true;
curveAnimationConfig.type = "flow";
// 构造曲线动画对象
let curveAnimation = new Glodon.Bimface.Plugins.Animation.CurveAnimation(curveAnimationConfig);
// 开始曲线动画
curveAnimation.play();

// 调用EffectManager的接口将动线对象添加至根目录中
effectManager.addEffect(curveAnimation,{id:'curveAnimationId',name:'动线效果'});

# 添加扇形扫描效果

// ******************** 添加扇形扫描效果 *********************
// 构造扇形扫描效果配置项
let fanScanEffectConfig = new Glodon.Bimface.Plugins.Animation.FanScanEffectConfig();
// 配置Viewer对象、背景颜色、扫描颜色、持续时间、扇形角度、位置、扫描半径等参数
fanScanEffectConfig.viewer = viewerGIS;
fanScanEffectConfig.backgroundColor = new Glodon.Web.Graphics.Color(0, 0, 0, 0.05);
fanScanEffectConfig.color = new Glodon.Web.Graphics.Color(17, 218, 183, 0.8);
fanScanEffectConfig.duration = 2000;
fanScanEffectConfig.fanAngle = Math.PI;
fanScanEffectConfig.originPosition = {x:0, y:1, z:0.2};
fanScanEffectConfig.radius = 20;
// 构造扇形扫描效果对象
let fanScanEffect = new Glodon.Bimface.Plugins.Animation.FanScanEffect(fanScanEffectConfig);

// 调用EffectManager的接口将扇形扫描对象添加至根目录中
effectManager.addEffect(fanScanEffect,{id:'fanScanEffectId',name:'扇形扫描效果'});

# 添加环状扫描效果

// ******************** 添加环状扫描效果 *********************
// 构造环状扫描效果配置项
let ringScanEffectConfig = new Glodon.Bimface.Plugins.Animation.RingScanEffectConfig();
// 配置Viewer对象、颜色、持续时间、位置、半径、衰减力度等参数
ringScanEffectConfig.viewer = viewerGIS;
ringScanEffectConfig.color = new Glodon.Web.Graphics.Color(17, 218, 183, 1);
ringScanEffectConfig.duration = 2000;
ringScanEffectConfig.originPosition = {x:5, y:2, z:0.2};
ringScanEffectConfig.radius = 20;
ringScanEffectConfig.progressive = 5;
// 构造环状扫描效果对象
ringScanEffect = new Glodon.Bimface.Plugins.Animation.RingScanEffect(ringScanEffectConfig);

// 调用EffectManager的接口将环状扫描对象添加至根目录中
effectManager.addEffect(ringScanEffect,{id:'ringScanEffectId',name:'环状扫描效果'});

# 添加水面效果

// ******************** 添加水面效果 *********************
// 构造水面效果配置项
let waterEffectConfig = new Glodon.Bimface.Plugins.Animation.WaterEffectConfig();
//通过构造点添加水面效果
waterEffectConfig.boundary = [{x:1, y:0, z:0.5},{x:1, y:1, z:0.5},{x:0, y:1, z:0.5},{x:0, y:0, z:0.5}];
waterEffectConfig.viewer = viewerGIS;
waterEffectConfig.color = new Glodon.Web.Graphics.Color(8,40,73,1);
waterEffectConfig.flow = true;
// 构造水面效果类，并设置效果
let waterEffect = new Glodon.Bimface.Plugins.Animation.WaterEffect(waterEffectConfig);

// 调用EffectManager的接口将水面效果对象添加至根目录中
effectManager.addEffect(waterEffect,{id:'waterEffectId',name:'水面效果'});

# 添加电子围墙

// ******************** 添加电子围墙 *********************
// 构造电子围墙配置项
let wallEffectConfig = new Glodon.Bimface.Plugins.Animation.WallEffectConfig();
//设置围墙路径、效果颜色、围墙高度等参数
wallEffectConfig.path = [{x:1, y:10, z:0.5},{x:10, y:1, z:0.5},{x:1, y:1, z:0.5}];
wallEffectConfig.viewer = viewerGIS;
wallEffectConfig.stretch = true;
wallEffectConfig.direction = {
  type: "Tangent",  // 运动方式为沿着路径的切线方向
  reverse: false    // 运动方向默认为逆时针
};
wallEffectConfig.duration = 1500;
wallEffectConfig.height = 10;
wallEffectConfig.color = new Glodon.Web.Graphics.Color(50, 211, 166, 0.8);
// 构造水面效果类，并设置效果
let wallEffect = new Glodon.Bimface.Plugins.Animation.WallEffect(wallEffectConfig);

// 调用EffectManager的接口将电子围墙对象添加至根目录中
effectManager.addEffect(wallEffect,{id:'wallEffectId',name:'电子围墙'});

# 添加天空盒效果

// ******************** 添加水天空盒效果 *********************
// 构造天空盒管理器配置项，并指定Viewer等参数
let skyBoxManagerConfig = new Glodon.Bimface.Plugins.SkyBox.SkyBoxManagerConfig();
skyBoxManagerConfig.viewer = viewerGIS;
skyBoxManagerConfig.style = Glodon.Bimface.Plugins.SkyBox.SkyBoxStyle.BlueSky;
// 构造天空盒效果
let skyBoxManager = new Glodon.Bimface.Plugins.SkyBox.SkyBoxManager(skyBoxManagerConfig);

// 调用EffectManager的接口将天空盒效果对象添加至场景中
effectManager.addEffect(skyBoxManager,{id:'skyBoxId',name:'天空盒效果'});

# 添加雨景效果

// ******************** 添加雨景效果 *********************
// 构造雨景效果配置项，并指定Viewer等参数
let rainConfig = new Glodon.Bimface.Plugins.WeatherEffect.RainConfig();
rainConfig.viewer = viewerGIS;
// 设置阴天程度及雨量
rainConfig.darkness = 0.3;
rainConfig.density = 2;
// 构造雨景效果
rain = new Glodon.Bimface.Plugins.WeatherEffect.Rain(rainConfig);

// 调用EffectManager的接口将天空盒效果对象添加至场景中
effectManager.addEffect(rain,{id:'rainEffectId',name:'雨景效果'});

在实际场景应用中，通过控制台进入场景编辑界面，基于无代码的交互行为进行效果对象的添加删除等操作会更加方便便捷。

# 删除已有效果

如果想移除场景中已有的效果，可通过EffectManager进行效果的删除操作。

// 根据效果ID或类型删除指定对象
effectManager.remove({ids:['prismPointId']});

# 运行结果

输入以上代码，浏览器就可以加载我们对效果对象进行操作管理后的场景了。

# 完整代码

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>My first scene in BIMFACE</title>
</head>

<body>
  <div id="domId" style="width:800px; height:600px"></div>
  <script src="https://static.bimface.com/api/BimfaceSDKLoader/BimfaceSDKLoader@latest-release.js" charset="utf-8"></script>
  <script>
    // 声明viewer、app及layerManager、effectManager变量
    let viewer, app, layerManager,effectManager;
    // 声明viewToken变量，填入想要显示的场景token
    let viewToken = '<yourViewToken>';
      
    // 构造BimfaceSDKLoaderConfig对象
    let loaderConfig = new BimfaceSDKLoaderConfig();
    // 设置BimfaceSDKLoaderConfig的viewToken
    loaderConfig.viewToken = viewToken;

    // 调用BimfaceSDKLoader的load方法加载模型
    BimfaceSDKLoader.load(loaderConfig, successCallback, failureCallback);

    // 加载成功回调函数
    function successCallback(viewMetaData) {
      // 获取DOM元素
      let domShow = document.getElementById('domId');
      // 创建WebApplicationGISConfig
      let webAppConfig = new Glodon.Bimface.Application.WebApplicationGISConfig();
      // 设置创建WebApplicationGIS的dom对象
      webAppConfig.domElement = domShow;
      // 创建WebApplicationGIS
      app = new Glodon.Bimface.Application.WebApplicationGIS(webAppConfig);

      // 加载待显示的场景
      app.addScene(viewToken);

      // 获取ViewerGIS对象
      viewer = app.getViewer();

      // 对场景加载情况进行监听
      viewer.addEventListener(Glodon.Bimface.Viewer.ViewerGISEvent.SceneAdded, function () {
        // 获取图层管理器
        layerManager = viewer.getLayerManager();

        // 根据图层ID获取对应图层对象
        let layer = layerManager.getLayer('yourLayerId');
        // 获取场景的根节点图层对象
        let rootLayer = layerManager.getRootLayer();

        // 添加图层组
        addGroupLayer();
        // 添加BIM资源
        addBIMLayer();
        // 添加shp矢量资源
        addFeatureLayer();

        // 根据图层ID删除图层对象
        layerManager.removeLayer('yourLayerId');

        // 根据图层ID移动featureLayer对象至根目录图层
        layerManager.moveLayer('featureLayerId',rootLayer.getId());
        
        // 对BIMLayer的构件进行管理
        managerComponents();
        // 对FeatureLayer的要素进行管理
        managerFeatures();

        // 获取场景的效果管理器
        effectManager = viewer.getEffectManager();

        // 根据效果ID获取对应效果对象
        let effect = effectManager.getEffect('yourEffectId');

        // 添加效果文件夹
        addEffectGroup();
        // 添加锚点效果
        addPrismPoint();
        // 添加火焰效果
        addFireEffect();
        // 添加动线效果
        addCurveAnimation();
        // 添加扇形扫描效果
        addFanScan();
        // 添加环状扫描效果
        addRingScan();
        // 添加水面效果
        addWaterEffect();
        // 添加电子围墙
        addWallEffect();
        // 添加天空盒效果
        addSkyBoxManager();
        // 添加雨景效果
        addRain();
        // 根据效果ID删除效果对象
        effectManager.remove({ids:['yourEffectId']});;

      });
    }

    // 加载失败回调函数
    function failureCallback(error) {
      console.log(error);
    }

    // ********************** 添加图层组 **********************
    function addGroupLayer(){
      // 定义构造GroupLayer所需的配置参数
      let option;
      // 设置图层的Id、名称
      option.id = 'groupLayerId';
      option.name = 'groupLayer';

      // 构造GroupLayer
      let groupLayer = new Glodon.Bimface.Layer.GroupLayer(option);

      // 调用LayerManager的接口将GroupLayer添加至场景的根节点图层
      layerManager.addLayer(bimLayer,rootLayer.getId());
    }

    // ********************** 添加BIM资源 **********************
    function addBIMLayer(){
      // 定义构造BIMLayer所需的配置参数
      let option;
      // 设置图层的Id、名称
      option.id = 'bimLayerId';
      option.name = 'bimLayer';
      // 指定待加载BIM模型的View Token
      option.viewToken = '<yourViewToken>'

      // 构造BIMLayer
      let bimLayer = new Glodon.Bimface.Layer.BIMLayer(option);

      // 调用LayerManager的接口将BIMLayer添加至GroupLayer下
      layerManager.addLayer(bimLayer,'groupLayerId');
    }

    // ******************** 添加shp矢量资源 ********************
    function addBIMLayer(){
      // 定义构造FeatureLayer所需的配置参数
      let option;
      // 设置图层的Id、名称
      option.id = 'featureLayerId';
      option.name = 'featureLayer';
      // 指定待加载shp资源的View Token
      option.viewToken = '<yourViewToken>'

      // 构造FeatureLayer
      let featureLayer = new Glodon.Bimface.Layer.FeatureLayer(option);

      // 调用LayerManager的接口将FeatureLayer添加至场景的根节点图层
      layerManager.addLayer(bimLayer,'groupLayerId');
    }

    // ********************* 对构件进行管理 *********************
    function managerComponents(){
      // 获取BIMLayer的ComponentManager，以便于对构件进行管理
      let componentManager = layerManager.getLayer('bimLayerId').getComponentManager();

      // 对所有构件进行着色
      componentManager.overrideColor({all:true},new Glodon.Web.Graphics.Color(255,0,0,1));
      // 对ID为12、14的构件清除着色效果
      componentManager.restoreColor({ids:['12','14']});
    }

    // ********************* 对要素进行管理 *********************
    function managerFeatures(){
      // 获取FeatureLayer对应的要素管理器。若shp文件为面要素文件，则需要获取PolygonFeatureManager
      let polygonFeatureManager = layerManager.getLayer('featureLayerId').getPolygonComponentManager();

      // 对ID为18、22、25的要素进行闪烁
      polygonFeatureManager.blink({ids:['18','22','25']},new Glodon.Web.Graphics.Color(255,255,0,1));
      // 清除ID为18的要素闪烁效果
      polygonFeatureManager.clearBlinkComponents({ids:['18']});
    }

    // ********************* 添加文件夹 *********************
    function addEffectGroup(){
      // 添加文件夹
      effectManager.addGroup({id:'groupId',name:'文件夹-1'});
    }

    // ********************* 添加锚点效果 *********************
    function addPrismPoint(){
      // 构造锚点对象的配置项
      let prismPointConfig = new Glodon.Bimface.Plugins.Anchor.PrismPointConfig();
      // 设置锚点对象的位置、大小、动画时长等参数
      prismPointConfig.position = {x:0,y:20,z:5};
      prismPointConfig.size = 10;
      prismPointConfig.duration = 1500;
      // 设置锚点对象的颜色及线框颜色
      prismPointConfig.color = new Glodon.Web.Graphics.Color(50,211,166,0.4);
      prismPointConfig.wireframeColor = new Glodon.Web.Graphics.Color(142,255,222,1);

      // 构造锚点对象
      let prismPoint = new Glodon.Bimface.Plugins.Anchor.PrismPoint(prismPointConfig);

      // 调用EffectManager的接口将锚点对象添加至新增的文件夹中
      effectManager.addEffect(prismPoint,{id:'prismPointId',name:'锚点效果', parentId:'groupId'});
    }

    // ********************** 添加火焰效果 **********************
    function addFireEffect(){
      // 构造火焰效果的配置项
      let fireEffectConfig = new Glodon.Bimface.Plugins.ParticleSystem.FireEffectConfig();
      // 设置火焰对象的位置、Viewer参数
      fireEffectConfig.position = {x:5,y:20,z:1};
      // 设置火焰对象的viewer对象
      fireEffectConfig.viewer = viewerGIS;

      // 构造火焰对象
      let fireEffect = new Glodon.Bimface.Plugins.ParticleSystem.FireEffect(fireEffectConfig);

      // 调用EffectManager的接口将火焰对象添加至新增的文件夹中
      effectManager.addEffect(fireEffect,{id:'fireEffectId',name:'火焰效果', parentId:'groupId'});
    }

    // ********************* 添加动线效果 *********************
    function addCurveAnimation(){
      // 构造样条曲线
      let splineCurve = new Glodon.Bimface.Plugins.Geometry.SplineCurve({
        points: [{ x: 1, y: 5, z: 0.2 },{ x: 10, y: 15, z: 0.2 }],
        viewer: viewer,
        width: 4
      });
      // 设置曲线贴图
      splineCurve.setMap({
        src: "https://static.bimface.com/attach/c3c5766a96f6459bb1951128597c3942_yellow.png",
        // 设置是否允许颜色覆盖
        enableColorOverride: false
      });

      // 构造曲线动画的配置项
      let curveAnimationConfig = new Glodon.Bimface.Plugins.Animation.CurveAnimationConfig();
      // 配置Viewer对象、曲线对象、动画时间、动画循环、动画类型等参数
      curveAnimationConfig.viewer = viewer;
      curveAnimationConfig.curves = [splineCurve];
      curveAnimationConfig.time = 1500;
      curveAnimationConfig.loop = true;
      curveAnimationConfig.type = "flow";
      // 构造曲线动画对象
      let curveAnimation = new Glodon.Bimface.Plugins.Animation.CurveAnimation(curveAnimationConfig);
      // 开始曲线动画
      curveAnimation.play();

      // 调用EffectManager的接口将动线对象添加至根目录中
      effectManager.addEffect(curveAnimation,{id:'curveAnimationId',name:'动线效果'});
    }

    // ********************* 添加扇形扫描效果 *********************
    function addFanScan(){
      // 构造扇形扫描效果配置项
      let fanScanEffectConfig = new Glodon.Bimface.Plugins.Animation.FanScanEffectConfig();
      // 配置Viewer对象、背景颜色、扫描颜色、持续时间、扇形角度、位置、扫描半径等参数
      fanScanEffectConfig.viewer = viewer;
      fanScanEffectConfig.backgroundColor = new Glodon.Web.Graphics.Color(0, 0, 0, 0.05);
      fanScanEffectConfig.color = new Glodon.Web.Graphics.Color(17, 218, 183, 0.8);
      fanScanEffectConfig.duration = 2000;
      fanScanEffectConfig.fanAngle = Math.PI;
      fanScanEffectConfig.originPosition = {x:0, y:1, z:0.2};
      fanScanEffectConfig.radius = 20;
      // 构造扇形扫描效果对象
      let fanScanEffect = new Glodon.Bimface.Plugins.Animation.FanScanEffect(fanScanEffectConfig);

      // 调用EffectManager的接口将扇形扫描对象添加至根目录中
      effectManager.addEffect(fanScanEffect,{id:'fanScanEffectId',name:'扇形扫描效果'});
    }

    // ********************* 添加环状扫描效果 *********************
    function addRingScan(){
      // 构造环状扫描效果配置项
      let ringScanEffectConfig = new Glodon.Bimface.Plugins.Animation.RingScanEffectConfig();
      // 配置Viewer对象、颜色、持续时间、位置、半径、衰减力度等参数
      ringScanEffectConfig.viewer = viewerGIS;
      ringScanEffectConfig.color = new Glodon.Web.Graphics.Color(17, 218, 183, 1);
      ringScanEffectConfig.duration = 2000;
      ringScanEffectConfig.originPosition = {x:5, y:2, z:0.2};
      ringScanEffectConfig.radius = 20;
      ringScanEffectConfig.progressive = 5;
      // 构造环状扫描效果对象
      ringScanEffect = new Glodon.Bimface.Plugins.Animation.RingScanEffect(ringScanEffectConfig);

      // 调用EffectManager的接口将环状扫描对象添加至根目录中
      effectManager.addEffect(ringScanEffect,{id:'ringScanEffectId',name:'环状扫描效果'});
    }

    // ********************* 添加水面效果 *********************
    function addWaterEffect(){
      // 构造水面效果配置项
      let waterEffectConfig = new Glodon.Bimface.Plugins.Animation.WaterEffectConfig();
      //通过构造点添加水面效果
      waterEffectConfig.boundary = [{x:1, y:20, z:0.5},{x:15, y:20, z:0.5},{x:15, y:0, z:0.5},{x:1, y:0, z:0.5}];
      waterEffectConfig.viewer = viewer;
      waterEffectConfig.color = new Glodon.Web.Graphics.Color(8,40,73,1);
      waterEffectConfig.flow = true;
      // 构造水面效果类，并设置效果
      let waterEffect = new Glodon.Bimface.Plugins.Animation.WaterEffect(waterEffectConfig);

      // 调用EffectManager的接口将水面效果对象添加至根目录中
      effectManager.addEffect(waterEffect,{id:'waterEffectId',name:'水面效果'});
    }

    // ********************* 添加电子围墙 *********************
    function addWallEffect(){
      // 构造电子围墙配置项
      let wallEffectConfig = new Glodon.Bimface.Plugins.Animation.WallEffectConfig();
      //设置围墙路径、效果颜色、围墙高度等参数
      wallEffectConfig.path = [{x:1, y:10, z:0.5},{x:10, y:1, z:0.5},{x:1, y:1, z:0.5}];
      wallEffectConfig.viewer = viewerGIS;
      wallEffectConfig.stretch = true;
      wallEffectConfig.direction = {
        type: "Tangent",  // 运动方式为沿着路径的切线方向
        reverse: false    // 运动方向默认为逆时针
      };
      wallEffectConfig.duration = 1500;
      wallEffectConfig.height = 10;
      wallEffectConfig.color = new Glodon.Web.Graphics.Color(50, 211, 166, 0.8);
      // 构造水面效果类，并设置效果
      let wallEffect = new Glodon.Bimface.Plugins.Animation.WallEffect(wallEffectConfig);

      // 调用EffectManager的接口将电子围墙对象添加至根目录中
      effectManager.addEffect(wallEffect,{id:'wallEffectId',name:'电子围墙'});
    }

    // ********************* 添加天空盒效果 *********************
    function addSkyBoxManager(){
      // 构造天空盒管理器配置项，并指定Viewer等参数
      let skyBoxManagerConfig = new Glodon.Bimface.Plugins.SkyBox.SkyBoxManagerConfig();
      skyBoxManagerConfig.viewer = viewer;
      skyBoxManagerConfig.style = Glodon.Bimface.Plugins.SkyBox.SkyBoxStyle.BlueSky;
      // 构造天空盒效果
      let skyBoxManager = new Glodon.Bimface.Plugins.SkyBox.SkyBoxManager(skyBoxManagerConfig);

      // 调用EffectManager的接口将天空盒效果对象添加至场景中
      effectManager.addEffect(skyBoxManager,{id:'skyBoxId',name:'天空盒效果'});
    }

    // ******************** 添加雨景效果 *********************
    function addRain(){
      // 构造雨景效果配置项，并指定Viewer等参数
      let rainConfig = new Glodon.Bimface.Plugins.WeatherEffect.RainConfig();
      rainConfig.viewer = viewerGIS;
      // 设置阴天程度及雨量
      rainConfig.darkness = 0.3;
      rainConfig.density = 2;
      // 构造雨景效果
      rain = new Glodon.Bimface.Plugins.WeatherEffect.Rain(rainConfig);

      // 调用EffectManager的接口将天空盒效果对象添加至场景中
      effectManager.addEffect(rain,{id:'rainEffectId',name:'雨景效果'});
    }

  </script>
</body>

</html>

恭喜你，已经成功掌握了场景内效果管理相关的内容。

← 构件管理路径漫游（Walkthrough） →