特效

1. 水面

根据坐标点绘制水面

var waterPositions = [Motor.Cartesian3.fromDegrees(121,31),Motor.Cartesian3.fromDegrees(121,32),Motor.Cartesian3.fromDegrees(122,31)];
//绘制水面
var water = viewer.addWater(waterPositions,options);
//删除水面
viewer.removeWater(water);

2. 体渲染

创建体渲染对象

viewer.createVolumeRender({
    center: Motor.Cartesia3.fromDegrees(121,31,2.5),
    dimensions: [10, 10, 5],
    image: require('./assets/images/fires/room_fire_60s_3d.png')
});

自定义颜色表

viewer.createVolumeRender({
    center: Motor.Cartesia3.fromDegrees(121,31,2.5),
    dimensions: [10, 10, 5],
    image: require('./assets/images/fires/room_fire_60s_3d.png'),
    isRGB: false,
    alphaCorrection: 0.1,//透明度矫正参数,0到1之间的数值
    colorScheme: [
        {stop: 0.1, color: 'rgba(0, 0, 255, 0.6)'},//给分布在10%以下的值设置颜色
        {stop: 0.2, color: 'rgba(162, 180, 189, 1)'},//给分布在10%-20%的值设置颜色
        {stop: 0.4, color: 'rgba(255, 255, 0, 1)'},//给分布在20%-40%的值设置颜色
        {stop: 0.6, color: 'rgba(245, 152, 105, 1)'},//给分布在40%-60%的值设置颜色
        {stop: 0.8, color: 'rgba(255, 10, 10, 1)'},//给分布在60%-80%的值设置颜色
        {stop: 1.0, color: 'rgba(255, 0, 0, 1)'},//给分布在80%-100%的值设置颜色
    ]
});

3. 建筑物3d-tiles特效

针对3d-tiles数据,MotorJS为其添加了特殊的显示效果

渐变

通过设置渐变的起始色和终止色,以及渐变的最大高度,给原本纯色的建筑物模型添加渐变效果

var tileset = viewer.loadTileset({
  url: 'http://cim.citylinker.com:13381/sh3dtiles/tongji_tiles/tileset.json',
  gradualOptions:{
    startColor: new Motor.Cartesian3(0,0,1),//起始色
    endColor: new Motor.Cartesian3(1,1,1),//终止色
    gradualOffset: 150//渐变终止的最大高度
  }
  useGradual:true
});
//渐变可以在运行时开关
tileset.useGradual = false;

俯视压平特效

当相机处于俯视建筑物的角度时,三维建筑会自动压平成二维图形

var tileset = viewer.loadTileset({
  url: 'http://cim.citylinker.com:13381/sh3dtiles/tongji_tiles/tileset.json',
  planView:true
});
//俯视压平可以在运行时开关
tileset.planView = false;

俯仰动画

当相机从俯视变为仰视,建筑物从低到高升起的特效

var tileset = viewer.loadTileset({
  url: 'http://cim.citylinker.com:13381/sh3dtiles/tongji_tiles/tileset.json',
  shouldAnimate:true
});
//俯俯仰动画可以在运行时开关
tileset.shouldAnimate = false;

建筑物上的扩散圈效果

在建筑物上添加由中心向外扩散的圆形效果

var dc = new Motor.DynamicCircle({
    position: Motor.Cartesian3.fromDegrees(121,31),
    color:new Motor.Color(1,0,0,1),
    radius:100,//圆圈半径
    width:10//圆环宽度
});
tileset.dynamicCircleCollection.add(dc);
//删除动态圈
tileset.dynamicCircleCollection.remove(dc);
tileset.dynamicCircleCollection.removeByIndex(0);
tileset.dynamicCircleCollection.removeAll();

4. 视频投影

let video = viewer.addVideoProject({
    videoUrl:'./assets/video/big-buck-bunny_trailer.mp4',//视频地址
    viewerPosition: Motor.Cartesian3.fromDegrees(121-0.00014,31.00028,35),//投影原点坐标
    targetPosition: Motor.Cartesian3.fromDegrees(121-0.00014,31.00028,0)//投影目标点坐标
});

5. 粒子效果

let ps1 = new Motor.ParticleSystem({
    image : './assets/images/fire4.png',
    startColor : new Motor.Color(1, 1, 1, 1),
    endColor : new Motor.Color(0.5, 0, 0, 0),
    emissionRate: 200.0,
    startScale: 3.0,
    endScale: 1.5,
    minimumParticleLife: 1.5,
    maximumParticleLife: 1.8,
    minimumSpeed: 7.0,
    maximumSpeed: 9.0,
    emitter: new Motor.CircleEmitter(2),
    imageSize : new Motor.Cartesian2(2.0, 2.0),
    origin : Motor.Cartesian3.fromDegrees(121.00071,31.00040,3.51),
    lifetime : 6,
    minimumParticleLife:1,
    maximumParticleLife:2,
    sizeInMeters:true
});
viewer.addParticleSystem(ps1);