Home Explore Help
Sign In
javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

Synced with mrdoob's branch.

alteredq 14 years ago
parent
49d1bd170b 8d198002d1
commit
f6e829ca21
8 changed files with 170 additions and 202 deletions
Split View Show Diff Stats
  1. 0 1
      README.md
  2. 0 0
      build/Three.js
  3. 0 0
      build/ThreeDebug.js
  4. 10 2
      examples/camera_orthographic.html
  5. 4 4
      examples/geometry_cube.html
  6. 139 0
      examples/interactive_cubes.html
  7. 0 179
      examples/interactive_spheres.html
  8. 17 16
      src/core/Ray.js

+ 0 - 1
README.md
View File 

@@ -160,7 +160,6 @@ For creating a customised version of the library, including the source files in
 
 * Added `PointLight`
 
 * `CanvasRenderer` and `SVGRenderer` basic lighting support (ColorStroke/ColorFill only)
 
 * `Renderer` > `Projector`. `CanvasRenderer`, `SVGRenderer` and `DOMRenderer` do not extend anymore
 
-* Interactivity base code (hdi folder). To be refactored... ([mindlapse](http://github.com/mindlapse))
 
 * Added `computeCentroids` method to `Geometry`

File diff suppressed because it is too large
+ 0 - 0
build/Three.js


File diff suppressed because it is too large
+ 0 - 0
build/ThreeDebug.js


+ 10 - 2
examples/camera_orthographic.html
View File 

@@ -32,8 +32,16 @@
 
 
 			function init() {
 
 
-				container = document.createElement('div');
 
-				document.body.appendChild(container);
 
+				container = document.createElement( 'div' );
 
+				document.body.appendChild( container );
 
+
 
+				var info = document.createElement( 'div' );
 
+				info.style.position = 'absolute';
 
+				info.style.top = '10px';
 
+				info.style.width = '100%';
 
+				info.style.textAlign = 'center';
 
+				info.innerHTML = '<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - orthographic view';
 
+				container.appendChild( info );
 
 
 				camera = new THREE.Camera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
 
 				camera.projectionMatrix = THREE.Matrix4.makeOrtho( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -2000, 1000 );

+ 4 - 4
examples/geometry_cube.html
View File 

@@ -50,16 +50,16 @@
 
 
 			function init() {
 
 
-				container = document.createElement('div');
 
-				document.body.appendChild(container);
 
+				container = document.createElement( 'div' );
 
+				document.body.appendChild( container );
 
 
-				var info = document.createElement('div');
 
+				var info = document.createElement( 'div' );
 
 				info.style.position = 'absolute';
 
 				info.style.top = '10px';
 
 				info.style.width = '100%';
 
 				info.style.textAlign = 'center';
 
 				info.innerHTML = 'Drag to spin the cube';
 
-				container.appendChild(info);
 
+				container.appendChild( info );
 
 
 				camera = new THREE.Camera( 70, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
 
 				camera.position.y = 150;

+ 139 - 0
examples/interactive_cubes.html
View File 

@@ -0,0 +1,139 @@
 
+<!DOCTYPE HTML>
 
+<html lang="en">
 
+	<head>
 
+		<title>three.js - interactive - cubes</title>
 
+		<meta charset="utf-8">
 
+		<style type="text/css">
 
+			body {
 
+				font-family: Monospace;
 
+				background-color: #f0f0f0;
 
+				margin: 0px;
 
+				overflow: hidden;
 
+			}
 
+		</style>
 
+	</head>
 
+	<body>
 
+
 
+		<script type="text/javascript" src="../build/Three.js"></script>
 
+
 
+		<script type="text/javascript" src="geometry/primitives/Cube.js"></script>
 
+		<script type="text/javascript" src="geometry/primitives/Sphere.js"></script>
 
+
 
+		<script type="text/javascript" src="js/Stats.js"></script>
 
+
 
+		<script type="text/javascript">
 
+
 
+			var container, stats;
 
+			var camera, scene, renderer;
 
+
 
+			var mouseX = 0, mouseY = 0, projector;
 
+
 
+			var windowHalfX = window.innerWidth / 2;
 
+			var windowHalfY = window.innerHeight / 2;
 
+
 
+			init();
 
+			setInterval(loop, 1000/60);
 
+
 
+			function init() {
 
+
 
+				container = document.createElement( 'div' );
 
+				document.body.appendChild( container );
 
+
 
+				var info = document.createElement( 'div' );
 
+				info.style.position = 'absolute';
 
+				info.style.top = '10px';
 
+				info.style.width = '100%';
 
+				info.style.textAlign = 'center';
 
+				info.innerHTML = '<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - clickable objects';
 
+				container.appendChild( info );
 
+
 
+				camera = new THREE.Camera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
 
+				camera.position.y = 300;
 
+				camera.position.z = 500;
 
+
 
+				scene = new THREE.Scene();
 
+
 
+				var geometry = new Cube( 100, 100, 100 );
 
+
 
+				for ( var i = 0; i < 10; i ++ ) {
 
+
 
+					var object = new THREE.Mesh( geometry, [ new THREE.MeshColorFillMaterial( Math.random() * 0xffffff, 0.5 ), new THREE.MeshColorStrokeMaterial( 0xffffff, 0.5 ) ] );
 
+					object.position.x = Math.random() * 800 - 400;
 
+					object.position.y = Math.random() * 800 - 400;
 
+					object.position.z = Math.random() * 800 - 400;
 
+					object.scale.x = Math.random() * 2 + 1;
 
+					object.scale.y = Math.random() * 2 + 1;
 
+					object.scale.z = Math.random() * 2 + 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;
 
+					scene.addObject( object );
 
+
 
+				}
 
+
 
+				projector = new THREE.Projector();
 
+
 
+				renderer = new THREE.CanvasRenderer();
 
+				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);
 
+
 
+				document.addEventListener('mousedown', onDocumentMouseDown, false);
 
+
 
+			}
 
+
 
+			function onDocumentMouseDown( event ) {
 
+
 
+				event.preventDefault();
 
+
 
+				var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
 
+				projector.unprojectVector( vector, camera );
 
+
 
+				var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
 
+
 
+				var intersects = ray.intersectScene( scene );
 
+
 
+				if ( intersects.length > 0 ) {
 
+
 
+					intersects.length && intersects[ 0 ].object.material[ 0 ].color.setHex( Math.random() * 0xffffff | 0x80000000 );
 
+
 
+					var particle = new THREE.Particle( new THREE.ParticleCircleMaterial( 0x000000 ) );
 
+					particle.position = intersects[ 0 ].point;
 
+					particle.scale.x = particle.scale.y = 8;
 
+					scene.addObject( particle );
 
+
 
+				}
 
+
 
+				/*
 
+				// Parse all the faces
 
+				for ( var i in intersects ) {
 
+
 
+					intersects[ i ].face.material[ 0 ].color.setHex( Math.random() * 0xffffff | 0x80000000 );
 
+
 
+				}
 
+				*/
 
+			}
 
+
 
+			var radius = 600;
 
+			var theta = 0;
 
+
 
+			function loop() {
 
+
 
+				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);
 
+				stats.update();
 
+			}
 
+
 
+		</script>
 
+
 
+	</body>
 
+</html>

+ 0 - 179
examples/interactive_spheres.html
View File 

@@ -1,179 +0,0 @@
 
-<!DOCTYPE HTML>
 
-<html lang="en">
 
-	<head>
 
-		<title>three.js - interactive - spheres</title>
 
-		<meta charset="utf-8">
 
-		<style type="text/css">
 
-			body {
 
-				font-family: Monospace;
 
-				background-color: #f0f0f0;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-		</style>
 
-	</head>
 
-	<body>
 
-
 
-		<script type="text/javascript" src="../src/Three.js"></script>
 
-		<script type="text/javascript" src="../src/core/Color.js"></script>
 
-		<script type="text/javascript" src="../src/core/Vector2.js"></script>
 
-		<script type="text/javascript" src="../src/core/Vector3.js"></script>
 
-		<script type="text/javascript" src="../src/core/Vector4.js"></script>
 
-		<script type="text/javascript" src="../src/core/Ray.js"></script>
 
-		<script type="text/javascript" src="../src/core/Rectangle.js"></script>
 
-		<script type="text/javascript" src="../src/core/Matrix3.js"></script>
 
-		<script type="text/javascript" src="../src/core/Matrix4.js"></script>
 
-		<script type="text/javascript" src="../src/core/Vertex.js"></script>
 
-		<script type="text/javascript" src="../src/core/Face3.js"></script>
 
-		<script type="text/javascript" src="../src/core/Face4.js"></script>
 
-		<script type="text/javascript" src="../src/core/UV.js"></script>
 
-		<script type="text/javascript" src="../src/core/Geometry.js"></script>
 
-		<script type="text/javascript" src="../src/cameras/Camera.js"></script>
 
-		<script type="text/javascript" src="../src/objects/Object3D.js"></script>
 
-		<script type="text/javascript" src="../src/objects/Line.js"></script>
 
-		<script type="text/javascript" src="../src/objects/Mesh.js"></script>
 
-		<script type="text/javascript" src="../src/objects/Particle.js"></script>
 
-		<script type="text/javascript" src="../src/lights/Light.js"></script>
 
-		<script type="text/javascript" src="../src/lights/AmbientLight.js"></script>
 
-		<script type="text/javascript" src="../src/lights/DirectionalLight.js"></script>
 
-		<script type="text/javascript" src="../src/materials/LineColorMaterial.js"></script>
 
-		<script type="text/javascript" src="../src/materials/MeshBitmapMaterial.js"></script>
 
-		<script type="text/javascript" src="../src/materials/MeshColorFillMaterial.js"></script>
 
-		<script type="text/javascript" src="../src/materials/MeshColorStrokeMaterial.js"></script>
 
-		<script type="text/javascript" src="../src/materials/MeshFaceMaterial.js"></script>
 
-		<script type="text/javascript" src="../src/materials/ParticleBitmapMaterial.js"></script>
 
-		<script type="text/javascript" src="../src/materials/ParticleCircleMaterial.js"></script>
 
-		<script type="text/javascript" src="../src/scenes/Scene.js"></script>
 
-		<script type="text/javascript" src="../src/renderers/Projector.js"></script>
 
-		<script type="text/javascript" src="../src/renderers/CanvasRenderer.js"></script>
 
-		<script type="text/javascript" src="../src/renderers/SVGRenderer.js"></script>
 
-		<script type="text/javascript" src="../src/renderers/WebGLRenderer.js"></script>
 
-		<script type="text/javascript" src="../src/renderers/renderables/RenderableFace3.js"></script>
 
-		<script type="text/javascript" src="../src/renderers/renderables/RenderableFace4.js"></script>
 
-		<script type="text/javascript" src="../src/renderers/renderables/RenderableParticle.js"></script>
 
-		<script type="text/javascript" src="../src/renderers/renderables/RenderableLine.js"></script>
 
-
 
-		<script type="text/javascript" src="geometry/primitives/Cube.js"></script>
 
-		<script type="text/javascript" src="geometry/primitives/Sphere.js"></script>
 
-
 
-		<script type="text/javascript" src="js/Stats.js"></script>
 
-
 
-		<script type="text/javascript">
 
-
 
-			var container;
 
-			var stats;
 
-
 
-			var camera;
 
-			var scene;
 
-			var renderer;
 
-
 
-			var cube, plane;
 
-
 
-			var mouseX = 0, mouseY = 0, projector;
 
-
 
-			var windowHalfX = window.innerWidth / 2;
 
-			var windowHalfY = window.innerHeight / 2;
 
-
 
-			init();
 
-			setInterval(loop, 1000/60);
 
-
 
-			function init() {
 
-
 
-				container = document.createElement('div');
 
-				document.body.appendChild(container);
 
-
 
-				camera = new THREE.Camera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
 
-				camera.position.y = 300;
 
-				camera.position.z = 500;
 
-				camera.target.position.y = 150;
 
-
 
-				scene = new THREE.Scene();
 
-
 
-				geometry = new Cube( 200, 200, 200 );
 
-
 
-				for (var i = 0, l = geometry.faces.length; i < l; i++) {
 
-
 
-					geometry.faces[i].material = [ new THREE.MeshColorFillMaterial( Math.random() * 0xffffff, 0.8 ) ];
 
-
 
-				}
 
-
 
-				cube = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial() );
 
-				cube.position.y = 150;
 
-				scene.addObject(cube);
 
-
 
-				geometry2 = new Sphere( 100, 20, 20 );
 
-
 
-				for (var i = 0, l = geometry2.faces.length; i < l; i++) {
 
-
 
-					geometry2.faces[i].material = [ new THREE.MeshColorFillMaterial( Math.random() * 0xffffff, 0.8 ) ];
 
-
 
-				}
 
-
 
-				cube2 = new THREE.Mesh( geometry2, new THREE.MeshFaceMaterial() );
 
-				cube2.position.y = 150;
 
-				cube2.position.z = 300;
 
-				scene.addObject(cube2);
 
-
 
-				projector = new THREE.Projector();
 
-
 
-				renderer = new THREE.CanvasRenderer();
 
-				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);
 
-
 
-				document.addEventListener('mousedown', onDocumentMouseDown, false);
 
-
 
-			}
 
-
 
-			function onDocumentMouseDown( event ) {
 
-
 
-				event.preventDefault();
 
-
 
-				var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
 
-				projector.unprojectVector( vector, camera );
 
-
 
-				var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
 
-
 
-				/*
 
-				var particle = new THREE.Particle( new THREE.ParticleCircleMaterial( 0xff0000 ) );
 
-				particle.position = vector;
 
-
 
-				scene.addObject( particle );
 
-				*/
 
-
 
-				var intersects = ray.intersectScene( scene );
 
-				intersects.length && intersects[ 0 ].face.material[ 0 ].color.setHex( Math.random() * 0xffffff | 0x80000000 );
 
-
 
-				/*
 
-				// Parse all the faces
 
-				for ( var i in intersects ) {
 
-				
-					intersects[ i ].face.material[ 0 ].color.setHex( Math.random() * 0xffffff | 0x80000000 );
 
-					
-				}
 
-				*/
 
-			}
 
-
 
-			var radius = 600;
 
-			var theta = 0;
 
-
 
-			function loop() {
 
-
 
-				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);
 
-				stats.update();
 
-			}
 
-
 
-		</script>
 
-
 
-	</body>
 
-</html>

+ 17 - 16
src/core/Ray.js
View File 

@@ -37,10 +37,11 @@ THREE.Ray.prototype = {
 
 
 	intersectObject: function ( object ) {
 
 
-		var f, fl, face, a, b, c, d, dot, s,
 
+		var f, fl, face, a, b, c, d, normal,
 
+		dot, scalar,
 
 		origin, direction,
 
 		geometry = object.geometry,
 
-		matrix = object.matrix,
 
+		vertices = geometry.vertices,
 
 		intersect, intersects = [],
 
 		intersectPoint;
 
 
@@ -48,21 +49,21 @@ THREE.Ray.prototype = {
 
 
 			face = geometry.faces[ f ];
 
 
-			// if ( !face.selectable ) continue;
 
-
 
-			a = matrix.transform( geometry.vertices[ face.a ].position.clone() );
 
-			b = matrix.transform( geometry.vertices[ face.b ].position.clone() );
 
-			c = matrix.transform( geometry.vertices[ face.c ].position.clone() );
 
-			d = face instanceof THREE.Face4 ? matrix.transform( geometry.vertices[ face.d ].position.clone() ) : null;
 
-
 
 			origin = this.origin.clone();
 
 			direction = this.direction.clone();
 
-			dot = face.normal.dot( direction );
 
+
 
+			a = object.matrix.transform( vertices[ face.a ].position.clone() );
 
+			b = object.matrix.transform( vertices[ face.b ].position.clone() );
 
+			c = object.matrix.transform( vertices[ face.c ].position.clone() );
 
+			d = face instanceof THREE.Face4 ? object.matrix.transform( vertices[ face.d ].position.clone() ) : null;
 
+
 
+			normal = object.matrixRotation.transform( face.normal.clone() );
 
+			dot = direction.dot( normal );
 
 
 			if ( dot < 0 ) { // Math.abs( dot ) > 0.0001
 
 
-				s = face.normal.dot( new THREE.Vector3().sub( a, origin ) ) / dot;
 
-				intersectPoint = origin.addSelf( direction.multiplyScalar( s ) );
 
+				scalar = normal.dot( new THREE.Vector3().sub( a, origin ) ) / dot;
 
+				intersectPoint = origin.addSelf( direction.multiplyScalar( scalar ) );
 
 
 				if ( face instanceof THREE.Face3 ) {
 
 
@@ -101,13 +102,13 @@ THREE.Ray.prototype = {
 
 				}
 
 
 			}
 
-			
+
 
 		}
 
-		
+
 
 		return intersects;
 
-		
+
 
 		// http://www.blackpawn.com/texts/pointinpoly/default.html
 
-		
+
 
 		function pointInFace3( p, a, b, c ) {
 
 
 			var v0 = c.clone().subSelf( a ), v1 = b.clone().subSelf( a ), v2 = p.clone().subSelf( a ),

Some files were not shown because too many files changed in this diff