mirror
/
vizicities
kopia lustrzana https://github.com/robhawkes/vizicities
1
0
Forkuj 0
Kod Zgłoszenia Projekty Wydania Wiki Aktywność

Added more examples

master
Robin Hawkes 2016-06-17 12:19:09 +01:00
rodzic 0015f077a0
commit b9dbf3b188
18 zmienionych plików z 188 dodań i 142 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

6
README.md
Wyświetl plik

@ -20,6 +20,12 @@ Already know what you're doing? Here's the quickest way to install ViziCities...
## Examples
* Basic example (2D basemap and 3D buildings)
* Buildings coloured by height
* GeoJSON example (points, linestrings and polygons)
* NYC MTA routes
* All the things (will test even the best computers)
## Main changes since 0.2

24
dist/vizicities.js vendored
Wyświetl plik

@ -4359,9 +4359,9 @@ return /******/ (function(modules) { // webpackBootstrap
if (!this._options.skybox) {
var directionalLight = new _three2['default'].DirectionalLight(0xffffff, 1);
directionalLight.position.x = 1000;
directionalLight.position.y = 1000;
directionalLight.position.z = 1000;
directionalLight.position.x = 10000;
directionalLight.position.y = 10000;
directionalLight.position.z = 10000;
// TODO: Get shadows working in non-PBR scenes
@ -4384,18 +4384,26 @@ return /******/ (function(modules) { // webpackBootstrap
// // directionalLight.shadow.darkness = 0.15;
var directionalLight2 = new _three2['default'].DirectionalLight(0xffffff, 0.5);
directionalLight2.position.x = -1000;
directionalLight2.position.y = 1000;
directionalLight2.position.z = -1000;
directionalLight2.position.x = -10000;
directionalLight2.position.y = 10000;
directionalLight2.position.z = 0;
// var helper = new THREE.DirectionalLightHelper(directionalLight, 10);
// var helper2 = new THREE.DirectionalLightHelper(directionalLight2, 10);
var directionalLight3 = new _three2['default'].DirectionalLight(0xffffff, 0.5);
directionalLight3.position.x = 10000;
directionalLight3.position.y = 10000;
directionalLight3.position.z = -10000;
this.add(directionalLight);
this.add(directionalLight2);
this.add(directionalLight3);
// var helper = new THREE.DirectionalLightHelper(directionalLight, 10);
// var helper2 = new THREE.DirectionalLightHelper(directionalLight2, 10);
// var helper3 = new THREE.DirectionalLightHelper(directionalLight3, 10);
//
// this.add(helper);
// this.add(helper2);
// this.add(helper3);
} else {
// Directional light that will be projected from the sun
this._skyboxLight = new _three2['default'].DirectionalLight(0xffffff, 1);

8
dist/vizicities.min.js vendored
Wyświetl plik

File diff suppressed because one or more lines are too long

2
dist/vizicities.min.js.map vendored
Wyświetl plik

File diff suppressed because one or more lines are too long

5
examples/kitchen-sink/index.html → examples/all-the-things/index.html
Wyświetl plik

@ -2,17 +2,14 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<title>Kitchen Sink ViziCities Example</title>
<title>All The Things ViziCities Example</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="world"></div>
<script src="../vendor/three.min.js"></script>
<script src="../vendor/threex.rendererstats.js"></script>
<script src="../vendor/TweenMax.min.js"></script>
<script src="../../dist/vizicities.min.js"></script>
<script src="main.js"></script>

0
examples/kitchen-sink/main.css → examples/all-the-things/main.css
Wyświetl plik

2
examples/kitchen-sink/main.js → examples/all-the-things/main.js
Wyświetl plik

@ -17,7 +17,7 @@ VIZI.imageTileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
}).addTo(world);
// Building and roads from Mapzen (polygons and linestrings)
// Buildings and roads from Mapzen (polygons and linestrings)
var topoJSONTileLayer = VIZI.topoJSONTileLayer('https://vector.mapzen.com/osm/buildings,roads/{z}/{x}/{y}.topojson?api_key=vector-tiles-NT5Emiw', {
interactive: false,
style: function(feature) {

6
examples/basic/index.html
Wyświetl plik

@ -8,14 +8,8 @@
<body>
<div id="world"></div>
<!-- Livereload -->
<script src='http://localhost:35729/livereload.js'></script>
<script src="../vendor/three.min.js"></script>
<script src="../vendor/threex.rendererstats.js"></script>
<script src="../vendor/TweenMax.min.js"></script>
<script src="../../dist/vizicities.min.js"></script>
<script src="main.js"></script>

119
examples/basic/main.js
Wyświetl plik

@ -1,47 +1,21 @@
// London
var coords = [51.505, -0.09];
// Manhattan
// var coords = [40.739940, -73.988801];
var coords = [40.739940, -73.988801];
var world = VIZI.world('world', {
skybox: true,
postProcessing: true
skybox: false,
postProcessing: false
}).setView(coords);
world._environment._skybox.setInclination(0.4);
// Add controls
VIZI.Controls.orbit().addTo(world);
// http://{s}.tile.osm.org/{z}/{x}/{y}.png
// http://{s}.tiles.wmflabs.org/osm-no-labels/{z}/{x}/{y}.png
var imageTileLayer = VIZI.imageTileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
// CartoDB basemap
VIZI.imageTileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
}).addTo(world);
// var layer = VIZI.geoJSONLayer('http://vector.mapzen.com/osm/roads,pois,buildings/13/4088/2722.json', {
// output: true,
// interactive: true,
// style: {
// color: '#ff0000',
// lineColor: '#0000ff',
// lineRenderOrder: 1,
// pointColor: '#00cc00'
// },
// pointGeometry: function(feature) {
// var geometry = new THREE.SphereGeometry(2, 16, 16);
// return geometry;
// },
// onEachFeature: function(feature, layer) {
// layer.on('click', function(layer, point2d, point3d, intersects) {
// console.log(layer, point2d, point3d, intersects);
// });
// }
// }).addTo(world);
// Building and roads from Mapzen (polygons and linestrings)
var topoJSONTileLayer = VIZI.topoJSONTileLayer('https://vector.mapzen.com/osm/buildings,roads/{z}/{x}/{y}.topojson?api_key=vector-tiles-NT5Emiw', {
// Buildings from Mapzen
VIZI.topoJSONTileLayer('https://vector.mapzen.com/osm/buildings/{z}/{x}/{y}.topojson?api_key=vector-tiles-NT5Emiw', {
interactive: false,
style: function(feature) {
var height;
@ -53,89 +27,12 @@ var topoJSONTileLayer = VIZI.topoJSONTileLayer('https://vector.mapzen.com/osm/bu
}
return {
height: height,
lineColor: '#f7c616',
lineWidth: 1,
lineTransparent: true,
lineOpacity: 0.2,
lineBlending: THREE.AdditiveBlending,
lineRenderOrder: 2
height: height
};
},
filter: function(feature) {
// Don't show points
return feature.geometry.type !== 'Point';
},
// onEachFeature: function(feature, layer) {
// if (feature.geometry.type !== 'Polygon') {
// return;
// }
//
// // Make polygons clickable
// layer.on('click', function(layer, point2d, point3d, intersects) {
// console.log(layer, point2d, point3d, intersects);
// });
// },
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, <a href="http://whosonfirst.mapzen.com#License">Who\'s On First</a>.'
}).addTo(world);
// Just buildings from Mapzen (polygons)
// var topoJSONTileLayer = VIZI.topoJSONTileLayer('https://vector.mapzen.com/osm/buildings/{z}/{x}/{y}.topojson?api_key=vector-tiles-NT5Emiw', {
// style: function(feature) {
// var height;
//
// if (feature.properties.height) {
// height = feature.properties.height;
// } else {
// height = 10 + Math.random() * 10;
// }
//
// return {
// // color: (feature.properties.area > 10000) ? '#ff0000' : '#0000ff'
// color: '#ffffff',
// height: height
// };
// },
// // filter: function(feature) {
// // // Only show features with an area larger than 5000 (metres squared in
// // // projected units)
// // return feature.properties.area > 5000;
// // },
// attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, <a href="http://whosonfirst.mapzen.com#License">Who\'s On First</a>.'
// }).addTo(world);
// London Underground lines
var geoJSONLayer = VIZI.geoJSONLayer('https://rawgit.com/robhawkes/4acb9d6a6a5f00a377e2/raw/30ae704a44e10f2e13fb7e956e80c3b22e8e7e81/tfl_lines.json', {
output: true,
interactive: true,
style: function(feature) {
var colour = feature.properties.lines[0].colour || '#ffffff';
return {
lineColor: colour,
lineHeight: 20,
lineWidth: 3,
lineTransparent: true,
lineOpacity: 0.5,
lineBlending: THREE.AdditiveBlending,
lineRenderOrder: 2
};
},
onEachFeature: function(feature, layer) {
layer.on('click', function(layer, point2d, point3d, intersects) {
console.log(layer, point2d, point3d, intersects);
});
},
attribution: '&copy; Transport for London.'
}).addTo(world);
// Set up render debug stats
var rendererStats = new THREEx.RendererStats();
rendererStats.domElement.style.position = 'absolute';
rendererStats.domElement.style.left = '0px';
rendererStats.domElement.style.bottom = '0px';
document.body.appendChild(rendererStats.domElement);
world.on('postUpdate', function() {
rendererStats.update(world._engine._renderer);
});

18
examples/colour-by-height/index.html 100644
Wyświetl plik

@ -0,0 +1,18 @@
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<title>Colour by Height ViziCities Example</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="world"></div>
<script src="../vendor/three.min.js"></script>
<script src="../vendor/TweenMax.min.js"></script>
<script src="../vendor/chroma.min.js"></script>
<script src="../../dist/vizicities.min.js"></script>
<script src="main.js"></script>
</body>
</html>

4
examples/colour-by-height/main.css 100644
Wyświetl plik

@ -0,0 +1,4 @@
* { margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden;}
#world { height: 100%; }

44
examples/colour-by-height/main.js 100644
Wyświetl plik

@ -0,0 +1,44 @@
// Manhattan
var coords = [40.739940, -73.988801];
var world = VIZI.world('world', {
skybox: false,
postProcessing: false
}).setView(coords);
// Add controls
VIZI.Controls.orbit().addTo(world);
// CartoDB basemap
VIZI.imageTileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
}).addTo(world);
// Chroma scale for height-based colours
var colourScale = chroma.scale('YlOrBr').domain([0,200]);
// Buildings from Mapzen
VIZI.topoJSONTileLayer('https://vector.mapzen.com/osm/buildings/{z}/{x}/{y}.topojson?api_key=vector-tiles-NT5Emiw', {
interactive: false,
style: function(feature) {
var height;
if (feature.properties.height) {
height = feature.properties.height;
} else {
height = 10 + Math.random() * 10;
}
var colour = colourScale(height).hex();
return {
color: colour,
height: height
};
},
filter: function(feature) {
// Don't show points
return feature.geometry.type !== 'Point';
},
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, <a href="http://whosonfirst.mapzen.com#License">Who\'s On First</a>.'
}).addTo(world);

17
examples/geojson/index.html 100644
Wyświetl plik

@ -0,0 +1,17 @@
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<title>GeoJSON ViziCities Example</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="world"></div>
<script src="../vendor/three.min.js"></script>
<script src="../vendor/TweenMax.min.js"></script>
<script src="../../dist/vizicities.min.js"></script>
<script src="main.js"></script>
</body>
</html>

4
examples/geojson/main.css 100644
Wyświetl plik

@ -0,0 +1,4 @@
* { margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden;}
#world { height: 100%; }

30
examples/geojson/main.js 100644
Wyświetl plik

@ -0,0 +1,30 @@
// Manhattan
var coords = [40.722282152, -73.992919922];
var world = VIZI.world('world', {
skybox: false,
postProcessing: false
}).setView(coords);
// Add controls
VIZI.Controls.orbit().addTo(world);
// CartoDB basemap
VIZI.imageTileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
}).addTo(world);
// Mapzen GeoJSON tile including points, linestrings and polygons
VIZI.geoJSONLayer('http://vector.mapzen.com/osm/roads,pois,buildings/14/4824/6159.json', {
output: true,
style: {
color: '#ff0000',
lineColor: '#0000ff',
lineRenderOrder: 1,
pointColor: '#00cc00'
},
pointGeometry: function(feature) {
var geometry = new THREE.SphereGeometry(2, 16, 16);
return geometry;
}
}).addTo(world);

2
examples/mta-routes/index.html
Wyświetl plik

@ -9,9 +9,7 @@
<div id="world"></div>
<script src="../vendor/three.min.js"></script>
<script src="../vendor/TweenMax.min.js"></script>
<script src="../../dist/vizicities.min.js"></script>
<script src="main.js"></script>

6
examples/mta-routes/main.js
Wyświetl plik

@ -6,11 +6,10 @@ var world = VIZI.world('world', {
postProcessing: false
}).setView(coords);
// world._environment._skybox.setInclination(0.3);
// Add controls
VIZI.Controls.orbit().addTo(world);
// CartoDB basemap
VIZI.imageTileLayer('http://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
}).addTo(world);
@ -25,9 +24,6 @@ VIZI.geoJSONLayer('https://cdn.rawgit.com/robhawkes/0b08e6e60fd329bf2ef342c1122b
return {
lineColor: colour,
lineWidth: 1.5,
// lineTransparent: true,
// lineOpacity: 0.2,
// lineBlending: THREE.AdditiveBlending,
lineRenderOrder: 2
};
},

33
examples/vendor/chroma.min.js vendored 100644
Wyświetl plik

File diff suppressed because one or more lines are too long