<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel='stylesheet' />
<script src='http://bigemap.com:9000/bigemap-gl.js/v1.1.0/bigemap-gl.js'></script>
<script src='./templates/bmgl-header.js'></script>
</head>
<style>
* {
margin: 0;
padding: 0;
}
#container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
#toolbar {
position: absolute;
}
</style>
<body>
<div id="container"></div>
<div id="loadingOverlay">
<h1>Loading...</h1>
</div>
<div id="toolbar"></div>
</body>
<script>
bmgl.Config.HTTP_URL = 'http://bigemap.com:9000';
// var viewer = new bmgl.Viewer('container', { mapId: 'bigemap.zhongkexingtu' });
var viewer = new bmgl.Viewer("container", {
shouldAnimate: true,
mapId: 'bigemap.zhongkexingtu',
});
var planePosition = bmgl.Cartesian3.fromDegrees(
-75.59777,
40.03883,
800.0
);
var particlesOffset = new bmgl.Cartesian3(
-8.950115473940969,
34.852766731753945,
-30.235411095432937
);
var cameraLocation = bmgl.Cartesian3.add(
planePosition,
particlesOffset,
new bmgl.Cartesian3()
);
var resetCamera = function () {
viewer.camera.lookAt(
cameraLocation,
new bmgl.Cartesian3(-450, -300, 200)
);
};
resetCamera();
// Draw particle image to a canvas
var particleCanvas;
function getImage() {
if (!bmgl.defined(particleCanvas)) {
particleCanvas = document.createElement("canvas");
particleCanvas.width = 20;
particleCanvas.height = 20;
var context2D = particleCanvas.getContext("2d");
context2D.beginPath();
context2D.arc(8, 8, 8, 0, bmgl.Math.TWO_PI, true);
context2D.closePath();
context2D.fillStyle = "rgb(255, 255, 255)";
context2D.fill();
}
return particleCanvas;
}
// Add plane to scene
var hpr = new bmgl.HeadingPitchRoll(
0.0,
bmgl.Math.PI_OVER_TWO,
0.0
);
var orientation = bmgl.Transforms.headingPitchRollQuaternion(
planePosition,
hpr
);
var entity = viewer.entities.add({
model: {
uri: "/templates/glb/bmgl_Air.glb",
scale: 3.5,
},
position: planePosition,
orientation: orientation,
});
// creating particles model matrix
var translationOffset = bmgl.Matrix4.fromTranslation(
particlesOffset,
new bmgl.Matrix4()
);
var translationOfPlane = bmgl.Matrix4.fromTranslation(
planePosition,
new bmgl.Matrix4()
);
var particlesModelMatrix = bmgl.Matrix4.multiplyTransformation(
translationOfPlane,
translationOffset,
new bmgl.Matrix4()
);
// creating the particle systems
var rocketOptions = {
numberOfSystems: 50.0,
iterationOffset: 0.1,
cartographicStep: 0.000001,
baseRadius: 0.0005,
colorOptions: [
{
minimumRed: 1.0,
green: 0.5,
minimumBlue: 0.05,
alpha: 1.0,
},
{
red: 0.9,
minimumGreen: 0.6,
minimumBlue: 0.01,
alpha: 1.0,
},
{
red: 0.8,
green: 0.05,
minimumBlue: 0.09,
alpha: 1.0,
},
{
minimumRed: 1,
minimumGreen: 0.05,
blue: 0.09,
alpha: 1.0,
},
],
};
var cometOptions = {
numberOfSystems: 100.0,
iterationOffset: 0.003,
cartographicStep: 0.0000001,
baseRadius: 0.0005,
colorOptions: [
{
red: 0.6,
green: 0.6,
blue: 0.6,
alpha: 1.0,
},
{
red: 0.6,
green: 0.6,
blue: 0.9,
alpha: 0.9,
},
{
red: 0.5,
green: 0.5,
blue: 0.7,
alpha: 0.5,
},
],
};
var scratchCartesian3 = new bmgl.Cartesian3();
var scratchCartographic = new bmgl.Cartographic();
var forceFunction = function (options, iteration) {
return function (particle, dt) {
dt = bmgl.Math.clamp(dt, 0.0, 0.05);
scratchCartesian3 = bmgl.Cartesian3.normalize(
particle.position,
new bmgl.Cartesian3()
);
scratchCartesian3 = bmgl.Cartesian3.multiplyByScalar(
scratchCartesian3,
-40.0 * dt,
scratchCartesian3
);
scratchCartesian3 = bmgl.Cartesian3.add(
particle.position,
scratchCartesian3,
scratchCartesian3
);
scratchCartographic = bmgl.Cartographic.fromCartesian(
scratchCartesian3,
bmgl.Ellipsoid.WGS84,
scratchCartographic
);
var angle =
(bmgl.Math.PI * 2.0 * iteration) / options.numberOfSystems;
iteration += options.iterationOffset;
scratchCartographic.longitude +=
Math.cos(angle) * options.cartographicStep * 30.0 * dt;
scratchCartographic.latitude +=
Math.sin(angle) * options.cartographicStep * 30.0 * dt;
particle.position = bmgl.Cartographic.toCartesian(
scratchCartographic
);
};
};
var matrix4Scratch = new bmgl.Matrix4();
var scratchAngleForOffset = 0.0;
var scratchOffset = new bmgl.Cartesian3();
var imageSize = new bmgl.Cartesian2(15.0, 15.0);
function createParticleSystems(options, systemsArray) {
var length = options.numberOfSystems;
for (var i = 0; i < length; ++i) {
scratchAngleForOffset =
(Math.PI * 2.0 * i) / options.numberOfSystems;
scratchOffset.x +=
options.baseRadius * Math.cos(scratchAngleForOffset);
scratchOffset.y +=
options.baseRadius * Math.sin(scratchAngleForOffset);
var emitterModelMatrix = bmgl.Matrix4.fromTranslation(
scratchOffset,
matrix4Scratch
);
var color = bmgl.Color.fromRandom(
options.colorOptions[i % options.colorOptions.length]
);
var force = forceFunction(options, i);
var item = viewer.scene.primitives.add(
new bmgl.ParticleSystem({
image: getImage(),
startColor: color,
endColor: color.withAlpha(0.0),
particleLife: 3.5,
speed: 0.00005,
imageSize: imageSize,
emissionRate: 30.0,
emitter: new bmgl.CircleEmitter(0.1),
lifetime: 0.1,
updateCallback: force,
modelMatrix: particlesModelMatrix,
emitterModelMatrix: emitterModelMatrix,
})
);
systemsArray.push(item);
}
}
var rocketSystems = [];
var cometSystems = [];
createParticleSystems(rocketOptions, rocketSystems);
createParticleSystems(cometOptions, cometSystems);
// toolbar elements
function showAll(systemsArray, show) {
var length = systemsArray.length;
for (var i = 0; i < length; ++i) {
systemsArray[i].show = show;
}
}
var options = [
{
text: "Comet Tail",
onselect: function () {
showAll(rocketSystems, false);
showAll(cometSystems, true);
resetCamera();
},
},
{
text: "Rocket Thruster",
onselect: function () {
showAll(cometSystems, false);
showAll(rocketSystems, true);
resetCamera();
},
},
];
Sandcastle.addToolbarMenu(options);
</script>
</html>