-
Notifications
You must be signed in to change notification settings - Fork 35
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
style: use default prettier settingsg
- Loading branch information
Showing
3 changed files
with
191 additions
and
158 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| { | ||
| "printWidth": 80, | ||
| "tabWidth": 2, | ||
| "useTabs": false, | ||
| "semi": true, | ||
| "singleQuote": true, | ||
| "trailingComma": "none", | ||
| "bracketSpacing": false, | ||
| "jsxBracketSameLine": true, | ||
| "arrowParens": "avoid", | ||
| "parser": "babylon" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,134 +1,139 @@ | ||
|
|
||
| <!doctype html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>Three.js Layer - Google Maps API</title> | ||
| <style> | ||
| html, body, #map-div { | ||
| margin: 0; | ||
| padding: 0; | ||
| height: 100%; | ||
| } | ||
| </style> | ||
|
|
||
| <script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> | ||
| <script src="data.js"></script> | ||
| <script src="styles.js"></script> | ||
| <script src="../lib/detector.js"></script> | ||
| <script src="../lib/dat.gui.js"></script> | ||
| <script src="../lib/three.js"></script> | ||
| <script src="../threejs-layer.js"></script> | ||
|
|
||
| <script> | ||
|
|
||
| function init() { | ||
|
|
||
| var container = document.getElementById('map-div'); | ||
|
|
||
| var map = new google.maps.Map(container, { | ||
| zoom: 3, | ||
| mapTypeControl: false, | ||
| center: new google.maps.LatLng(10, 0), | ||
| mapTypeId: google.maps.MapTypeId.ROADMAP, | ||
| styles: styles | ||
| }); | ||
|
|
||
| // if you add renderertype:'Canvas' to the options for ThreejsLayer, you can force the usage of CanvasRenderer | ||
| new ThreejsLayer({ map: map }, function(layer){ | ||
|
|
||
| if (layer.renderertype=='Canvas' || !Detector.webgl) { | ||
| texture = new THREE.Texture(generateSprite()); | ||
| particles = new THREE.Object3D(); | ||
| material = new THREE.SpriteMaterial({ | ||
| size: 20, | ||
| map: texture, | ||
| opacity: 1, | ||
| blending: THREE.NormalBlending, | ||
| depthTest: false, | ||
| transparent: true | ||
| }); | ||
|
|
||
|
|
||
| photos.forEach(function (photo) { | ||
| var particle = new THREE.Sprite(material); | ||
| var location = new google.maps.LatLng(photo[0], photo[1]), | ||
| vertex = layer.fromLatLngToVertex(location); | ||
|
|
||
| particle.position.set(vertex.x, vertex.y, 0); | ||
| particle.scale.x = particle.scale.y = 20; | ||
| particles.add(particle); | ||
| material.size = 20; | ||
| }); | ||
| } else { | ||
| var geometry = new THREE.Geometry(), | ||
| texture = new THREE.Texture(generateSprite()), | ||
| material, particles; | ||
|
|
||
| photos.forEach(function(photo){ | ||
| var location = new google.maps.LatLng(photo[0], photo[1]), | ||
| vertex = layer.fromLatLngToVertex(location); | ||
|
|
||
| geometry.vertices.push( vertex ); | ||
| }); | ||
|
|
||
| texture.needsUpdate = true; | ||
|
|
||
| material = new THREE.PointCloudMaterial({ | ||
| size: 20, | ||
| map: texture, | ||
| opacity: 0.3, | ||
| blending: THREE.AdditiveBlending, | ||
| depthTest: false, | ||
| transparent: true | ||
| }); | ||
|
|
||
| particles = new THREE.PointCloud( geometry, material ); | ||
| } | ||
| layer.add( particles ); | ||
|
|
||
| gui = new dat.GUI(); | ||
|
|
||
| function update(){ | ||
| if (layer.renderertype=='Canvas' || !Detector.webgl) material.map = new THREE.Texture(generateSprite(material.size)); | ||
| layer.render(); | ||
| } | ||
|
|
||
| gui.add(material, 'size', 2, 100).onChange(update); | ||
| gui.add(material, 'opacity', 0.1, 1).onChange(update); | ||
|
|
||
| }); | ||
| } | ||
|
|
||
| function generateSprite(size) { | ||
|
|
||
| var canvas = document.createElement('canvas'), | ||
| context = canvas.getContext('2d'), | ||
| gradient; | ||
| size = size || 20; | ||
| canvas.width = size; | ||
| canvas.height = size; | ||
|
|
||
| gradient = context.createRadialGradient( | ||
| canvas.width / 2, canvas.height / 2, 0, | ||
| canvas.width / 2, canvas.height / 2, canvas.width / 2 | ||
| ); | ||
|
|
||
| gradient.addColorStop(1.0, 'rgba(255,255,255,0)'); | ||
| gradient.addColorStop(0.0, 'rgba(255,255,255,1)'); | ||
|
|
||
| context.fillStyle = gradient; | ||
| context.fillRect(0, 0, canvas.width, canvas.height); | ||
|
|
||
| return canvas; | ||
| } | ||
|
|
||
| document.addEventListener('DOMContentLoaded', init, false); | ||
| </script> | ||
|
|
||
| </head> | ||
|
|
||
| <body> | ||
| <div id="map-div"></div> | ||
| </body> | ||
|
|
||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>Three.js Layer - Google Maps API</title> | ||
| <style> | ||
| html, | ||
| body, | ||
| #map-div { | ||
| margin: 0; | ||
| padding: 0; | ||
| height: 100%; | ||
| } | ||
| </style> | ||
|
|
||
| <script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> | ||
| <script src="data.js"></script> | ||
| <script src="styles.js"></script> | ||
| <script src="../lib/detector.js"></script> | ||
| <script src="../lib/dat.gui.js"></script> | ||
| <script src="../lib/three.js"></script> | ||
| <script src="../threejs-layer.js"></script> | ||
|
|
||
| <script> | ||
| function init() { | ||
|
|
||
| var container = document.getElementById('map-div'); | ||
|
|
||
| var map = new google.maps.Map(container, { | ||
| zoom: 3, | ||
| mapTypeControl: false, | ||
| center: new google.maps.LatLng(10, 0), | ||
| mapTypeId: google.maps.MapTypeId.ROADMAP, | ||
| styles: styles | ||
| }); | ||
|
|
||
| // if you add renderertype:'Canvas' to the options for ThreejsLayer, you can force the usage of CanvasRenderer | ||
| new ThreejsLayer({ | ||
| map: map | ||
| }, function (layer) { | ||
|
|
||
| if (layer.renderertype == 'Canvas' || !Detector.webgl) { | ||
| texture = new THREE.Texture(generateSprite()); | ||
| particles = new THREE.Object3D(); | ||
| material = new THREE.SpriteMaterial({ | ||
| size: 20, | ||
| map: texture, | ||
| opacity: 1, | ||
| blending: THREE.NormalBlending, | ||
| depthTest: false, | ||
| transparent: true | ||
| }); | ||
|
|
||
|
|
||
| photos.forEach(function (photo) { | ||
| var particle = new THREE.Sprite(material); | ||
| var location = new google.maps.LatLng(photo[0], photo[1]), | ||
| vertex = layer.fromLatLngToVertex(location); | ||
|
|
||
| particle.position.set(vertex.x, vertex.y, 0); | ||
| particle.scale.x = particle.scale.y = 20; | ||
| particles.add(particle); | ||
| material.size = 20; | ||
| }); | ||
| } else { | ||
| var geometry = new THREE.Geometry(), | ||
| texture = new THREE.Texture(generateSprite()), | ||
| material, particles; | ||
|
|
||
| photos.forEach(function (photo) { | ||
| var location = new google.maps.LatLng(photo[0], photo[1]), | ||
| vertex = layer.fromLatLngToVertex(location); | ||
|
|
||
| geometry.vertices.push(vertex); | ||
| }); | ||
|
|
||
| texture.needsUpdate = true; | ||
|
|
||
| material = new THREE.PointCloudMaterial({ | ||
| size: 20, | ||
| map: texture, | ||
| opacity: 0.3, | ||
| blending: THREE.AdditiveBlending, | ||
| depthTest: false, | ||
| transparent: true | ||
| }); | ||
|
|
||
| particles = new THREE.PointCloud(geometry, material); | ||
| } | ||
| layer.add(particles); | ||
|
|
||
| gui = new dat.GUI(); | ||
|
|
||
| function update() { | ||
| if (layer.renderertype == 'Canvas' || !Detector.webgl) material.map = new THREE.Texture(generateSprite( | ||
| material.size)); | ||
| layer.render(); | ||
| } | ||
|
|
||
| gui.add(material, 'size', 2, 100).onChange(update); | ||
| gui.add(material, 'opacity', 0.1, 1).onChange(update); | ||
|
|
||
| }); | ||
| } | ||
|
|
||
| function generateSprite(size) { | ||
|
|
||
| var canvas = document.createElement('canvas'), | ||
| context = canvas.getContext('2d'), | ||
| gradient; | ||
| size = size || 20; | ||
| canvas.width = size; | ||
| canvas.height = size; | ||
|
|
||
| gradient = context.createRadialGradient( | ||
| canvas.width / 2, canvas.height / 2, 0, | ||
| canvas.width / 2, canvas.height / 2, canvas.width / 2 | ||
| ); | ||
|
|
||
| gradient.addColorStop(1.0, 'rgba(255,255,255,0)'); | ||
| gradient.addColorStop(0.0, 'rgba(255,255,255,1)'); | ||
|
|
||
| context.fillStyle = gradient; | ||
| context.fillRect(0, 0, canvas.width, canvas.height); | ||
|
|
||
| return canvas; | ||
| } | ||
|
|
||
| document.addEventListener('DOMContentLoaded', init, false); | ||
| </script> | ||
|
|
||
| </head> | ||
|
|
||
| <body> | ||
| <div id="map-div"></div> | ||
| </body> | ||
|
|
||
| </html> |
Oops, something went wrong.