gengshenghong/Examples_canvas_interactive_cubes.html

## Examples_canvas_interactive_cubes.html
<!--

-->
<html>
	<head>
		<title>WebGL Demo</title>
		<meta charset="utf-8">
		<script src="./js/build/Three.js" type="text/javascript"></script>
		<script src="./js/js/RequestAnimationFrame.js" type="text/javascript"></script>
		<script src="./js/js/Stats.js" type="text/javascript"></script>
		<script>
			// These are math functions to help.
			function random(min, max) {
				// (0,1)
				var r = Math.random();
				return r * (max - min) + min;

			}
		</script>
		<script>
			// These are functions to used for events!
			function mousePosition(ev) {
				if(ev.pageX || ev.pageY) {
					return {
						x : ev.pageX,
						y : ev.pageY
					};
				}
				return {
					x : ev.clientX + document.body.scrollLeft - document.body.clientLeft,
					y : ev.clientY + document.body.scrollTop - document.body.clientTop
				};
			}

			function postionOfDom(eleId) {
				var ele = document.getElementById(eleId);
				var ele_left = ele.offsetLeft;
				var ele_top = ele.offsetTop;
				var offWidth = ele.offsetWidth;
				var offHeight = ele.offsetHeight;
				return {
					x : ele_left,
					y : ele_top,
					width : offWidth,
					height : offHeight
				};
			}

			/*
			 Get the mouse position relatively to the ele with eleId, type to give the type of original point.
			 @param {String} eleId The id of the element
			 @param {int} type optional, default is 0. type:0 center, type:1 lefttop
			 */
			function mousePosInDom(eleId, event, type) {
				if(type == undefined) {
					type = 0;
				}
				var mousePos = mousePosition(event);
				var domPos = postionOfDom(eleId);

				if(type == 0) {
					return {
						x : (mousePos.x - domPos.x - domPos.width / 2),
						y : -(mousePos.y - domPos.y - domPos.height / 2)
					}
				} else if(type == 1) {
					return {
						x : mousePos.x - domPos.x,
						y : mousePos.y - domPos.y
					}
				}
			}
		</script>
		<script>
			var objects = [];
			var particleMaterial;

			// the main function of ThreeJS.
			function three_Main() {
				// The domObj to draw.
				var domObj;
				// Key points of Threee JS, camera, scene, renderer!
				var camera, scene, renderer;
				// mesh is an object with material and geometry
				var parentMesh;

				// Parameters
				var width, height;

				var projector;
				var stats;

				init();
				animate();
			}

			function init() {
				domObj = document.getElementById("idWebGL");
				width = 400;
				height = 400;

				// Camera
				camera = new THREE.Camera(50, width / height, 1, 1000);
				camera.position.z = 500;

				// Scene
				scene = new THREE.Scene();
				parentMesh = new THREE.Object3D();

				// Meshes/Objects
				var geometry = new THREE.CubeGeometry(100, 100, 100);
				for(var i = 0; i < 3; i++) {

					var object = new THREE.Mesh(geometry, [new THREE.MeshBasicMaterial({
						color : Math.random() * 0xffffff,
						opacity : 0.5
					}), new THREE.MeshBasicMaterial({
						color : 0xffffff,
						opacity : 0.5,
						wireframe : true
					})]);
					object.position.x = random(-100, 100);
					object.position.y = random(-100, 100);
					object.position.z = random(-100, 100);
					object.scale.x = random(0.5, 1);
					object.scale.y = random(0.5, 1);
					object.scale.z = random(0.5, 1);
					object.rotation.x = (Math.random() * 360 ) * Math.PI / 180;
					object.rotation.y = (Math.random() * 360 ) * Math.PI / 180;
					object.rotation.z = (Math.random() * 360 ) * Math.PI / 180;
					parentMesh.addChild(object);

					objects.push(object);
				}

				// Scene, add meshes to scene
				scene.addObject(parentMesh);

				// Renderer
				renderer = new THREE.CanvasRenderer();
				renderer.setSize(width, height);

				// Associate renderer with domObj.
				domObj.appendChild(renderer.domElement);

				// Porjector
				projector = new THREE.Projector();
				var PI2 = Math.PI * 2;
				particleMaterial = new THREE.ParticleCanvasMaterial({
					color : 0xffffff,
					program : function(context) {
						context.beginPath();
						context.arc(0, 0, 1, 0, PI2, true);
						context.closePath();
						context.fill();
					}
				});

				document.addEventListener('mousedown', onDocumentMouseDown, false);

				// use stats
				stats = new Stats();
				stats.domElement.style.top = '0px';
				document.getElementById("idStats").appendChild(stats.domElement);
			}

			function onDocumentMouseDown(event) {

				event.preventDefault();
				var pos = mousePosInDom("idWebGL", event, 1);
				// convernt the pos to range of (-1,1)
				var vector = new THREE.Vector3((pos.x / width) * 2 - 1, -(pos.y / height) * 2 + 1, 0.5);
				projector.unprojectVector(vector, camera);

				var ray = new THREE.Ray(camera.position, vector.subSelf(camera.position).normalize());

				var intersects = ray.intersectObjects(objects);
				// same with
				//var intersects = ray.intersectScene(scene);

				if(intersects.length > 0) {

					intersects[0].object.materials[0].color.setHex(Math.random() * 0xffffff);

					var particle = new THREE.Particle(particleMaterial);
					particle.position = intersects[0].point;
					particle.scale.x = particle.scale.y = 8;
					parentMesh.addChild(particle);
				}
			}

			function animate() {
				// Include examples/js/RequestAnimationFrame.js for cross-browser compatibility.
				requestAnimationFrame(animate);
				render();
				stats.update();
			}

			var radius = 500;
			var theta = 0;
			function render() {
				// Rotate objects/meshes
				//parentMesh.rotation.z += 0.01;

				/*	// Rotate the camera
				 theta += 0.2;
				 camera.position.x = radius * Math.sin(theta * Math.PI / 360);
				 camera.position.y = radius * Math.sin(theta * Math.PI / 360);
				 camera.position.z = radius * Math.cos(theta * Math.PI / 360);
				 */
				renderer.render(scene, camera);
			}
		</script>
		<style type="text/css">
			.classWebGL {
				background: #000000;
				width: 400px;
				height: 400px;
			}
		</style>
	</head>
	<body onload="three_Main()">
		<div id="idWebGL" class="classWebGL"></div>
		<div id="idStats">
			Result:
		</div>
	</body>
</html>
	<!--

	-->
	<html>
	<head>
	<title>WebGL Demo</title>
	<meta charset="utf-8">
	<script src="./js/build/Three.js" type="text/javascript"></script>
	<script src="./js/js/RequestAnimationFrame.js" type="text/javascript"></script>
	<script src="./js/js/Stats.js" type="text/javascript"></script>
	<script>
	// These are math functions to help.
	function random(min, max) {
	// (0,1)
	var r = Math.random();
	return r * (max - min) + min;

	}
	</script>
	<script>
	// These are functions to used for events!
	function mousePosition(ev) {
	if(ev.pageX \|\| ev.pageY) {
	return {
	x : ev.pageX,
	y : ev.pageY
	};
	}
	return {
	x : ev.clientX + document.body.scrollLeft - document.body.clientLeft,
	y : ev.clientY + document.body.scrollTop - document.body.clientTop
	};
	}

	function postionOfDom(eleId) {
	var ele = document.getElementById(eleId);
	var ele_left = ele.offsetLeft;
	var ele_top = ele.offsetTop;
	var offWidth = ele.offsetWidth;
	var offHeight = ele.offsetHeight;
	return {
	x : ele_left,
	y : ele_top,
	width : offWidth,
	height : offHeight
	};
	}

	/*
	Get the mouse position relatively to the ele with eleId, type to give the type of original point.
	@param {String} eleId The id of the element
	@param {int} type optional, default is 0. type:0 center, type:1 lefttop
	*/
	function mousePosInDom(eleId, event, type) {
	if(type == undefined) {
	type = 0;
	}
	var mousePos = mousePosition(event);
	var domPos = postionOfDom(eleId);

	if(type == 0) {
	return {
	x : (mousePos.x - domPos.x - domPos.width / 2),
	y : -(mousePos.y - domPos.y - domPos.height / 2)
	}
	} else if(type == 1) {
	return {
	x : mousePos.x - domPos.x,
	y : mousePos.y - domPos.y
	}
	}
	}
	</script>
	<script>
	var objects = [];
	var particleMaterial;

	// the main function of ThreeJS.
	function three_Main() {
	// The domObj to draw.
	var domObj;
	// Key points of Threee JS, camera, scene, renderer!
	var camera, scene, renderer;
	// mesh is an object with material and geometry
	var parentMesh;

	// Parameters
	var width, height;

	var projector;
	var stats;

	init();
	animate();
	}

	function init() {
	domObj = document.getElementById("idWebGL");
	width = 400;
	height = 400;

	// Camera
	camera = new THREE.Camera(50, width / height, 1, 1000);
	camera.position.z = 500;

	// Scene
	scene = new THREE.Scene();
	parentMesh = new THREE.Object3D();

	// Meshes/Objects
	var geometry = new THREE.CubeGeometry(100, 100, 100);
	for(var i = 0; i < 3; i++) {

	var object = new THREE.Mesh(geometry, [new THREE.MeshBasicMaterial({
	color : Math.random() * 0xffffff,
	opacity : 0.5
	}), new THREE.MeshBasicMaterial({
	color : 0xffffff,
	opacity : 0.5,
	wireframe : true
	})]);
	object.position.x = random(-100, 100);
	object.position.y = random(-100, 100);
	object.position.z = random(-100, 100);
	object.scale.x = random(0.5, 1);
	object.scale.y = random(0.5, 1);
	object.scale.z = random(0.5, 1);
	object.rotation.x = (Math.random() * 360 ) * Math.PI / 180;
	object.rotation.y = (Math.random() * 360 ) * Math.PI / 180;
	object.rotation.z = (Math.random() * 360 ) * Math.PI / 180;
	parentMesh.addChild(object);

	objects.push(object);
	}

	// Scene, add meshes to scene
	scene.addObject(parentMesh);

	// Renderer
	renderer = new THREE.CanvasRenderer();
	renderer.setSize(width, height);

	// Associate renderer with domObj.
	domObj.appendChild(renderer.domElement);

	// Porjector
	projector = new THREE.Projector();
	var PI2 = Math.PI * 2;
	particleMaterial = new THREE.ParticleCanvasMaterial({
	color : 0xffffff,
	program : function(context) {
	context.beginPath();
	context.arc(0, 0, 1, 0, PI2, true);
	context.closePath();
	context.fill();
	}
	});

	document.addEventListener('mousedown', onDocumentMouseDown, false);

	// use stats
	stats = new Stats();
	stats.domElement.style.top = '0px';
	document.getElementById("idStats").appendChild(stats.domElement);
	}

	function onDocumentMouseDown(event) {

	event.preventDefault();
	var pos = mousePosInDom("idWebGL", event, 1);
	// convernt the pos to range of (-1,1)
	var vector = new THREE.Vector3((pos.x / width) * 2 - 1, -(pos.y / height) * 2 + 1, 0.5);
	projector.unprojectVector(vector, camera);

	var ray = new THREE.Ray(camera.position, vector.subSelf(camera.position).normalize());

	var intersects = ray.intersectObjects(objects);
	// same with
	//var intersects = ray.intersectScene(scene);

	if(intersects.length > 0) {

	intersects[0].object.materials[0].color.setHex(Math.random() * 0xffffff);

	var particle = new THREE.Particle(particleMaterial);
	particle.position = intersects[0].point;
	particle.scale.x = particle.scale.y = 8;
	parentMesh.addChild(particle);
	}
	}

	function animate() {
	// Include examples/js/RequestAnimationFrame.js for cross-browser compatibility.
	requestAnimationFrame(animate);
	render();
	stats.update();
	}

	var radius = 500;
	var theta = 0;
	function render() {
	// Rotate objects/meshes
	//parentMesh.rotation.z += 0.01;

	/* // Rotate the camera
	theta += 0.2;
	camera.position.x = radius * Math.sin(theta * Math.PI / 360);
	camera.position.y = radius * Math.sin(theta * Math.PI / 360);
	camera.position.z = radius * Math.cos(theta * Math.PI / 360);
	*/
	renderer.render(scene, camera);
	}
	</script>
	<style type="text/css">
	.classWebGL {
	background: #000000;
	width: 400px;
	height: 400px;
	}
	</style>
	</head>
	<body onload="three_Main()">
	<div id="idWebGL" class="classWebGL"></div>
	<div id="idStats">
	Result:
	</div>
	</body>
	</html>