Newer
Older
1
2
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
//element 0: others | 1: sun | 2: earth | 3: GUI view
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{//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();