threejs精灵平面Sprite(类似tip效果)

效果图:

1let center = this.cube.position.clone(),
2　　size = this.cube.geometry.boundingBox.getSize(),
3　　scale = this.cube.scale;
4
5let heightStr = "长度:" + (size.y * scale.y).toFixed(2),
6　 widthStr = "宽度:" + (size.x * scale.x).toFixed(2);
7 
8let canvas = document.createElement("canvas");
9canvas.width = 200;
10canvas.height = 100
11let context =canvas.getContext("2d");
12context.font = "Bold 40px Georgia";
13context.fillStyle = "#ffffff";
14context.fillText(heightStr, 0, 40);
15context.fillText(widthStr, 0, 90);
16let spritelTexture = new THREE.Texture(canvas);
17spritelTexture.needsUpdate = true;
18let spriteMaterial = new THREE.SpriteMaterial({ map: spritelTexture });
19let spritel = new THREE.Sprite(spriteMaterial);
20spritel.scale.set(5, 2.5, 1);
21spritel.position.set(center.x + 3, center.y - 2, center.z);
22this.scene.scene.add(spritel);