Skip to content

Commit 18e04b2

Browse files
aemkeiaemkei
committed
style: use default prettier settingsg
1 parent 3036b45 commit 18e04b2

File tree

3 files changed

+191
-158
lines changed

3 files changed

+191
-158
lines changed

‎.prettierrc

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"printWidth": 80,
3+
"tabWidth": 2,
4+
"useTabs": false,
5+
"semi": true,
6+
"singleQuote": true,
7+
"trailingComma": "none",
8+
"bracketSpacing": false,
9+
"jsxBracketSameLine": true,
10+
"arrowParens": "avoid",
11+
"parser": "babylon"
12+
}

‎examples/index.html

+136-131
Original file line numberDiff line numberDiff line change
@@ -1,134 +1,139 @@
1-
21
<!doctype html>
32
<html>
4-
<head>
5-
<meta charset="utf-8">
6-
<title>Three.js Layer - Google Maps API</title>
7-
<style>
8-
html, body, #map-div {
9-
margin: 0;
10-
padding: 0;
11-
height: 100%;
12-
}
13-
</style>
14-
15-
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
16-
<script src="data.js"></script>
17-
<script src="styles.js"></script>
18-
<script src="../lib/detector.js"></script>
19-
<script src="../lib/dat.gui.js"></script>
20-
<script src="../lib/three.js"></script>
21-
<script src="../threejs-layer.js"></script>
22-
23-
<script>
24-
25-
function init() {
26-
27-
var container = document.getElementById('map-div');
28-
29-
var map = new google.maps.Map(container, {
30-
zoom: 3,
31-
mapTypeControl: false,
32-
center: new google.maps.LatLng(10, 0),
33-
mapTypeId: google.maps.MapTypeId.ROADMAP,
34-
styles: styles
35-
});
36-
37-
// if you add renderertype:'Canvas' to the options for ThreejsLayer, you can force the usage of CanvasRenderer
38-
new ThreejsLayer({ map: map }, function(layer){
39-
40-
if (layer.renderertype=='Canvas' || !Detector.webgl) {
41-
texture = new THREE.Texture(generateSprite());
42-
particles = new THREE.Object3D();
43-
material = new THREE.SpriteMaterial({
44-
size: 20,
45-
map: texture,
46-
opacity: 1,
47-
blending: THREE.NormalBlending,
48-
depthTest: false,
49-
transparent: true
50-
});
51-
52-
53-
photos.forEach(function (photo) {
54-
var particle = new THREE.Sprite(material);
55-
var location = new google.maps.LatLng(photo[0], photo[1]),
56-
vertex = layer.fromLatLngToVertex(location);
57-
58-
particle.position.set(vertex.x, vertex.y, 0);
59-
particle.scale.x = particle.scale.y = 20;
60-
particles.add(particle);
61-
material.size = 20;
62-
});
63-
} else {
64-
var geometry = new THREE.Geometry(),
65-
texture = new THREE.Texture(generateSprite()),
66-
material, particles;
67-
68-
photos.forEach(function(photo){
69-
var location = new google.maps.LatLng(photo[0], photo[1]),
70-
vertex = layer.fromLatLngToVertex(location);
71-
72-
geometry.vertices.push( vertex );
73-
});
74-
75-
texture.needsUpdate = true;
76-
77-
material = new THREE.PointCloudMaterial({
78-
size: 20,
79-
map: texture,
80-
opacity: 0.3,
81-
blending: THREE.AdditiveBlending,
82-
depthTest: false,
83-
transparent: true
84-
});
85-
86-
particles = new THREE.PointCloud( geometry, material );
87-
}
88-
layer.add( particles );
89-
90-
gui = new dat.GUI();
91-
92-
function update(){
93-
if (layer.renderertype=='Canvas' || !Detector.webgl) material.map = new THREE.Texture(generateSprite(material.size));
94-
layer.render();
95-
}
96-
97-
gui.add(material, 'size', 2, 100).onChange(update);
98-
gui.add(material, 'opacity', 0.1, 1).onChange(update);
99-
100-
});
101-
}
102-
103-
function generateSprite(size) {
104-
105-
var canvas = document.createElement('canvas'),
106-
context = canvas.getContext('2d'),
107-
gradient;
108-
size = size || 20;
109-
canvas.width = size;
110-
canvas.height = size;
111-
112-
gradient = context.createRadialGradient(
113-
canvas.width / 2, canvas.height / 2, 0,
114-
canvas.width / 2, canvas.height / 2, canvas.width / 2
115-
);
116-
117-
gradient.addColorStop(1.0, 'rgba(255,255,255,0)');
118-
gradient.addColorStop(0.0, 'rgba(255,255,255,1)');
119-
120-
context.fillStyle = gradient;
121-
context.fillRect(0, 0, canvas.width, canvas.height);
122-
123-
return canvas;
124-
}
125-
126-
document.addEventListener('DOMContentLoaded', init, false);
127-
</script>
128-
129-
</head>
130-
131-
<body>
132-
<div id="map-div"></div>
133-
</body>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Three.js Layer - Google Maps API</title>
7+
<style>
8+
html,
9+
body,
10+
#map-div {
11+
margin: 0;
12+
padding: 0;
13+
height: 100%;
14+
}
15+
</style>
16+
17+
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
18+
<script src="data.js"></script>
19+
<script src="styles.js"></script>
20+
<script src="../lib/detector.js"></script>
21+
<script src="../lib/dat.gui.js"></script>
22+
<script src="../lib/three.js"></script>
23+
<script src="../threejs-layer.js"></script>
24+
25+
<script>
26+
function init() {
27+
28+
var container = document.getElementById('map-div');
29+
30+
var map = new google.maps.Map(container, {
31+
zoom: 3,
32+
mapTypeControl: false,
33+
center: new google.maps.LatLng(10, 0),
34+
mapTypeId: google.maps.MapTypeId.ROADMAP,
35+
styles: styles
36+
});
37+
38+
// if you add renderertype:'Canvas' to the options for ThreejsLayer, you can force the usage of CanvasRenderer
39+
new ThreejsLayer({
40+
map: map
41+
}, function (layer) {
42+
43+
if (layer.renderertype == 'Canvas' || !Detector.webgl) {
44+
texture = new THREE.Texture(generateSprite());
45+
particles = new THREE.Object3D();
46+
material = new THREE.SpriteMaterial({
47+
size: 20,
48+
map: texture,
49+
opacity: 1,
50+
blending: THREE.NormalBlending,
51+
depthTest: false,
52+
transparent: true
53+
});
54+
55+
56+
photos.forEach(function (photo) {
57+
var particle = new THREE.Sprite(material);
58+
var location = new google.maps.LatLng(photo[0], photo[1]),
59+
vertex = layer.fromLatLngToVertex(location);
60+
61+
particle.position.set(vertex.x, vertex.y, 0);
62+
particle.scale.x = particle.scale.y = 20;
63+
particles.add(particle);
64+
material.size = 20;
65+
});
66+
} else {
67+
var geometry = new THREE.Geometry(),
68+
texture = new THREE.Texture(generateSprite()),
69+
material, particles;
70+
71+
photos.forEach(function (photo) {
72+
var location = new google.maps.LatLng(photo[0], photo[1]),
73+
vertex = layer.fromLatLngToVertex(location);
74+
75+
geometry.vertices.push(vertex);
76+
});
77+
78+
texture.needsUpdate = true;
79+
80+
material = new THREE.PointCloudMaterial({
81+
size: 20,
82+
map: texture,
83+
opacity: 0.3,
84+
blending: THREE.AdditiveBlending,
85+
depthTest: false,
86+
transparent: true
87+
});
88+
89+
particles = new THREE.PointCloud(geometry, material);
90+
}
91+
layer.add(particles);
92+
93+
gui = new dat.GUI();
94+
95+
function update() {
96+
if (layer.renderertype == 'Canvas' || !Detector.webgl) material.map = new THREE.Texture(generateSprite(
97+
material.size));
98+
layer.render();
99+
}
100+
101+
gui.add(material, 'size', 2, 100).onChange(update);
102+
gui.add(material, 'opacity', 0.1, 1).onChange(update);
103+
104+
});
105+
}
106+
107+
function generateSprite(size) {
108+
109+
var canvas = document.createElement('canvas'),
110+
context = canvas.getContext('2d'),
111+
gradient;
112+
size = size || 20;
113+
canvas.width = size;
114+
canvas.height = size;
115+
116+
gradient = context.createRadialGradient(
117+
canvas.width / 2, canvas.height / 2, 0,
118+
canvas.width / 2, canvas.height / 2, canvas.width / 2
119+
);
120+
121+
gradient.addColorStop(1.0, 'rgba(255,255,255,0)');
122+
gradient.addColorStop(0.0, 'rgba(255,255,255,1)');
123+
124+
context.fillStyle = gradient;
125+
context.fillRect(0, 0, canvas.width, canvas.height);
126+
127+
return canvas;
128+
}
129+
130+
document.addEventListener('DOMContentLoaded', init, false);
131+
</script>
132+
133+
</head>
134+
135+
<body>
136+
<div id="map-div"></div>
137+
</body>
138+
134139
</html>

0 commit comments

Comments
 (0)