Synced with mrdoob's branch.

2026-08-13 23:16:07 +10:00 · 2011-03-06 08:51:52 +01:00
parent cacdf02166 7aa0bf9726
commit 34d3aaf0ba
3 changed files with 146 additions and 3 deletions
@@ -0,0 +1,143 @@
+<!DOCTYPE HTML>
+<html lang="en">
+	<head>
+		<title>three.js misc - lookAt</title>
+		<meta charset="utf-8">
+		<style type="text/css">
+			body {
+				color: #404040;
+				font-family:Monospace;
+				font-size:13px;
+				text-align:center;
+
+				background-color: #ffffff;
+				margin: 0px;
+				overflow: hidden;
+			}
+
+			#info {
+				position: absolute;
+				top: 0px; width: 100%;
+				padding: 5px;
+			}
+
+			a {
+
+				color: #0080bb;
+			}
+		</style>
+	</head>
+	<body>
+		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - Object3D::lookAt() demo</div>
+
+		<script type="text/javascript" src="../build/custom/ThreeWebGL.js"></script>
+		<script type="text/javascript" src="../build/custom/ThreeExtras.js"></script>
+
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
+		<script type="text/javascript" src="js/Stats.js"></script>
+
+		<script type="text/javascript">
+
+			var container, stats;
+
+			var camera, scene, renderer;
+
+			var mesh, zmesh, lightMesh, geometry, target;
+
+			var mouseX = 0, mouseY = 0;
+
+			var windowHalfX = window.innerWidth / 2;
+			var windowHalfY = window.innerHeight / 2;
+
+			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
+
+			init();
+			animate();
+
+
+			function init() {
+
+				container = document.createElement( 'div' );
+				document.body.appendChild( container );
+
+				camera = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera.position.z = 3200;
+
+				scene = new THREE.Scene();
+
+				var geometry = new Cube( 10, 10, 100 );
+				var material = new THREE.MeshNormalMaterial( { shading: THREE.SmoothShading } );
+
+				target = new THREE.Mesh( new Sphere( 100, 20, 20 ), material );
+				scene.addObject( target );
+
+				for ( var i = 0; i < 1000; i ++ ) {
+
+					var mesh = new THREE.Mesh( geometry, material );
+					mesh.position.x = Math.random() * 4000 - 2000;
+					mesh.position.y = Math.random() * 4000 - 2000;
+					mesh.position.z = Math.random() * 4000 - 2000;
+					mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 4 + 2;
+
+					scene.addObject( mesh );
+
+				}
+
+				scene.matrixAutoUpdate = false;
+
+				renderer = new THREE.WebGLRenderer();
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.sortObjects = false;
+				container.appendChild( renderer.domElement );
+
+				stats = new Stats();
+				stats.domElement.style.position = 'absolute';
+				stats.domElement.style.top = '0px';
+				stats.domElement.style.zIndex = 100;
+				container.appendChild( stats.domElement );
+
+			}
+
+			function onDocumentMouseMove(event) {
+
+				mouseX = ( event.clientX - windowHalfX ) * 10;
+				mouseY = ( event.clientY - windowHalfY ) * 10;
+
+			}
+
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
+			function render() {
+
+				camera.position.x += ( mouseX - camera.position.x ) * .05;
+				camera.position.y += ( - mouseY - camera.position.y ) * .05;
+
+				var time = new Date().getTime() * 0.0005;
+
+				target.position.x = Math.sin( time * 0.7 ) * 2000;
+				target.position.y = Math.cos( time * 0.5 ) * 2000;
+				target.position.z = Math.cos( time * 0.3 ) * 2000;
+
+				for ( var i = 0, l = scene.objects.length; i < l; i ++ ) {
+
+					scene.objects[ i ].lookAt( target.position );
+
+				}
+
+				renderer.render( scene, camera );
+
+			}
+
+		</script>
+
+	</body>
+</html>
@@ -60,7 +60,7 @@
 		min: <span class="c">Nearest</span>
 		</div>

-		<script type="text/javascript" src="js/ThreeScissor.js"></script>
+		<script type="text/javascript" src="../build/Three.js"></script>

 		<script type="text/javascript" src="js/Detector.js"></script>
 		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
@@ -57,11 +57,11 @@ THREE.Object3D.prototype = {
 	},
 	*/

-	lookAt : function ( target ) {
+	lookAt : function ( vector ) {

 		// TODO: Add hierarchy support.

-		this.matrix.lookAt( this.position, target, this.up );
+		this.matrix.lookAt( this.position, vector, this.up );

 		if ( this.rotationAutoUpdate ) {