Commit beec2817 authored by Clément Igonet's avatar Clément Igonet

Improve earth tiles.

parent 66c69cc2
......@@ -52,8 +52,7 @@
var MAX_TILEMESH = 500;
var tileMeshes = {};
var tileMeshQueue = [];
var textures = {};
var textureQueue = [];
var R = 6378.137;
var xtile = 0;
var ytile = 0;
......@@ -63,6 +62,7 @@
var tileGroup = [];
var defaultAlti = 3000000;
// var defaultAlti = 150;
var textureLoader = new THREE.TextureLoader();
textureLoader.crossOrigin = '';
var jsonLoader = new THREE.GeojsonLoader();
......@@ -103,6 +103,39 @@
var globe = new THREE.Mesh(sphere, material);
// earth.add(globe);
// blue
var xMaterial = new THREE.MeshBasicMaterial({
color: 0x0000FF
});
// yellow
var yMaterial = new THREE.MeshBasicMaterial({
color: 0xFFFF00
});
// red
var zMaterial = new THREE.MeshBasicMaterial({
color: 0xFF0000
});
var xAxe = new THREE.Mesh(new THREE.CylinderGeometry(R, R, R * 4000), xMaterial);
xAxe.position.set(100, 0, 0);
xAxe.rotation.set(0, 0, Math.PI / 2);
var yAxe = new THREE.Mesh(new THREE.CylinderGeometry(R, R, R * 4000), yMaterial);
yAxe.position.set(0, 100, 0);
var zAxe = new THREE.Mesh(new THREE.CylinderGeometry(R, R, R * 4000), zMaterial);
zAxe.position.set(0, 0, 100);
zAxe.rotation.set(Math.PI / 2, 0, 0);
earth.add(xAxe);
earth.add(yAxe);
earth.add(zAxe);
// earth.add(getTileMesh(R, 2, 0, 0));
// earth.add(getTileMesh(R, 2, 0, 1));
// earth.add(getTileMesh(R, 2, 0, 2));
// earth.add(getTileMesh(R, 2, 0, 3));
document.addEventListener("keydown", onDocumentKeyDown, false);
camera.position.z = altitude;
......@@ -181,6 +214,7 @@
earth.add(tileGroups);
console.log('zoom_ start:', Math.max(zoom, ZOOM_MIN));
console.log('zoom_ end:', Math.max(zoom - ZOOM_SHIFT_SIZE, ZOOM_MIN) + 1);
for (var zoom_ = Math.max(zoom, ZOOM_MIN); zoom_ > Math.max(zoom - ZOOM_SHIFT_SIZE, ZOOM_MIN); zoom_--) {
var zShift = zoom - zoom_;
tileGroup[zShift] = new THREE.Object3D(); //create an empty container
......@@ -258,44 +292,69 @@
}
if (!tiles.hasOwnProperty(id)) {
var tileRot = new THREE.Object3D(); //create an empty container
// tileRot.rotation.set(-lat * Math.PI / 180, (lon) * Math.PI / 180, 0);
tileRot.position.set(0, R * 1000 * Math.sin(lat * Math.PI / 180), 0);
tileRot.rotation.set(0, (lon) * Math.PI / 180, 0);
tileGroup[zShift].add(tileRot);
var tileMesh = new THREE.Mesh();
var rectShape = new THREE.Shape();
rectShape.moveTo(-widthDown / 2, -widthSide / 2);
rectShape.lineTo(-widthUp / 2, widthSide / 2);
rectShape.lineTo(widthUp / 2, widthSide / 2);
rectShape.lineTo(widthDown / 2, -widthSide / 2);
rectShape.lineTo(-widthDown / 2, -widthSide / 2);
tileMesh.geometry = new THREE.ShapeGeometry(rectShape);
// tileMesh.geometry = new THREE.PlaneGeometry(width_, width_);
assignUVs(tileMesh.geometry);
tileMesh.position.set(0, 0, R * 1000 * Math.cos(lat * Math.PI / 180));
tileMesh.rotation.set(-lat * Math.PI / 180, 0, 0);
tileRot.add(tileMesh);
// var tileEarth = getTileEarth(R * 1000, lat, lon, {
// up: widthUp,
// down: widthDown,
// side: widthSide
// });
// var tileMesh = getTileMesh(R, zoom_, atile, btile);
// tileGroup[zShift].add(tileMesh);
var tileEarth = new THREE.Object3D(); //create an empty container
tileEarth.rotation.set(0, (lon1 + 180) * Math.PI / 180, 0);
// tileEarth.rotation.set(0, 0, 0);
tileGroup[zShift].add(tileEarth);
// if (zoom_ == 19) {
var tileMesh = getTileMesh(R, zoom_, btile);
// } else {
// var tileMesh = getTileMesh(R, zoom_, btile, 0);
// }
// assignUVs(tileMesh.geometry);
tileEarth.add(tileMesh);
// var tileEarth = new THREE.Object3D(); //create an empty container
// tileEarth.position.set(0, R * 1000 * Math.sin(lat * Math.PI / 180), 0);
// tileEarth.rotation.set(0, (lon) * Math.PI / 180, 0);
// tileGroup[zShift].add(tileEarth);
//
// var tileMesh = new THREE.Mesh();
//
// var rectShape = new THREE.Shape();
// rectShape.moveTo(-widthDown / 2, -widthSide / 2);
// rectShape.lineTo(-widthUp / 2, widthSide / 2);
// rectShape.lineTo(widthUp / 2, widthSide / 2);
// rectShape.lineTo(widthDown / 2, -widthSide / 2);
// rectShape.lineTo(-widthDown / 2, -widthSide / 2);
// tileMesh.geometry = new THREE.ShapeGeometry(rectShape);
//
// // tileMesh.geometry = new THREE.PlaneGeometry(width_, width_);
// assignUVs(tileMesh.geometry);
//
// tileMesh.position.set(0, 0, R * 1000 * Math.cos(lat * Math.PI / 180));
// tileMesh.rotation.set(-lat * Math.PI / 180, 0, 0);
//
// tileEarth.add(tileMesh);
// tileMesh.material = texturedMaterialFactory(zoom_, atile % modulus, btile % modulus);
(function(yourTileMesh, yourZoom, yourXtile, yourYtile) {
// var material = new THREE.MeshPhongMaterial( { map: THREE.ImageUtils.loadTexture('images/crate.jpg') } );
(function(yourTileMesh, yourZoom, yourXtile, yourYtile) {
var onLoaded = function(texture) {
var material = new THREE.MeshBasicMaterial({
// MeshFaceMaterial
yourTileMesh.material = new THREE.MeshBasicMaterial({
map: texture
});
var materials = [material];
yourTileMesh.material = new THREE.MeshFaceMaterial(materials);
// yourTileMesh.material.side = THREE.BackSide;
// var material = new THREE.MeshBasicMaterial({
// map: texture
// });
// var materials = [material];
// yourTileMesh.material = new THREE.MeshFaceMaterial(materials);
};
textureFactory(yourZoom, yourXtile, yourYtile, onLoaded);
})(tileMesh, zoom_, atile % modulus, btile % modulus);
......@@ -303,18 +362,20 @@
// if (zoom_ == 19) {
// // console.log('width_:', width_);
// console.log('loading...');
// (function(myTile, zoom, xtile, ytile) {
// (function(earth, myTile, zoom, xtile, ytile) {
// var geojson = 'http://localhost:8081/3dtile?format=geojson&xtile=' + xtile + '&ytile=' + ytile + '&zoom=' + zoom;
// console.log('geojson:', geojson);
// jsonLoader.load(
// // 'http://localhost:8081/3dtile?format=jsonOSf4&xtile=154394&ytile=197054&zoom=19',
// geojson,
// function(obj) {
// console.log('Object added', JSON.stringify(obj));
// // console.log('Object added', JSON.stringify(obj));
// // myTile.add(obj);
// console.log('obj:', JSON.stringify(obj));
// earth.add(obj);
// }
// );
// })(tileMesh, zoom_, atile, btile);
// })(earth, tileMesh, zoom_, atile, btile);
// }
}
}
......
......@@ -30,6 +30,8 @@ THREE.GeojsonLoader = function(manager) {
};
var R = 6378.137;
THREE.GeojsonLoader.prototype = {
constructor: THREE.GeojsonLoader,
......@@ -39,9 +41,7 @@ THREE.GeojsonLoader.prototype = {
var scope = this;
var loader = new THREE.XHRLoader(scope.manager);
loader.load(url, function(text) {
// console.log('loaded:', text);
onLoad(scope.parse(JSON.parse(text)));
// onLoad(text);
}, onProgress, onError);
},
......@@ -52,57 +52,98 @@ THREE.GeojsonLoader.prototype = {
},
parse: function(json) {
var myTest = [{
"type": "Feature",
"properties": {
"type": "bounds",
"tile": "http://a.tile.openstreetmap.org/19/265545/180361.png"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[2.3352814, 48.8601975],
[2.335968, 48.8601975],
[2.335968, 48.8606493],
[2.3352814, 48.8606493]
]
]
var scope = this;
var tile = new THREE.Object3D();
var geojsons;
if (json.constructor === Array) {
geojsons = json;
} else {
geojsons = [json];
}
for (var i = 0; i < geojsons.length; i++) {
var geojson = geojsons[i];
if (geojson.type == 'Feature' &&
geojson.properties.type == 'bounds') {
var boundsGeometry = scope.geoToThreeGeometry(geojson);
tile.add(new THREE.Mesh(
boundsGeometry,
new THREE.MeshLambertMaterial({
color: 0xCC0000
})));
} else
if (geojson.type == 'FeatureCollection' &&
geojson.properties.type == 'building') {
var building = new THREE.Object3D();
for (var j = 0; j < geojson.features.length; j++) {
var feature = geojson.features[j];
if (feature.type == 'Feature' &&
feature.properties.type == 'buildingPart') {
var depth = (feature.properties.height !== "undefined") ? feature.properties.height : 0;
if (feature.geometry.type == 'Polygon') {
var shapes = [];
for (var k = 0; k < feature.geometry.coordinates.length; k++) {
// var plan = new THREE.Object3D(); //create an empty container
var myGeometry;
var myShape = new THREE.Shape();
for (var l = 0; l < feature.geometry.coordinates[k].length; l++) {
var lon = feature.geometry.coordinates[k][l][0];
var lat = feature.geometry.coordinates[k][l][1];
var z = R * 1000 * Math.sin(lat * Math.PI / 180);
var r = (R * 1000 + feature.properties.minHeight) * Math.cos(lat * Math.PI / 180);
var x = r * Math.cos(lon * Math.PI / 180);
var y = r * Math.sin(lon * Math.PI / 180);
if (l == 0) {
myShape.moveTo(x, y, z);
} else {
myShape.lineTo(x, y, z);
}
}
console.log('myShape:', myShape);
shapes[shapes.length] = myShape;
}
var buildingPart = new THREE.Mesh(
new THREE.ExtrudeGeometry(
shapes, {
bevelEnabled: false,
steps: 1,
amount: depth
}
),
new THREE.MeshLambertMaterial({
color: 0xCC0000
}));
building.add(buildingPart);
}
}
}
tile.add(building);
}
}, {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"id": 53815259,
"height": 5,
"levels": null,
"color": "rgb(240,240,240)",
"type": "buildingPart",
"minHeight": 0,
"minLevel": 0,
"roof:shape": "pyramidal",
"roof:height": "5"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[2.3357061, 48.8606057],
[2.335607, 48.8605766],
[2.335563, 48.8606414],
[2.3356622, 48.8606705],
[2.3357061, 48.8606057]
]
]
}
return tile;
},
getShapes: function(coordinates) {
var shapes = [];
for (var k = 0; k < coordinates.length; k++) {
var myGeometry;
var myShape = new THREE.Shape();
for (var l = 0; l < coordinates[k].length; l++) {
var lon = coordinates[k][l][0];
var lat = coordinates[k][l][1];
var z = R * 1000 * Math.sin(lat * Math.PI / 180);
var r = (R * 1000 + feature.properties.minHeight) * Math.cos(lat * Math.PI / 180);
var x = r * Math.cos(lon * Math.PI / 180);
var y = r * Math.sin(lon * Math.PI / 180);
if (l == 0) {
myShape.moveTo(x, y, z);
} else {
myShape.lineTo(x, y, z);
}
}],
"properties": {
"id": 53815259,
"type": "building"
}
}];
return json;
shapes[shapes.length] = myShape;
}
return shapes;
},
parseMaterials: function(json) {
......
// TOOLBOX //
var geoTiles = {};
var geoTileQueue = [];
getTileMesh = function(r, zoom, ytile) {
var id = 'tile_' + zoom + '_' + ytile;
if (!(geoTiles.hasOwnProperty(id))) {
geoTiles[id] = new THREE.Geometry();
var myGeometry = geoTiles[id];
geoTileQueue.push(id);
if (geoTileQueue.length > MAX_TILEMESH) {
delete geoTiles[geoTileQueue.shift()];
}
var lon1 = tile2long(0, zoom);
var lat1 = tile2lat(ytile, zoom);
var lon2 = tile2long(1, zoom);
var lat2 = tile2lat(ytile + 1, zoom);
/*************************
* ^ Y *
* | *
* | *
* | *
* -------> X *
* / *
* / *
* / Z *
*************************/
/***************************
* B C *
* *
* *
* *
* A D *
***************************/
var rUp = r * 1000 * Math.cos(lat1 * Math.PI / 180);
var rDown = r * 1000 * Math.cos(lat2 * Math.PI / 180);
var Ax = rDown * Math.sin(lon1 * Math.PI / 180);
var Ay = r * 1000 * Math.sin(lat2 * Math.PI / 180);
var Az = rDown * Math.cos(lon1 * Math.PI / 180);
var Bx = rUp * Math.sin(lon1 * Math.PI / 180);
var By = r * 1000 * Math.sin(lat1 * Math.PI / 180);
var Bz = rUp * Math.cos(lon1 * Math.PI / 180);
var Cx = rUp * Math.sin(lon2 * Math.PI / 180);
var Cy = r * 1000 * Math.sin(lat1 * Math.PI / 180);
var Cz = rUp * Math.cos(lon2 * Math.PI / 180);
var Dx = rDown * Math.sin(lon2 * Math.PI / 180);
var Dy = r * 1000 * Math.sin(lat2 * Math.PI / 180);
var Dz = rDown * Math.cos(lon2 * Math.PI / 180);
myGeometry.vertices.push(
new THREE.Vector3(Ax, Ay, Az),
new THREE.Vector3(Bx, By, Bz),
new THREE.Vector3(Cx, Cy, Cz),
new THREE.Vector3(Dx, Dy, Dz)
);
myGeometry.faces.push(new THREE.Face3(0, 2, 1));
myGeometry.faces.push(new THREE.Face3(0, 3, 2));
myGeometry.faceVertexUvs[0].push([
new THREE.Vector2(0.0, 0.0),
new THREE.Vector2(1.0, 1.0),
new THREE.Vector2(0.0, 1.0)
]);
myGeometry.faceVertexUvs[0].push([
new THREE.Vector2(0.0, 0.0),
new THREE.Vector2(1.0, 0.0),
new THREE.Vector2(1.0, 1.0)
]);
myGeometry.uvsNeedUpdate = true;
}
return new THREE.Mesh(geoTiles[id]);
}
assignUVs = function(geometry) {
geometry.computeBoundingBox();
......@@ -30,8 +110,31 @@ assignUVs = function(geometry) {
}
// var texturedMaterials = {};
// var textureMaterialQueue = [];
// var texturedMaterialFactory = function(zoom, xtile, ytile) {
// var id = 'tile_' + zoom + '_' + xtile + '_' + ytile;
// if (!(texturedMaterials.hasOwnProperty(id))) {
// var url = TILE_PROVIDER + '/' + zoom + '/' + xtile + '/' + ytile + '.png';
// var material = new THREE.MeshBasicMaterial();
// textureLoader.load(url, function(texture) {
// material.map = texture;
// });
// texturedMaterials[id] = new THREE.MeshFaceMaterial([material]);
// textureMaterialQueue.push(id);
// if (textureMaterialQueue.length > MAX_TILEMESH) {
// delete texturedMaterials[textureMaterialQueue.shift()];
// }
// }
// return texturedMaterials[id];
// }
var textures = {};
var textureQueue = [];
function textureFactory(zoom_, xtile_, ytile_, onLoaded) {
var id = 'tile_' + zoom_ + '_' + xtile_ + '_' + ytile_;
// textures[id] = {};
if (!(textures.hasOwnProperty(id))) {
var url = TILE_PROVIDER + '/' +
zoom_ + '/' +
......@@ -43,11 +146,11 @@ function textureFactory(zoom_, xtile_, ytile_, onLoaded) {
// map: texture
// });
textures[id] = texture;
onLoaded(textures[id]);
textureQueue.push(id);
if (textureQueue.length > MAX_TILEMESH) {
delete textures[textureQueue.shift()];
}
onLoaded(texture);
}
// function(xhr) {
// console.log((xhr.loaded / xhr.total * 100) + '% loaded');
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment