Newer
Older
//element 0: others | 1: sun | 2: earth | 3: GUI view | 4: inclination
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
function makeTextSprite(element, message, parameters )
{
if ( parameters === undefined ) parameters = {};
var fontface = parameters.hasOwnProperty("fontface") ?
parameters["fontface"] : "Arial";
var fontsize = parameters.hasOwnProperty("fontsize") ?
parameters["fontsize"] : 12;
var borderThickness = parameters.hasOwnProperty("borderThickness") ?
parameters["borderThickness"] : 4;
var borderColor = parameters.hasOwnProperty("borderColor") ?
parameters["borderColor"] : { r:0, g:0, b:0, a:1.0 };
var fontColor = parameters.hasOwnProperty("fontColor") ?
parameters["fontColor"] : { r:255, g:255, b:255, a:1.0 };
var backgroundColor = parameters.hasOwnProperty("backgroundColor") ?
parameters["backgroundColor"] : { r:255, g:255, b:255, a:1.0 };
//var spriteAlignment = THREE.SpriteAlignment.topLeft;
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
context.font = "Normal " + fontsize + "px " + fontface;
// get size data (height depends only on font size)
var metrics = context.measureText( message );
var textWidth = metrics.width;
// background color
context.fillStyle = "rgba(" + backgroundColor.r + "," + backgroundColor.g + ","
+ backgroundColor.b + "," + backgroundColor.a + ")";
// border color
context.strokeStyle = "rgba(" + borderColor.r + "," + borderColor.g + ","
+ borderColor.b + "," + borderColor.a + ")";
context.lineWidth = borderThickness;
roundRect(context, borderThickness/2, borderThickness/2, textWidth + borderThickness, fontsize * 1.4 + borderThickness, 6);
// 1.4 is extra height factor for text below baseline: g,j,p,q.
// text color
context.fillStyle = "rgba(" + fontColor.r + "," + fontColor.g + ","
+ fontColor.b + "," + fontColor.a + ")";
context.fillText( message, borderThickness, fontsize + borderThickness);
// canvas contents will be used for a texture
var texture = new THREE.Texture(canvas)
texture.needsUpdate = true;
var spriteMaterial = new THREE.SpriteMaterial(
{ map: texture, useScreenCoordinates: false/*, alignment: spriteAlignment*/ } );
var sprite = new THREE.Sprite( spriteMaterial );
if(element==1){//Sun
contextSun = context;
fontsizeSun = fontsize;
borderColorSun = borderColor;
borderThicknessSun = borderThickness;
backgroundColorSun = backgroundColor;
fontColorSun = fontColor;
sprite.scale.set(40,20,1.0);
}else if(element==2){//Earth
contextEarth = context;
fontsizeEarth = fontsize;
borderColorEarth = borderColor;
borderThicknessEarth = borderThickness;
backgroundColorEarth = backgroundColor;
fontColorEarth = fontColor;
sprite.scale.set(50,25,1.0);
}else if(element==3){//GUI view
spriteMaterial = new THREE.SpriteMaterial(
{ map: texture, useScreenCoordinates: true, alignment: THREE.SpriteAlignment.bottomRight } );
sprite = new THREE.Sprite( spriteMaterial );
sprite.scale.set(64,64,1.0);
}else if(element==4){//Inclination
contextInclination = context;
fontsizeInclination = fontsize;
borderColorInclination = borderColor;
borderThicknessInclination = borderThickness;
backgroundColorInclination = backgroundColor;
fontColorInclination = fontColor;
sprite.scale.set(20,10,1.0);
}else if(element==5){//Longitude
contextLongitude = context;
fontsizeLongitude = fontsize;
borderColorLongitude = borderColor;
borderThicknessLongitude = borderThickness;
backgroundColorLongitude = backgroundColor;
fontColorLongitude = fontColor;
sprite.scale.set(20,10,1.0);
}else if(element==6){//Latitude
contextLatitude = context;
fontsizeLatitude = fontsize;
borderColorLatitude = borderColor;
borderThicknessLatitude = borderThickness;
backgroundColorLatitude = backgroundColor;
fontColorLatitude = fontColor;
sprite.scale.set(20,10,1.0);
Xavier Gibert
committed
}else if(element==7){//Angles between vectors
contextAngles = context;
fontsizeAngles = fontsize;
borderColorAngles = borderColor;
borderThicknessAngles = borderThickness;
backgroundColorAngles = backgroundColor;
fontColorAngles = fontColor;
sprite.scale.set(20,10,1.0);
}else{//Axis labels
sprite.scale.set(20,10,1.0);
}
return sprite;
}
// function for drawing rounded rectangles
function roundRect(ctx, x, y, w, h, r)
{
ctx.beginPath();
ctx.moveTo(x+r, y);
ctx.lineTo(x+w-r, y);
ctx.quadraticCurveTo(x+w, y, x+w, y+r);
ctx.lineTo(x+w, y+h-r);
ctx.quadraticCurveTo(x+w, y+h, x+w-r, y+h);
ctx.lineTo(x+r, y+h);
ctx.quadraticCurveTo(x, y+h, x, y+h-r);
ctx.lineTo(x, y+r);
ctx.quadraticCurveTo(x, y, x+r, y);
ctx.closePath();
ctx.fill();
ctx.stroke();
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
function updateInclinationSprite(inclination){
//Update Sprite
var messageInclination = " i="+parseFloat((inclination * 180) / Math.PI).toFixed(1)+"º ";
contextInclination.fillStyle = "rgba(0, 0, 0, 1.0)"; // CLEAR WITH COLOR BLACK (new BG color)
contextInclination.fill(); // FILL THE CONTEXT
// get size data (height depends only on font size)
var metricsInclination = contextInclination.measureText( messageInclination );
var textWidthInclination = metricsInclination.width;
// background color
contextInclination.fillStyle = "rgba(" + backgroundColorInclination.r + "," + backgroundColorInclination.g + ","
+ backgroundColorInclination.b + "," + backgroundColorInclination.a + ")";
// border color
contextInclination.strokeStyle = "rgba(" + borderColorInclination.r + "," + borderColorInclination.g + ","
+ borderColorInclination.b + "," + borderColorInclination.a + ")";
contextInclination.lineWidth = borderThicknessInclination;
roundRect(contextInclination, borderThicknessInclination/2, borderThicknessInclination/2, textWidthInclination + borderThicknessInclination, fontsizeInclination * 1.4 + borderThicknessInclination, 6);
// 1.4 is extra height factor for text below baseline: g,j,p,q.
// text color
contextInclination.fillStyle = "rgba(" + fontColorInclination.r + "," + fontColorInclination.g + ","
+ fontColorInclination.b + "," + fontColorInclination.a + ")";
contextInclination.fillText( messageInclination, borderThicknessInclination, fontsizeInclination + borderThicknessInclination);
spriteInclination.material.map._needsUpdate = true; // AND UPDATE THE IMAGE..
}
function updateLatitudeSprite(lat){
//Update Sprite
var messageLatitude = " "+parseFloat((lat * 180) / Math.PI).toFixed(1)+"º ";
contextLatitude.fillStyle = "rgba(0, 0, 0, 1.0)"; // CLEAR WITH COLOR BLACK (new BG color)
contextLatitude.fill(); // FILL THE CONTEXT
// get size data (height depends only on font size)
var metricsLatitude = contextLatitude.measureText( messageLatitude );
var textWidthLatitude = metricsLatitude.width;
// background color
contextLatitude.fillStyle = "rgba(" + backgroundColorLatitude.r + "," + backgroundColorLatitude.g + ","
+ backgroundColorLatitude.b + "," + backgroundColorLatitude.a + ")";
// border color
contextLatitude.strokeStyle = "rgba(" + borderColorLatitude.r + "," + borderColorLatitude.g + ","
+ borderColorLatitude.b + "," + borderColorLatitude.a + ")";
contextLatitude.lineWidth = borderThicknessLatitude;
roundRect(contextLatitude, borderThicknessLatitude/2, borderThicknessLatitude/2, textWidthLatitude + borderThicknessLatitude, fontsizeLatitude * 1.4 + borderThicknessLatitude, 6);
// 1.4 is extra height factor for text below baseline: g,j,p,q.
// text color
contextLatitude.fillStyle = "rgba(" + fontColorLatitude.r + "," + fontColorLatitude.g + ","
+ fontColorLatitude.b + "," + fontColorLatitude.a + ")";
contextLatitude.fillText( messageLatitude, borderThicknessLatitude, fontsizeLatitude + borderThicknessLatitude);
lat_sprite.material.map._needsUpdate = true; // AND UPDATE THE IMAGE..
lat_sprite.position = value_earth.clone().setZ(0).normalize().multiplyScalar(arc_sprite_radius);
}
function updateLongitudeSprite(lng){
//Update Sprite
var messageLongitude = " "+parseFloat((lng * 180) / Math.PI).toFixed(1)+"º ";
contextLongitude.fillStyle = "rgba(0, 0, 0, 1.0)"; // CLEAR WITH COLOR BLACK (new BG color)
contextLongitude.fill(); // FILL THE CONTEXT
// get size data (height depends only on font size)
var metricsLongitude = contextLongitude.measureText( messageLongitude );
var textWidthLongitude = metricsLongitude.width;
// background color
contextLongitude.fillStyle = "rgba(" + backgroundColorLongitude.r + "," + backgroundColorLongitude.g + ","
+ backgroundColorLongitude.b + "," + backgroundColorLongitude.a + ")";
// border color
contextLongitude.strokeStyle = "rgba(" + borderColorLongitude.r + "," + borderColorLongitude.g + ","
+ borderColorLongitude.b + "," + borderColorLongitude.a + ")";
contextLongitude.lineWidth = borderThicknessLongitude;
roundRect(contextLongitude, borderThicknessLongitude/2, borderThicknessLongitude/2, textWidthLongitude + borderThicknessLongitude, fontsizeLongitude * 1.4 + borderThicknessLongitude, 6);
// 1.4 is extra height factor for text below baseline: g,j,p,q.
// text color
contextLongitude.fillStyle = "rgba(" + fontColorLongitude.r + "," + fontColorLongitude.g + ","
+ fontColorLongitude.b + "," + fontColorLongitude.a + ")";
contextLongitude.fillText( messageLongitude, borderThicknessLongitude, fontsizeLongitude + borderThicknessLongitude);
long_sprite.material.map._needsUpdate = true; // AND UPDATE THE IMAGE..
}
Xavier Gibert
committed
function updateAnglesSprite(angle){
//Update Sprite
var messageAngles = " "+parseFloat((angle * 180) / Math.PI).toFixed(1)+"º ";
contextAngles.fillStyle = "rgba(0, 0, 0, 1.0)"; // CLEAR WITH COLOR BLACK (new BG color)
contextAngles.fill(); // FILL THE CONTEXT
// get size data (height depends only on font size)
var metricsAngles = contextAngles.measureText( messageAngles );
var textWidthAngles = metricsAngles.width;
// background color
contextAngles.fillStyle = "rgba(" + backgroundColorAngles.r + "," + backgroundColorAngles.g + ","
+ backgroundColorAngles.b + "," + backgroundColorAngles.a + ")";
// border color
contextAngles.strokeStyle = "rgba(" + borderColorAngles.r + "," + borderColorAngles.g + ","
+ borderColorAngles.b + "," + borderColorAngles.a + ")";
contextAngles.lineWidth = borderThicknessAngles;
roundRect(contextAngles, borderThicknessAngles/2, borderThicknessAngles/2, textWidthAngles + borderThicknessAngles, fontsizeAngles * 1.4 + borderThicknessAngles, 6);
// 1.4 is extra height factor for text below baseline: g,j,p,q.
// text color
contextAngles.fillStyle = "rgba(" + fontColorAngles.r + "," + fontColorAngles.g + ","
+ fontColorAngles.b + "," + fontColorAngles.a + ")";
contextAngles.fillText( messageAngles, borderThicknessAngles, fontsizeAngles + borderThicknessAngles);
vectors_sprite.material.map._needsUpdate = true; // AND UPDATE THE IMAGE..
}