mirror of
https://github.com/openglobus/openglobus.git
synced 2025-12-08 19:25:27 +00:00
Merge pull request #567 from openglobus/feature/558_layeranimation_timeout
Added airplane geoObject example
This commit is contained in:
Michael Gevlich
GitHub
commit
f54fa21bd5
@ -136,7 +136,7 @@
|
||||
right: 12px;
|
||||
top: 12px;
|
||||
width: 40px;
|
||||
height: calc(100% - 380px);
|
||||
height: 40px;
|
||||
background-color: rgba(64, 59, 59, 0.85);
|
||||
border-radius: 2px;
|
||||
box-shadow: 0px 1px 4px rgba(15, 15, 15, 0.17);
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<title>Simple Renderer</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script type="module" src="./airplane1.js"></script>
|
||||
<link rel="stylesheet" href="http://www.openglobus.org/og.css" type="text/css" />
|
||||
<link rel="stylesheet" href="../../css/og.css" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
@ -1,87 +1,14 @@
|
||||
"use strict";
|
||||
|
||||
import { Entity } from "../../src/og/entity/Entity.js";
|
||||
import { EntityCollection } from "../../src/og/entity/EntityCollection.js";
|
||||
import { Globe } from "../../src/og/Globe.js";
|
||||
import { XYZ } from "../../src/og/layer/XYZ.js";
|
||||
import { GlobusTerrain } from "../../src/og/terrain/GlobusTerrain.js";
|
||||
import { EmptyTerrain } from "../../src/og/terrain/EmptyTerrain.js";
|
||||
import { LonLat } from '../../src/og/LonLat.js';
|
||||
import * as utils from "../../src/og/utils/shared.js";
|
||||
|
||||
let COUNT = 10,
|
||||
ENTITY = {},
|
||||
ENTITY_OPTIONS = new Map([
|
||||
['farmplane', {
|
||||
countRation: 20,
|
||||
cb: (options) => {
|
||||
options.geoObject.scale = 100;
|
||||
options.geoObject.yaw = -50;
|
||||
return {
|
||||
...options,
|
||||
lonlat: [rnd(-180, 180), rnd(-180, 180), 20000]
|
||||
};
|
||||
}
|
||||
}],
|
||||
['landspot', {
|
||||
countRation: 100,
|
||||
cb: (options) => {
|
||||
options.geoObject.scale = 5;
|
||||
options.geoObject.yaw = -50;
|
||||
return {
|
||||
...options,
|
||||
lonlat: [rnd(-180, 180), rnd(-180, 180), 0]
|
||||
};
|
||||
}
|
||||
}],
|
||||
['satellite', {
|
||||
countRation: 1,
|
||||
cb: (options) => {
|
||||
return {
|
||||
...options,
|
||||
lonlat: [rnd(-180, 180), rnd(-180, 180), 2000000]
|
||||
};
|
||||
}
|
||||
}],
|
||||
['airplane', {
|
||||
countRation: 80,
|
||||
cb: (options) => {
|
||||
options.geoObject.yaw = 75;
|
||||
return {
|
||||
...options,
|
||||
lonlat: [rnd(-180, 180), rnd(-180, 180), 20000]
|
||||
};
|
||||
}
|
||||
}]
|
||||
]);
|
||||
|
||||
const div = document.createElement('div');
|
||||
div.style.setProperty('display', 'flex');
|
||||
div.style.setProperty('flex-direction', 'column');
|
||||
div.style.setProperty('position', 'absolute');
|
||||
div.style.setProperty('top', '10px');
|
||||
div.style.setProperty('left', '10px');
|
||||
div.style.setProperty('color', 'white');
|
||||
div.style.setProperty('background', `rgba(0, 0, 0, .7)`);
|
||||
document.body.appendChild(div);
|
||||
|
||||
const span = document.createElement('span');
|
||||
span.setAttribute('id', 'instance-count');
|
||||
span.innerText = `Instance count: ${COUNT}`;
|
||||
div.appendChild(span);
|
||||
|
||||
const range = document.createElement('input');
|
||||
range.setAttribute('type', 'range');
|
||||
range.setAttribute('min', '1');
|
||||
range.setAttribute('value', '1');
|
||||
range.setAttribute('max', '5000');
|
||||
range.addEventListener('input', () => {
|
||||
COUNT = parseInt(range.value);
|
||||
});
|
||||
div.appendChild(range);
|
||||
|
||||
function rnd(min, max) {
|
||||
return Math.random() * (max - min) + min;
|
||||
}
|
||||
import { Object3d } from '../../src/og/Object3d.js';
|
||||
import { Vector } from '../../src/og/layer/Vector.js';
|
||||
import { LayerSwitcher } from '../../src/og/control/LayerSwitcher.js';
|
||||
|
||||
let globus = new Globe({
|
||||
target: "globus",
|
||||
@ -94,110 +21,57 @@ let globus = new Globe({
|
||||
attribution: "Data @ OpenStreetMap contributors, ODbL"
|
||||
})
|
||||
],
|
||||
terrain: new GlobusTerrain()
|
||||
});
|
||||
let colors = ["red", "orange", "yellow", "green", "lightblue", "darkblue", "purple"];
|
||||
|
||||
let geoObjects = new EntityCollection({
|
||||
entities: [],
|
||||
scaleByDistance: [600000, 24000000, 10000000000]
|
||||
terrain: new EmptyTerrain()
|
||||
});
|
||||
|
||||
for (const [name, entity_opt] of ENTITY_OPTIONS) {
|
||||
fetch(`./${name}.json`)
|
||||
.then((response) => {
|
||||
return response.json();
|
||||
})
|
||||
.then((data) => {
|
||||
const entities = [];
|
||||
const { vertices, indices, normals } = data,
|
||||
defaultOptions = (i) => ({
|
||||
name: "sat-" + i,
|
||||
geoObject: {
|
||||
scale: 100000,
|
||||
instanced: true,
|
||||
tag: name,
|
||||
color: colors[i % 7],
|
||||
vertices,
|
||||
indices,
|
||||
normals
|
||||
},
|
||||
'properties': {
|
||||
'color': colors[i % 7]
|
||||
}
|
||||
});
|
||||
ENTITY[name] = (i) => {
|
||||
const o = defaultOptions(i);
|
||||
return {
|
||||
...o,
|
||||
...(entity_opt && entity_opt.cb ? entity_opt.cb(o, i) : {})
|
||||
};
|
||||
};
|
||||
globus.planet.addControl(new LayerSwitcher());
|
||||
|
||||
for (let i = 0; i < COUNT; i++) {
|
||||
entities.push(new Entity(ENTITY[name](i)));
|
||||
}
|
||||
geoObjects.addEntities(entities);
|
||||
});
|
||||
}
|
||||
let obj3d = Object3d.createArrow();
|
||||
|
||||
geoObjects.events.on("lclick", function (e) {
|
||||
e.pickingObject.geoObject.remove();
|
||||
});
|
||||
|
||||
geoObjects.events.on("mouseenter", function (e) {
|
||||
let b = e.pickingObject.geoObject;
|
||||
b.setColor(1, 1, 1);
|
||||
});
|
||||
geoObjects.events.on("mouseleave", function (e) {
|
||||
let b = e.pickingObject;
|
||||
b.geoObject.setColor4v(utils.htmlColorToRgba(b.properties.color));
|
||||
});
|
||||
|
||||
geoObjects.addTo(globus.planet);
|
||||
|
||||
// globus.planet.flyLonLat(new LonLat(0, 0, 2000000));
|
||||
window.globus = globus;
|
||||
window.ENTITY_OPTIONS = ENTITY_OPTIONS;
|
||||
|
||||
const types = [...ENTITY_OPTIONS.keys()].reduce((acc, name) => {
|
||||
return [...acc, ...new Array(ENTITY_OPTIONS.get(name).countRation).fill(name)];
|
||||
}, []);
|
||||
globus.planet.events.on("draw", () => {
|
||||
const entities = geoObjects._entities;
|
||||
if (entities.length > 0) {
|
||||
if (entities.length > COUNT) {
|
||||
while (entities.length > COUNT) {
|
||||
entities[entities.length - 1].remove();
|
||||
}
|
||||
} else if (entities.length < COUNT) {
|
||||
while (entities.length < COUNT) {
|
||||
geoObjects.add(new Entity(ENTITY[types[entities.length % (types.length)]](entities.length - 1)));
|
||||
}
|
||||
let planes = [
|
||||
new Entity({
|
||||
lonlat: new LonLat(0, 0, 10000),
|
||||
geoObject: {
|
||||
scale: 10000,
|
||||
instanced: true,
|
||||
tag: "plane",
|
||||
color: "rgb(0,305,0)",
|
||||
vertices: obj3d.vertices,
|
||||
indices: obj3d.indexes,
|
||||
normals: obj3d.normals
|
||||
},
|
||||
properties: {
|
||||
name: "plane-1"
|
||||
}
|
||||
}
|
||||
|
||||
if (span && entities.length != span.innerText) {
|
||||
span.innerText = `Instance count: ${entities.length}`;
|
||||
}
|
||||
|
||||
for (let i = 0; i < entities.length; i++) {
|
||||
let e = entities[i],
|
||||
c = e.getLonLat();
|
||||
switch (e.geoObject.tag) {
|
||||
case 'satellite':
|
||||
e.setLonLat(new LonLat(c.lon - 0.03, c.lat < -89 ? 90 : c.lat - 0.03, c.height));
|
||||
e.geoObject.setYaw(e.geoObject._yaw + 0.1);
|
||||
e.geoObject.setPitch(e.geoObject._pitch + 0.1);
|
||||
break;
|
||||
case 'landspot': break;
|
||||
case 'farmplane':
|
||||
e.setLonLat(new LonLat(c.lon - 0.01, c.lat > 89 ? -90 : c.lat + 0.01, c.height));
|
||||
break;
|
||||
default :
|
||||
e.setLonLat(new LonLat(c.lon + 0.01, c.lat > 89 ? -90 : c.lat + 0.01, c.height));
|
||||
break;
|
||||
|
||||
}),
|
||||
new Entity({
|
||||
lonlat: new LonLat(10, 10, 15000),
|
||||
geoObject: {
|
||||
scale: 10000,
|
||||
instanced: true,
|
||||
tag: "plane",
|
||||
color: "rgb(255,0,0)",
|
||||
vertices: obj3d.vertices,
|
||||
indices: obj3d.indexes,
|
||||
normals: obj3d.normals
|
||||
},
|
||||
properties: {
|
||||
name: "plane-2"
|
||||
}
|
||||
}
|
||||
})
|
||||
];
|
||||
|
||||
let planeLayer = new Vector("my planes", {
|
||||
entities: planes
|
||||
});
|
||||
|
||||
globus.planet.addLayer(planeLayer);
|
||||
|
||||
planes[0].geoObject.setYaw(45)
|
||||
planes[0].geoObject.setRoll(75)
|
||||
|
||||
window.LonLat = LonLat;
|
||||
window.planes = planes;
|
||||
|
||||
|
||||
|
||||
|
||||
@ -31,6 +31,10 @@ class Object3d {
|
||||
this._normals = data.normals || [];
|
||||
} else {
|
||||
this._normals = Object3d.getNormals(this._vertices);
|
||||
this._indexes = new Array(this._vertices.length);
|
||||
for (let i = 0, len = this._indexes.length; i < len; i++) {
|
||||
this._indexes[i] = i;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -379,6 +383,35 @@ class Object3d {
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
static createArrow(back = 0.0, height = 2.1, front = -15) {
|
||||
return new Object3d({
|
||||
vertices: [
|
||||
0, height, 0,
|
||||
7, 0, 6,
|
||||
0, 0, front,
|
||||
|
||||
0, 0, back,
|
||||
7, 0, 6,
|
||||
0, height, 0,
|
||||
|
||||
-7, 0, 6,
|
||||
0, 0, back,
|
||||
0, height, 0,
|
||||
|
||||
-7, 0, 6,
|
||||
0, height, 0,
|
||||
0, 0, front,
|
||||
|
||||
-7, 0, 6,
|
||||
0, 0, front,
|
||||
0, 0, back,
|
||||
0, 0, back,
|
||||
0, 0, front,
|
||||
7, 0, 6
|
||||
]
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export { Object3d };
|
||||
@ -16,7 +16,10 @@ import { elementFactory, btnClickHandler } from "./UIhelpers.js";
|
||||
*/
|
||||
class LayerSwitcher extends Control {
|
||||
constructor(options) {
|
||||
super(options);
|
||||
super({
|
||||
name: "LayerSwitcher",
|
||||
...options
|
||||
});
|
||||
this.dialog = null;
|
||||
this.terrainContainer = null;
|
||||
this.baseLayersContainer = null
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user