- Added Sphere primitive

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

- Added Sphere primitive
- `three_debug.js` checks for broken UVs and display these faces with pink color instead
a7bed157 · Mr.doob · 8820e868 · a7bed157 · a7bed157 · a7bed157
6 changed file
--- a/build/three_debug.js
+++ b/build/three_debug.js
--- a/examples/geometry_earth.html
+++ b/examples/geometry_earth.html
+<!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>
--- a/examples/primitives/Plane.js
+++ b/examples/primitives/Plane.js
 /**
 * @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 ) {

 	THREE.Geometry.call( this );

-	var scope = this,
+	var ix, iy,
 	width_half = width / 2,
 	height_half = height / 2,
 	gridX = segments_width || 1,
@@ -18,9 +18,9 @@ var Plane = function ( width, height, segments_width, segments_height ) {
 	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 y = iy * segment_height - height_half;

--- a/examples/primitives/Sphere.js
+++ b/examples/primitives/Sphere.js
+/**
+ * @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;
--- a/examples/textures/land_ocean_ice_cloud_2048.jpg
+++ b/examples/textures/land_ocean_ice_cloud_2048.jpg
--- a/src/renderers/CanvasRenderer.js
+++ b/src/renderers/CanvasRenderer.js
@@ -269,6 +269,25 @@ THREE.CanvasRenderer = function () {
 						bitmapWidth = bitmap.width;
 						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 ] );
 						uv2.copy( element.uvs[ 1 ] );
 						uv3.copy( element.uvs[ 2 ] );
@@ -390,6 +409,25 @@ THREE.CanvasRenderer = function () {
 						bitmapWidth = bitmap.width;
 						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 ] );
 						uv2.copy( element.uvs[ 1 ] );
 						uv3.copy( element.uvs[ 2 ] );
@@ -409,7 +447,7 @@ THREE.CanvasRenderer = function () {

 			}

-			/* DEBUG
+			/*
 			_context.lineWidth = 1;
 			_context.strokeStyle = 'rgba( 0, 255, 0, 0.5 )';
 			_context.strokeRect( _bboxRect.getX(), _bboxRect.getY(), _bboxRect.getWidth(), _bboxRect.getHeight() );