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

* Fixed `Matrix4.makeOrtho()`. `bottom - top` -> `top - bottom`
* Added `camera_orthographic` example.

Mr.doob 14 years ago
parent
c0d14df4a8
commit
7eacf2ae0e
6 changed files with 146 additions and 136 deletions
Split View Show Diff Stats
  1. 0 1
      build/Three.js
  2. 0 1
      build/ThreeDebug.js
  3. 0 2
      examples/camera_free.html
  4. 145 0
      examples/camera_orthographic.html
  5. 0 131
      examples/cameras/FreeCamera.js
  6. 1 1
      src/core/Matrix4.js

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


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


+ 0 - 2
examples/camera_free.html
View File 

@@ -56,8 +56,6 @@
 
 		<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="cameras/FreeCamera.js"></script>
 
-
 
 		<script type="text/javascript" src="geometry/primitives/Sphere.js"></script>
 
 		<script type="text/javascript" src="geometry/primitives/Plane.js"></script>

+ 145 - 0
examples/camera_orthographic.html
View File 

@@ -0,0 +1,145 @@
 
+<!DOCTYPE HTML>
 
+<html lang="en">
 
+	<head>
 
+		<title>three.js - geometry - cube</title>
 
+		<meta charset="utf-8">
 
+		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
 
+		<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/Plane.js"></script>
 
+
 
+		<script type="text/javascript" src="js/Stats.js"></script>
 
+
 
+		<script type="text/javascript">
 
+
 
+			var SCREEN_WIDTH = window.innerWidth;
 
+			var SCREEN_HEIGHT = window.innerHeight;
 
+
 
+			var container;
 
+			var stats;
 
+
 
+			var camera;
 
+			var scene;
 
+			var renderer;
 
+
 
+			var cube, plane;
 
+
 
+			var mouseX = 0;
 
+			var mouseXOnMouseDown = 0;
 
+
 
+			var windowHalfX = window.innerWidth / 2;
 
+			var windowHalfY = window.innerHeight / 2;
 
+
 
+			var moveForward = false,
 
+			moveBackwards = false,
 
+			moveUp = false,
 
+			moveDown = false,
 
+			moveLeft = false,
 
+			moveRight = false,
 
+
 
+			yawLeft = false,
 
+			yawRight = false,
 
+			pitchUp = false,
 
+			pitchDown = false,
 
+			rollLeft = false,
 
+			rollRight = false;
 
+
 
+			init();
 
+			setInterval(loop, 1000/60);
 
+
 
+			function init() {
 
+
 
+				container = document.createElement('div');
 
+				document.body.appendChild(container);
 
+
 
+				camera = new THREE.Camera( 45, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
 
+				camera.projectionMatrix = THREE.Matrix4.makeOrtho( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -2000, 1000 );
 
+				camera.position.x = 100;
 
+				camera.position.y = 100;
 
+				camera.position.z = 100;
 
+
 
+				scene = new THREE.Scene();
 
+
 
+				// Plane
 
+
 
+				plane = new THREE.Mesh( new Plane( 1000, 1000, 20, 20 ), new THREE.MeshColorStrokeMaterial( 0x000000, 0.2 ) );
 
+				plane.rotation.x = - 90 * ( Math.PI / 180 );
 
+				scene.addObject( plane );
 
+
 
+				geometry = new Cube( 40, 40, 40 );
 
+
 
+				for (var i = 0; i < 100; i ++ ) {
 
+
 
+					cube = new THREE.Mesh(geometry, new THREE.MeshColorFillMaterial( 0xffffff ) );
 
+					cube.overdraw = true;
 
+
 
+					cube.scale.y = Math.random() * 2 + 1;
 
+
 
+					cube.position.x = Math.random() * 1000 - 500;
 
+					cube.position.y = ( cube.scale.y * 40 ) / 2;
 
+					cube.position.z = Math.random() * 1000 - 500;
 
+
 
+					scene.addObject(cube);
 
+
 
+				}
 
+
 
+				// Lights
 
+
 
+				var ambientLight = new THREE.AmbientLight( Math.random() * 0x10 );
 
+				scene.addLight( ambientLight );
 
+
 
+				var directionalLight = new THREE.DirectionalLight( Math.random() * 0xffffff );
 
+				directionalLight.position.x = Math.random() - 0.5;
 
+				directionalLight.position.y = Math.random() - 0.5;
 
+				directionalLight.position.z = Math.random() - 0.5;
 
+				directionalLight.position.normalize();
 
+				scene.addLight( directionalLight );
 
+
 
+				var directionalLight = new THREE.DirectionalLight( Math.random() * 0xffffff );
 
+				directionalLight.position.x = Math.random() - 0.5;
 
+				directionalLight.position.y = Math.random() - 0.5;
 
+				directionalLight.position.z = Math.random() - 0.5;
 
+				directionalLight.position.normalize();
 
+				scene.addLight( directionalLight );
 
+
 
+				renderer = new THREE.CanvasRenderer();
 
+				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 
+
 
+				container.appendChild( renderer.domElement );
 
+
 
+				stats = new Stats();
 
+				stats.domElement.style.position = 'absolute';
 
+				stats.domElement.style.top = '0px';
 
+				container.appendChild(stats.domElement);
 
+
 
+			}
 
+
 
+			//
 
+
 
+			function loop() {
 
+
 
+				var timer = new Date().getTime() * 0.0001;
 
+
 
+				camera.position.x = Math.cos( timer ) * 200;
 
+				camera.position.z = Math.sin( timer ) * 200;
 
+
 
+				renderer.render(scene, camera);
 
+				stats.update();
 
+			}
 
+
 
+		</script>
 
+
 
+	</body>
 
+</html>

+ 0 - 131
examples/cameras/FreeCamera.js
View File 

@@ -1,131 +0,0 @@
 
-/**
 
- * @author mr.doob / http://mrdoob.com/
 
- */
 
-
 
-THREE.FreeCamera = function ( x, y, z ) {
 
-
 
-	THREE.Camera.call( this, x, y, z );
 
-
 
-	this.rotation = new THREE.Vector3( 0, 0, 0 );
 
-
 
-	this.moveZ = function ( amount ) {
 
-
 
-		direction.set( this.matrix.n11, this.target.position, this.position );
 
-		depth = direction.length();
 
-
 
-		direction.normalize();
 
-
 
-		vector.copy( direction );
 
-		vector.multiplyScalar( amount );
 
-
 
-		direction.multiplyScalar( depth );
 
-
 
-		this.position.addSelf( vector );
 
-		this.target.position.add( this.position, direction );
 
-
 
-	};
 
-
 
-	this.updateMatrix = function () {
 
-
 
-		this.matrix.identity();
 
-
 
-		this.matrix.multiplySelf( THREE.Matrix4.translationMatrix( this.position.x, this.position.y, this.position.z ) );
 
-		this.matrix.multiplySelf( THREE.Matrix4.rotationXMatrix( this.rotation.x ) );
 
-		this.matrix.multiplySelf( THREE.Matrix4.rotationYMatrix( this.rotation.y ) );
 
-		this.matrix.multiplySelf( THREE.Matrix4.rotationZMatrix( this.rotation.z ) );
 
-	};
 
-
 
-	/*
 
-	var depth = 0;
 
-	var vector = new THREE.Vector3();
 
-	var direction = new THREE.Vector3();
 
-
 
-	this.moveX = function ( amount ) {
 
-
 
-		direction.sub( this.target.position, this.position );
 
-		depth = direction.length();
 
-
 
-		direction.normalize();
 
-
 
-		vector.copy( this.up );
 
-		vector.crossSelf( direction );
 
-		vector.multiplyScalar( amount );
 
-
 
-		direction.multiplyScalar( depth );
 
-
 
-		this.position.subSelf( vector );
 
-		this.target.position.add( this.position, direction );
 
-
 
-	};
 
-
 
-	this.moveZ = function ( amount ) {
 
-
 
-		direction.sub( this.target.position, this.position );
 
-		depth = direction.length();
 
-
 
-		direction.normalize();
 
-
 
-		vector.copy( direction );
 
-		vector.multiplyScalar( amount );
 
-
 
-		direction.multiplyScalar( depth );
 
-
 
-		this.position.addSelf( vector );
 
-		this.target.position.add( this.position, direction );
 
-
 
-	};
 
-
 
-	this.rotateX = function( amount ) { // pitch
 
-
 
-		amount *= Math.PI / 180;
 
-
 
-		vector.x = direction.x;
 
-		vector.y = ( direction.y * Math.cos( amount ) ) - ( direction.z * Math.sin( amount ) );
 
-		vector.z = ( direction.y * Math.sin( amount ) ) + ( direction.z * Math.cos( amount ) );
 
-
 
-		direction.copy( vector );
 
-
 
-		vector.set( direction.x, direction.y, direction.z );
 
-		vector.multiplyScalar( 400 );
 
-
 
-		this.target.position.copy( this.position );
 
-		this.target.position.addSelf( vector );
 
-
 
-	};
 
-
 
-	this.rotateY = function( amount ) { // yaw
 
-
 
-		amount *= Math.PI / 180;
 
-
 
-		direction.sub( this.position, this.target.position );
 
-		depth = direction.length();
 
-
 
-		direction.normalize();
 
-
 
-		vector.x = ( direction.z * Math.sin( amount ) ) + ( direction.x * Math.cos( amount ) );
 
-		vector.y = direction.y;
 
-		vector.z = ( direction.z * Math.cos( amount ) ) - ( direction.x * Math.sin( amount ) );
 
-
 
-		direction.copy( vector );
 
-		direction.multiplyScalar( depth );
 
-
 
-		this.target.position.sub( this.position, direction );
 
-
 
-	};
 
-
 
-	this.rotateZ = function( amount ) { // roll
 
-
 
-		amount *= Math.PI / 180;
 
-
 
-		vector.x = ( this.up.x * Math.cos( amount ) ) - ( this.up.y * Math.sin( amount ) );
 
-		vector.y = ( this.up.x * Math.sin( amount ) ) + ( this.up.y * Math.cos( amount ) );
 
-		vector.z = this.up.z;
 
-
 
-		this.up.copy( vector );
 
-
 
-	};
 
-	*/
 
-};
 
-
 
-THREE.FreeCamera.prototype = new THREE.Camera();
 
-THREE.FreeCamera.prototype.constructor = THREE.FreeCamera;

+ 1 - 1
src/core/Matrix4.js
View File 

@@ -435,7 +435,7 @@ THREE.Matrix4.makeOrtho = function( left, right, top, bottom, near, far ) {
 
 
 	m = new THREE.Matrix4();
 
 	w = right - left;
 
-	h = bottom - top;
 
+	h = top - bottom; // - top;
 
 	p = far - near;
 
 	x = ( right + left ) / w;
 
 	y = ( bottom + top ) / h;

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