Jelajahi Sumber

Added `ImageUtils::loadTexture`.

Mr.doob 14 tahun lalu
induk
melakukan
0f52ae5a9b
3 mengubah file dengan 24 tambahan dan 27 penghapusan
  1. 4 26
      examples/geometry_earth.html
  2. 1 1
      examples/materials_normal.html
  3. 19 0
      src/extras/ImageUtils.js

+ 4 - 26
examples/geometry_earth.html

@@ -36,6 +36,7 @@
 		<script type="text/javascript" src="js/Stats.js"></script>
 
 		<script type="text/javascript" src="../build/Three.js"></script>
+		<script type="text/javascript" src="../src/extras/ImageUtils.js"></script>
 
 		<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
 		<script type="text/javascript" src="../src/extras/primitives/Sphere.js"></script>
@@ -48,8 +49,7 @@
 
 			var mesh;
 
-			var mouseX = 0;
-			var mouseY = 0;
+			var mouseX = 0, mouseY = 0;
 
 			var windowHalfX = window.innerWidth / 2;
 			var windowHalfY = window.innerHeight / 2;
@@ -68,12 +68,12 @@
 
 				scene = new THREE.Scene();
 
-				mesh = new THREE.Mesh( new Plane( 300, 300, 3, 3 ), loadImage( 'textures/shadow.png' ) );
+				mesh = new THREE.Mesh( new Plane( 300, 300, 3, 3 ), new THREE.MeshBasicMaterial( { map: ImageUtils.loadTexture( 'textures/shadow.png', THREE.UVMapping ) } ) );
 				mesh.position.y = - 250;
 				mesh.rotation.x = - 90 * Math.PI / 180;
 				scene.addObject(mesh);
 
-				mesh = new THREE.Mesh( new Sphere( 200, 20, 20 ), loadImage( 'textures/land_ocean_ice_cloud_2048.jpg' ) );
+				mesh = new THREE.Mesh( new Sphere( 200, 20, 20 ), new THREE.MeshBasicMaterial( { map: ImageUtils.loadTexture( 'textures/land_ocean_ice_cloud_2048.jpg', THREE.UVMapping ) } ) );
 				mesh.overdraw = true;
 				scene.addObject(mesh);
 
@@ -91,28 +91,6 @@
 
 			}
 
-			function loadImage( path ) {
-
-				var canvas = document.createElement( 'canvas' );
-				canvas.width = 32;
-				canvas.height = 32;
-
-				var material =  new THREE.MeshBasicMaterial( { map: new THREE.Texture( canvas, THREE.UVMapping ) } );
-
-				var image = new Image();
-
-				image.onload = function () {
-
-					material.map.image = this;
-
-				};
-
-				image.src = path;
-
-				return material;
-
-			}
-
 			function onDocumentMouseMove( event ) {
 
 				mouseX = ( event.clientX - windowHalfX );

+ 1 - 1
examples/materials_normal.html

@@ -39,7 +39,7 @@
 		</div>
 
 		<script type="text/javascript" src="../build/Three.js"></script> 
-		<script type="text/javascript" src="geometry/WaltHead.js"></script>
+		<script type="text/javascript" src="obj/WaltHead.js"></script>
 
 		<script type="text/javascript">
 

+ 19 - 0
src/extras/ImageUtils.js

@@ -1,5 +1,24 @@
 var ImageUtils = {
 
+	loadTexture: function ( path, mapping ) {
+
+		var texture = new THREE.Texture( null, mapping );
+
+		var image = new Image();
+
+		image.onload = function () {
+
+			texture.image = this;
+			texture.loaded = true;
+
+		};
+
+		image.src = path;
+
+		return texture;
+
+	},
+
 	loadArray: function ( array ) {
 
 		var i, l, images = [];