studioijeoma/webgl_canvastext_billboarding.html

## webgl_canvastext_billboarding.html
<!DOCTYPE HTML>
<html lang="en">
	<head>
		<title>three.js webgl - canvas text billboarding</title>
		<meta charset="utf-8">
		<style type="text/css">
body {
	font-family:Monospace;
	background-color:#000000;
	margin:0px;
	overflow:hidden;
}
		</style>
	</head>
	<body>
		<script type="text/javascript" src="js/Three.js"></script>
		<script type="text/javascript">
			var camera, scene, renderer;

			setup();

			function setup() {
				camera = new THREE.TrackballCamera({
					fov : 60,
					aspect : window.innerWidth / window.innerHeight,
					near : 1,
					far : 1e3,

					rotateSpeed : 1.0,
					zoomSpeed : 1.2,
					panSpeed : 0.8,

					noZoom : false,
					noPan : false,

					staticMoving : true,
					dynamicDampingFactor : 0.3,

					keys : [65, 83, 68]
				});

				camera.position.z = 1000;
				scene = new THREE.Scene();
				renderer = new THREE.WebGLRenderer();
				renderer.setSize(window.innerWidth, window.innerHeight);

				document.body.appendChild(renderer.domElement);

				createTextParticles();

				setInterval(update, 1000 / 30);
			}

			function update() {
				renderer.render(scene, camera);
			}

			function createTextParticles() {
				// var sprite = THREE.ImageUtils.loadTexture("three/examples/textures/sprites/ball.png");
				// var sprite = createLabelTexture("text", 12, "black", "yellow");

				for( i = 0; i < 100; i++) {
					var x = 2000 * Math.random() - 1000;
					var y = 2000 * Math.random() - 1000;
					var z = 2000 * Math.random() - 1000;

					createTextParticle(sprite, x, y, z);
				}
			}

			function createTextParticle(sprite, x, y, z) {
				var geometry = new THREE.Geometry();
				geometry.vertices.push(new THREE.Vertex(new THREE.Vector3(x, y, z)));

				// var material = new THREE.ParticleBasicMaterial({
				// size : 35,
				// sizeAttenuation : false,
				// map : sprite
				// });
				// material.color.setHSV(1.0, 0.2, 0.8);

				var material = new THREE.ParticleCanvasMaterial({
					color : 0xffffff,
					program : function(context) {
						context.fillStyle = "yellow";
						context.fillRect(0, 0, 100, 100);
						context.font = "24pt Arial";
						context.textAlign = "center";
						context.textBaseline = "middle";
						context.fillStyle = "white";
						context.fillText(text, 0, 0);
					}
				})

				var particles = new THREE.ParticleSystem(geometry, material);
				particles.sortParticles = true;
				particles.updateMatrix();

				scene.addChild(particles);
			}

			function createLabelTexture(text, size, color, backGroundColor, backgroundMargin) {
				if(!color)
					color = "black";

				if(!backgroundMargin)
					backgroundMargin = 20;

				var canvas = document.createElement("canvas");

				var context = canvas.getContext("2d");
				context.font = size + "pt Arial";

				var textWidth = context.measureText(text).width;

				canvas.width = textWidth + backgroundMargin;
				canvas.height = size + backgroundMargin;
				context = canvas.getContext("2d");
				context.font = size + "pt Arial";

				if(backGroundColor) {
					context.fillStyle = backGroundColor;
					context.fillRect(0, 0, textWidth + backgroundMargin, size + backgroundMargin);
				}

				context.textAlign = "center";
				context.textBaseline = "middle";
				context.fillStyle = color;
				context.fillText(text, canvas.width / 2, canvas.height / 2);

				return new THREE.Texture(canvas);
			}
		</script>
	</body>
</html>
	<!DOCTYPE HTML>
	<html lang="en">
	<head>
	<title>three.js webgl - canvas text billboarding</title>
	<meta charset="utf-8">
	<style type="text/css">
	body {
	font-family:Monospace;
	background-color:#000000;
	margin:0px;
	overflow:hidden;
	}
	</style>
	</head>
	<body>
	<script type="text/javascript" src="js/Three.js"></script>
	<script type="text/javascript">
	var camera, scene, renderer;

	setup();

	function setup() {
	camera = new THREE.TrackballCamera({
	fov : 60,
	aspect : window.innerWidth / window.innerHeight,
	near : 1,
	far : 1e3,

	rotateSpeed : 1.0,
	zoomSpeed : 1.2,
	panSpeed : 0.8,

	noZoom : false,
	noPan : false,

	staticMoving : true,
	dynamicDampingFactor : 0.3,

	keys : [65, 83, 68]
	});

	camera.position.z = 1000;
	scene = new THREE.Scene();
	renderer = new THREE.WebGLRenderer();
	renderer.setSize(window.innerWidth, window.innerHeight);

	document.body.appendChild(renderer.domElement);

	createTextParticles();

	setInterval(update, 1000 / 30);
	}

	function update() {
	renderer.render(scene, camera);
	}

	function createTextParticles() {
	// var sprite = THREE.ImageUtils.loadTexture("three/examples/textures/sprites/ball.png");
	// var sprite = createLabelTexture("text", 12, "black", "yellow");

	for( i = 0; i < 100; i++) {
	var x = 2000 * Math.random() - 1000;
	var y = 2000 * Math.random() - 1000;
	var z = 2000 * Math.random() - 1000;

	createTextParticle(sprite, x, y, z);
	}
	}

	function createTextParticle(sprite, x, y, z) {
	var geometry = new THREE.Geometry();
	geometry.vertices.push(new THREE.Vertex(new THREE.Vector3(x, y, z)));

	// var material = new THREE.ParticleBasicMaterial({
	// size : 35,
	// sizeAttenuation : false,
	// map : sprite
	// });
	// material.color.setHSV(1.0, 0.2, 0.8);

	var material = new THREE.ParticleCanvasMaterial({
	color : 0xffffff,
	program : function(context) {
	context.fillStyle = "yellow";
	context.fillRect(0, 0, 100, 100);
	context.font = "24pt Arial";
	context.textAlign = "center";
	context.textBaseline = "middle";
	context.fillStyle = "white";
	context.fillText(text, 0, 0);
	}
	})

	var particles = new THREE.ParticleSystem(geometry, material);
	particles.sortParticles = true;
	particles.updateMatrix();

	scene.addChild(particles);
	}

	function createLabelTexture(text, size, color, backGroundColor, backgroundMargin) {
	if(!color)
	color = "black";

	if(!backgroundMargin)
	backgroundMargin = 20;

	var canvas = document.createElement("canvas");

	var context = canvas.getContext("2d");
	context.font = size + "pt Arial";

	var textWidth = context.measureText(text).width;

	canvas.width = textWidth + backgroundMargin;
	canvas.height = size + backgroundMargin;
	context = canvas.getContext("2d");
	context.font = size + "pt Arial";

	if(backGroundColor) {
	context.fillStyle = backGroundColor;
	context.fillRect(0, 0, textWidth + backgroundMargin, size + backgroundMargin);
	}

	context.textAlign = "center";
	context.textBaseline = "middle";
	context.fillStyle = color;
	context.fillText(text, canvas.width / 2, canvas.height / 2);

	return new THREE.Texture(canvas);
	}
	</script>
	</body>
	</html>