gengshenghong · October 5, 2011 05:12
diff --git a/Examples_canvas_interactive_cubes.html b/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>