15 năm trước cách đây · a7bed157a3
--- a/build/three_debug.js
+++ b/build/three_debug.js
--- a/examples/geometry_earth.html
+++ b/examples/geometry_earth.html
@@ -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>
			
--- a/examples/primitives/Plane.js
+++ b/examples/primitives/Plane.js
@@ -1,13 +1,13 @@
 
				 /**
			
 
				  * @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
@@ -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;
			
--- 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() );