文字绘制。

This commit is contained in:
tengge1 2019-11-28 22:28:29 +08:00
parent 5c32712634
commit 7d1a8b2a6c
3 changed files with 26 additions and 11 deletions

View File

@ -17,10 +17,13 @@ class PointText extends THREE.Mesh {
value: new THREE.CanvasTexture(canvas)
},
width: {
value: 100.0
value: 1.0 // 设备宽度
},
height: {
value: 80.0
value: 1.0 // 设备高度
},
location: {
value: null
}
},
transparent: true
@ -28,12 +31,16 @@ class PointText extends THREE.Mesh {
super(geometry, material);
this.material.uniforms.location.value = this.position;
this.frusCulled = false;
this.userData.type = 'text';
this.setText(text);
}
setText(text) {
const fontSize = 12;
const fontSize = 32;
const padding = 2;
this.name = text;
@ -50,19 +57,23 @@ class PointText extends THREE.Mesh {
canvas.width = width + padding * 2;
canvas.height = fontSize + padding * 2;
this.material.uniforms.width.value = canvas.width;
this.material.uniforms.height.value = canvas.height;
const domWidth = app.editor.renderer.domElement.width;
const domHeight = app.editor.renderer.domElement.height;
this.material.uniforms.width.value = canvas.width / domWidth;
this.material.uniforms.height.value = canvas.height / domHeight;
// 设置样式并绘制文字
context = canvas.getContext('2d');
context.font = `${fontSize}px "Microsoft YaHei"`;
context.textBaseline = 'hanging';
context.imageSmoothingQuality = 'high';
context.stroke = '#fff';
context.strokeText(text, padding, padding);
context.font = `bold ${fontSize}px "Microsoft YaHei"`;
context.fill = '#fff';
context.fillText(text, padding, padding);
context.font = `normal ${fontSize}px "Microsoft YaHei"`;
context.fill = '#555';
context.fillText(text, padding, padding);

View File

@ -4,5 +4,8 @@ varying vec2 vUv;
void main() {
vec4 texel = texture2D( tDiffuse, vUv );
if (texel.a == 0.0) {
discard;
}
gl_FragColor = texel;
}

View File

@ -1,14 +1,15 @@
uniform float width;
uniform float height;
uniform vec3 location;
varying vec2 vUv;
void main() {
vUv = uv;
vec4 _loc = projectionMatrix * modelViewMatrix * vec4(0.0, 0.0, 0.0, 1.0);
vec4 _loc = projectionMatrix * viewMatrix * vec4(location, 1.0);
gl_Position = vec4(
_loc.x + position.x,
_loc.y + position.y,
_loc.x + position.x * width,
_loc.y + position.y * height,
0.0,
1.0
);