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);