studioijeoma · September 1, 2011 18:47 · finalyXG · May 6, 2013 · bartburkhardt · May 9, 2013
diff --git a/WebGL_Canvas_Texture_Text_Example.html b/WebGL_Canvas_Texture_Text_Example.html
 <!doctype html>
 <html>
 	<head>
 		<title>Three.js : WebGL Canvas Texture Text Example</title>
 		<style type="text/css">
 			* {
 				margin: 0;
 				padding: 0;
 			}
 			body {
 				overflow: hidden;
 			}
 		</style>
 		<script type="text/javascript" src="js/Three.js"></script>
 		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
 		<script type="text/javascript">
 			// based on https://github.com/mrdoob/three.js/issues/229
 			window.onload = function() {
 				var container, stats;

 				var camera, scene, renderer;

 				var mesh;

 				init();
 				animate();

 				function init() {
 					container = document.createElement('div');
 					document.body.appendChild(container);
 					camera = new THREE.Camera(75, window.innerWidth / window.innerHeight, 1, 1000);
 					camera.position.z = 1000;
 					scene = new THREE.Scene();
 					renderer = new THREE.WebGLRenderer({
 						antialias : true
 					});
 					renderer.setSize(window.innerWidth, window.innerHeight);

 					container.appendChild(renderer.domElement);
 					stats = new Stats();
 					stats.domElement.style.position = 'absolute';
 					stats.domElement.style.top = '0px';
 					container.appendChild(stats.domElement);

 					var x = window.innerWidth / 2 - 300;
 					var y = window.innerHeight / 2 - 300;
 					mesh = createLabel("HELLO WORLD", x, y, 0, 100, "black", "yellow");

 					scene.addObject(mesh);
 				}

 				function createLabel(text, x, y, z, size, color, backGroundColor, backgroundMargin) {
 					if(!backgroundMargin)
 						backgroundMargin = 50;

 					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(canvas.width / 2 - textWidth / 2 - backgroundMargin / 2, canvas.height / 2 - size / 2 - +backgroundMargin / 2, textWidth + backgroundMargin, size + backgroundMargin);
 					}

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

 					// context.strokeStyle = "black";
 					// context.strokeRect(0, 0, canvas.width, canvas.height);

 					var texture = new THREE.Texture(canvas);
 					texture.needsUpdate = true;

 					var material = new THREE.MeshBasicMaterial({
 						map : texture
 					});

 					var mesh = new THREE.Mesh(new THREE.PlaneGeometry(canvas.width, canvas.height), material);
 					// mesh.overdraw = true;
 					mesh.doubleSided = true;
 					mesh.position.x = x - canvas.width;
 					mesh.position.y = y - canvas.height;
 					mesh.position.z = z;

 					return mesh;
 				}

 				function animate() {
 					requestAnimationFrame(animate);

 					renderer.render(scene, camera);
 					stats.update();
 				}

 			};

 		</script>
 	</head>
 	<body></body>
 </html>
	<!doctype html>
	<html>
	<head>
	<title>Three.js : WebGL Canvas Texture Text Example</title>
	<style type="text/css">
	* {
	margin: 0;
	padding: 0;
	}
	body {
	overflow: hidden;
	}
	</style>
	<script type="text/javascript" src="js/Three.js"></script>
	<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
	<script type="text/javascript" src="js/Stats.js"></script>
	<script type="text/javascript">
	// based on https://github.com/mrdoob/three.js/issues/229
	window.onload = function() {
	var container, stats;

	var camera, scene, renderer;

	var mesh;

	init();
	animate();

	function init() {
	container = document.createElement('div');
	document.body.appendChild(container);
	camera = new THREE.Camera(75, window.innerWidth / window.innerHeight, 1, 1000);
	camera.position.z = 1000;
	scene = new THREE.Scene();
	renderer = new THREE.WebGLRenderer({
	antialias : true
	});
	renderer.setSize(window.innerWidth, window.innerHeight);

	container.appendChild(renderer.domElement);
	stats = new Stats();
	stats.domElement.style.position = 'absolute';
	stats.domElement.style.top = '0px';
	container.appendChild(stats.domElement);

	var x = window.innerWidth / 2 - 300;
	var y = window.innerHeight / 2 - 300;
	mesh = createLabel("HELLO WORLD", x, y, 0, 100, "black", "yellow");

	scene.addObject(mesh);
	}

	function createLabel(text, x, y, z, size, color, backGroundColor, backgroundMargin) {
	if(!backgroundMargin)
	backgroundMargin = 50;

	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(canvas.width / 2 - textWidth / 2 - backgroundMargin / 2, canvas.height / 2 - size / 2 - +backgroundMargin / 2, textWidth + backgroundMargin, size + backgroundMargin);
	}

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

	// context.strokeStyle = "black";
	// context.strokeRect(0, 0, canvas.width, canvas.height);

	var texture = new THREE.Texture(canvas);
	texture.needsUpdate = true;

	var material = new THREE.MeshBasicMaterial({
	map : texture
	});

	var mesh = new THREE.Mesh(new THREE.PlaneGeometry(canvas.width, canvas.height), material);
	// mesh.overdraw = true;
	mesh.doubleSided = true;
	mesh.position.x = x - canvas.width;
	mesh.position.y = y - canvas.height;
	mesh.position.z = z;

	return mesh;
	}

	function animate() {
	requestAnimationFrame(animate);

	renderer.render(scene, camera);
	stats.update();
	}

	};

	</script>
	</head>
	<body></body>
	</html>