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

- Added Sphere primitive
- `three_debug.js` checks for broken UVs and display these faces with pink color instead

Mr.doob 15 years ago
parent
8820e868b9
commit
a7bed157a3
6 changed files with 269 additions and 5 deletions
Unified View Show Diff Stats
  1. 0 0
      build/three_debug.js
  2. 134 0
      examples/geometry_earth.html
  3. 4 4
      examples/primitives/Plane.js
  4. 92 0
      examples/primitives/Sphere.js
  5. BIN
      examples/textures/land_ocean_ice_cloud_2048.jpg
  6. 39 1
      src/renderers/CanvasRenderer.js

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


+ 134 - 0
examples/geometry_earth.html
View File 

@@ -0,0 +1,134 @@
 
+<!DOCTYPE HTML>
 
+<html lang="en">
 
+	<head>
 
+		<title>three.js - geometry - earth</title>
 
+		<meta charset="utf-8">
 
+		<style type="text/css">
 
+			body {
 
+				color: #ffffff;
 
+				font-family:Monospace;
 
+				font-size:13px;
 
+				text-align:center;
 
+
 
+				background-color: #000000;
 
+				margin: 0px;
 
+				overflow: hidden;
 
+			}
 
+
 
+			#info {
 
+				position: absolute;
 
+				top: 0px; width: 100%;
 
+				padding: 5px;
 
+			}
 
+
 
+			a {
 
+
 
+				color: #0080ff;
 
+			}
 
+
 
+		</style>
 
+	</head>
 
+	<body>
 
+
 
+		<div id="container"></div> 
+		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - earth demo</div> 
+
 
+		<script type="text/javascript" src="http://github.com/mrdoob/stats.js/raw/master/build/stats.js"></script>
 
+
 
+		<script type="text/javascript" src="../build/three.js"></script>
 
+
 
+		<script type="text/javascript" src="primitives/Sphere.js"></script>
 
+
 
+		<script type="text/javascript">
 
+
 
+			var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
 
+
 
+			var container, stats;
 
+
 
+			var camera, scene, renderer;
 
+
 
+			var mesh;
 
+
 
+			var mouseX = 0;
 
+			var mouseY = 0;
 
+
 
+			var windowHalfX = window.innerWidth / 2;
 
+			var windowHalfY = window.innerHeight / 2;
 
+
 
+
 
+			init();
 
+			setInterval( loop, 1000 / 60 );
 
+
 
+
 
+			function init() {
 
+
 
+				container = document.getElementById( 'container' );
 
+
 
+				camera = new THREE.Camera( 60, SCREEN_WIDTH / SCREEN_HEIGHT, 0.0001, 10000 );
 
+				camera.position.z = 500;
 
+
 
+				scene = new THREE.Scene();
 
+
 
+				mesh = new THREE.Mesh( new Sphere( 200, 20, 20 ), loadImage( 'textures/land_ocean_ice_cloud_2048.jpg' ) );
 
+				scene.add(mesh);
 
+
 
+				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);
 
+
 
+				document.addEventListener('mousemove', onDocumentMouseMove, false);
 
+
 
+			}
 
+
 
+			function loadImage( path ) {
 
+
 
+				var canvas = document.createElement( 'canvas' );
 
+				canvas.width = 32;
 
+				canvas.height = 32;
 
+
 
+				var material =  new THREE.MeshBitmapUVMappingMaterial( canvas );
 
+
 
+				var image = new Image();
 
+
 
+				image.onload = function () {
 
+
 
+					material.bitmap = this;
 
+
 
+				};
 
+
 
+				image.src = path;
 
+
 
+				return material;
 
+
 
+			}
 
+
 
+			function onDocumentMouseMove( event ) {
 
+
 
+				mouseX = ( event.clientX - windowHalfX );
 
+				mouseY = ( event.clientY - windowHalfY );
 
+
 
+			}
 
+
 
+			function loop() {
 
+
 
+				camera.position.x += (mouseX - camera.position.x) * 0.05;
 
+				camera.position.y += (-mouseY - camera.position.y) * 0.05;
 
+
 
+				mesh.rotation.y -= 0.005;
 
+
 
+				renderer.render(scene, camera);
 
+				stats.update();
 
+
 
+			}
 
+
 
+
 
+		</script>
 
+
 
+	</body>
 
+</html>

+ 4 - 4
examples/primitives/Plane.js
View File 

@@ -1,13 +1,13 @@
 
 /**
 
 /**
 
  * @author mr.doob / http://mrdoob.com/
 
  * @author mr.doob / http://mrdoob.com/
 
- * based on Papervision3D's Plane.as
 
+ * based on http://papervision3d.googlecode.com/svn/trunk/as3/trunk/src/org/papervision3d/objects/primitives/Plane.as
 
  */
 
  */
 
 
 
 var Plane = function ( width, height, segments_width, segments_height ) {
 
 var Plane = function ( width, height, segments_width, segments_height ) {
 
 
 
 	THREE.Geometry.call( this );
 
 	THREE.Geometry.call( this );
 
 
 
-	var scope = this,
 
+	var ix, iy,
 
 	width_half = width / 2,
 
 	width_half = width / 2,
 
 	height_half = height / 2,
 
 	height_half = height / 2,
 
 	gridX = segments_width || 1,
 
 	gridX = segments_width || 1,
 
@@ -18,9 +18,9 @@ var Plane = function ( width, height, segments_width, segments_height ) {
 
 	segment_height = height / gridY;
 
 	segment_height = height / gridY;
 
 
 
 
 
-	for( var iy = 0; iy < gridY1; iy++ ) {
 
+	for( iy = 0; iy < gridY1; iy++ ) {
 
 
 
-		for( var ix = 0; ix < gridX1; ix++ ) {
 
+		for( ix = 0; ix < gridX1; ix++ ) {
 
 
 
 			var x = ix * segment_width - width_half;
 
 			var x = ix * segment_width - width_half;
 
 			var y = iy * segment_height - height_half;
 
 			var y = iy * segment_height - height_half;

+ 92 - 0
examples/primitives/Sphere.js
View File 

@@ -0,0 +1,92 @@
 
+/**
 
+ * @author mr.doob / http://mrdoob.com/
 
+ * based on http://papervision3d.googlecode.com/svn/trunk/as3/trunk/src/org/papervision3d/objects/primitives/Sphere.as
 
+ */
 
+
 
+var Sphere = function ( radius, segments_width, segments_height ) {
 
+
 
+	THREE.Geometry.call( this );
 
+
 
+	var gridX = segments_width || 8,
 
+	gridY = segments_height || 6;
 
+
 
+	var i, j;
 
+	var iHor = Math.max( 3, gridX );
 
+	var iVer = Math.max( 2, gridY );
 
+	var aVtc = [];
 
+
 
+	for ( j = 0; j < ( iVer + 1 ) ; j++ ) {
 
+
 
+		var fRad1 = j / iVer;
 
+		var fZ = radius * Math.cos( fRad1 * Math.PI );
 
+		var fRds = radius * Math.sin( fRad1 * Math.PI );
 
+		var aRow = [];
 
+		var oVtx = 0;
 
+
 
+		for ( i = 0; i < iHor; i++ ) {
 
+
 
+			var fRad2 = 2 * i / iHor;
 
+			var fX = fRds * Math.sin( fRad2 * Math.PI );
 
+			var fY = fRds * Math.cos( fRad2 * Math.PI );
 
+
 
+			if ( !( ( j == 0 || j == iVer ) && i > 0 ) ) {
 
+
 
+				oVtx = this.vertices.push( new THREE.Vertex( new THREE.Vector3( fY, fZ, fX ) ) ) - 1;
 
+
 
+			}
 
+
 
+			aRow.push( oVtx );
 
+
 
+		}
 
+
 
+		aVtc.push( aRow );
 
+
 
+	}
 
+
 
+	var iVerNum = aVtc.length;
 
+
 
+	for ( j = 0; j < iVerNum; j++ ) {
 
+
 
+		var iHorNum = aVtc[ j ].length;
 
+
 
+		if ( j > 0 ) {
 
+
 
+			for ( i = 0; i < iHorNum; i++ ) {
 
+
 
+				var bEnd = i == ( iHorNum - 1 );
 
+				var aP1 = aVtc[ j ][ bEnd ? 0 : i + 1 ];
 
+				var aP2 = aVtc[ j ][ ( bEnd ? iHorNum - 1 : i ) ];
 
+				var aP3 = aVtc[ j - 1 ][ ( bEnd ? iHorNum - 1 : i ) ];
 
+				var aP4 = aVtc[ j - 1 ][ bEnd ? 0 : i + 1 ];
 
+
 
+				var fJ0 = j / ( iVerNum - 1 );
 
+				var fJ1 = ( j - 1 ) / ( iVerNum - 1 );
 
+				var fI0 = ( i + 1 ) / iHorNum;
 
+				var fI1 = i / iHorNum;
 
+
 
+				var aP1uv = new THREE.UV( 1 - fI0, fJ0 );
 
+				var aP2uv = new THREE.UV( 1 - fI1, fJ0 );
 
+				var aP3uv = new THREE.UV( 1 - fI1, fJ1 );
 
+				var aP4uv = new THREE.UV( 1 - fI0, fJ1 );
 
+
 
+				if ( j < ( aVtc.length - 1 ) ) {
 
+
 
+					this.faces.push( new THREE.Face3( aP1, aP2, aP3 ) );
 
+					this.uvs.push( [ aP1uv, aP2uv, aP3uv ] );
 
+
 
+				}
 
+
 
+				if ( j > 1 ) {
 
+
 
+					this.faces.push( new THREE.Face3( aP1, aP3, aP4 ) );
 
+					this.uvs.push( [ aP1uv, aP3uv, aP4uv ] );
 
+
 
+				}
 
+
 
+			}
 
+		}
 
+	}
 
+}
 
+
 
+Sphere.prototype = new THREE.Geometry();
 
+Sphere.prototype.constructor = Sphere;

BIN
examples/textures/land_ocean_ice_cloud_2048.jpg
View File


+ 39 - 1
src/renderers/CanvasRenderer.js
View File 

@@ -269,6 +269,25 @@ THREE.CanvasRenderer = function () {
 
 						bitmapWidth = bitmap.width;
 
 						bitmapWidth = bitmap.width;
 
 						bitmapHeight = bitmap.height;
 
 						bitmapHeight = bitmap.height;
 
 
 
+						/* DEBUG
 
+						if ( !element.uvs[ 0 ] || !element.uvs[ 1 ] || !element.uvs[ 2 ]) {
 
+
 
+							_context.beginPath();
 
+							_context.moveTo( v1x, v1y );
 
+							_context.lineTo( v2x, v2y );
 
+							_context.lineTo( v3x, v3y );
 
+							_context.lineTo( v4x, v4y );
 
+							_context.lineTo( v1x, v1y );
 
+							_context.closePath();
 
+
 
+							_context.fillStyle = 'rgb(0, 255, 0)';
 
+							_context.fill();
 
+
 
+							continue;
 
+
 
+						}
 
+						*/
 
+
 
 						uv1.copy( element.uvs[ 0 ] );
 
 						uv1.copy( element.uvs[ 0 ] );
 
 						uv2.copy( element.uvs[ 1 ] );
 
 						uv2.copy( element.uvs[ 1 ] );
 
 						uv3.copy( element.uvs[ 2 ] );
 
 						uv3.copy( element.uvs[ 2 ] );
 
@@ -390,6 +409,25 @@ THREE.CanvasRenderer = function () {
 
 						bitmapWidth = bitmap.width;
 
 						bitmapWidth = bitmap.width;
 
 						bitmapHeight = bitmap.height;
 
 						bitmapHeight = bitmap.height;
 
 
 
+						/* DEBUG
 
+						if ( !element.uvs[ 0 ] || !element.uvs[ 1 ] || !element.uvs[ 2 ] || !element.uvs[ 3 ]) {
 
+
 
+							_context.beginPath();
 
+							_context.moveTo( v1x, v1y );
 
+							_context.lineTo( v2x, v2y );
 
+							_context.lineTo( v3x, v3y );
 
+							_context.lineTo( v4x, v4y );
 
+							_context.lineTo( v1x, v1y );
 
+							_context.closePath();
 
+
 
+							_context.fillStyle = 'rgb(255, 0, 255)';
 
+							_context.fill();
 
+
 
+							continue;
 
+
 
+						}
 
+						*/
 
+
 
 						uv1.copy( element.uvs[ 0 ] );
 
 						uv1.copy( element.uvs[ 0 ] );
 
 						uv2.copy( element.uvs[ 1 ] );
 
 						uv2.copy( element.uvs[ 1 ] );
 
 						uv3.copy( element.uvs[ 2 ] );
 
 						uv3.copy( element.uvs[ 2 ] );
 
@@ -409,7 +447,7 @@ THREE.CanvasRenderer = function () {
 
 
 
 			}
 
 			}
 
 
 
-			/* DEBUG
 
+			/*
 
 			_context.lineWidth = 1;
 
 			_context.lineWidth = 1;
 
 			_context.strokeStyle = 'rgba( 0, 255, 0, 0.5 )';
 
 			_context.strokeStyle = 'rgba( 0, 255, 0, 0.5 )';
 
 			_context.strokeRect( _bboxRect.getX(), _bboxRect.getY(), _bboxRect.getWidth(), _bboxRect.getHeight() );
 
 			_context.strokeRect( _bboxRect.getX(), _bboxRect.getY(), _bboxRect.getWidth(), _bboxRect.getHeight() );

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