Improved ImageBitmapLoader example.

mrdoob · Nov 15, 2017 · 62a93a1 · 62a93a1
1 parent 0006073
commit 62a93a1
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 72 deletions.
diff --git a/examples/js/loaders/ImageBitmapLoader.js b/examples/js/loaders/ImageBitmapLoader.js
@@ -2,7 +2,7 @@
  * @author thespite / http://clicktorelease.com/
  */
 
-function detectCreateImageBitmap ( optionsList ) {
+function detectCreateImageBitmap( optionsList ) {
 
 	var url = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==';
 

diff --git a/examples/webgl_loader_imagebitmap.html b/examples/webgl_loader_imagebitmap.html
@@ -5,51 +5,27 @@
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 		<style>
-			body
-			{
+			body {
 				font-family: Monospace;
 				background-color: #000;
 				color: #fff;
 				margin: 0px;
 				overflow: hidden;
 			}
-			#info
-			{
+			#info {
 				position: absolute;
 				top: 10px;
 				width: 100%;
 				text-align: center;
 				z-index: 100;
 				display:block;
 			}
-			#info a, .button
-			{
+			#info a, .button {
 				color: #f00;
 				font-weight: bold;
 				text-decoration: underline;
 				cursor: pointer
 			}
-			.actions{
-				padding: 2em;
-				line-height: 0;
-			}
-			.actions span{
-				line-height: 4em;
-				padding: 1em;
-				border: 1px solid white;
-				cursor: pointer;
-				white-space: nowrap;
-				user-select: none;
-			}
-			.actions span:hover{
-				color: red;
-				border-color: red;
-			}
-			.actions span:active{
-				color: black;
-				background-color: red;
-				border-color: red;
-			}
 		</style>
 	</head>
 	<body>
@@ -58,20 +34,12 @@
 		<script src="js/loaders/ImageBitmapLoader.js"></script>
 		<div id="info">
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - Texture loader using ImageBitmap
-			<div class="actions">
-				<span id="add_ib_btn">Add ImageBitmap</span>
-				<span id="add_i_btn">Add Image</span>
-				<span id="clear_btn">Clear</span>
-			</div>
 		</div>
 
-
 		<script>
 
 			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
-			THREE.Cache.enabled = true;
-
 			var container;
 
 			var camera, scene, renderer;
@@ -80,20 +48,21 @@
 			init();
 			animate();
 
-			function addImageBitmap () {
+			function addImageBitmap() {
 
 				new THREE.ImageBitmapLoader()
 					.setOptions( { imageOrientation: 'none' } )
-					.load( 'textures/planets/earth_atmos_2048.jpg?' + performance.now(), function( imageBitmap ) {
+					.load( 'textures/planets/earth_atmos_2048.jpg?' + performance.now(), function ( imageBitmap ) {
 
-						var tex = new THREE.CanvasTexture( imageBitmap );
+						var texture = new THREE.CanvasTexture( imageBitmap );
+						var material = new THREE.MeshBasicMaterial( { map: texture } );
 
 						/* ImageBitmap should be disposed when done with it
 						   Can't be done until it's actually uploaded to WebGLTexture */
 
 						// imageBitmap.close();
 
-						addCube( tex );
+						addCube( material );
 
 					}, function( p ) {
 						console.log( p );
@@ -103,22 +72,21 @@
 
 			}
 
-			function addImage () {
+			function addImage() {
 
 				new THREE.ImageLoader()
 					.setCrossOrigin( '*' )
-					.load( 'textures/planets/earth_atmos_2048.jpg?' + performance.now(), function( image ) {
-							var tex = new THREE.CanvasTexture( image );
-							addCube( tex );
+					.load( 'textures/planets/earth_atmos_2048.jpg?' + performance.now(), function ( image ) {
+							var texture = new THREE.CanvasTexture( image );
+							var material = new THREE.MeshBasicMaterial( { color: 0xff8888, map: texture } );
+							addCube( material );
 				});
 
 			}
 
 			var geometry = new THREE.BoxBufferGeometry( 1,1,1 );
 
-			function addCube( texture ) {
-
-				var material = new THREE.MeshBasicMaterial( { map: texture } );
+			function addCube( material ) {
 
 				var cube = new THREE.Mesh( geometry, material );
 				cube.position.set( Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1 );
@@ -152,41 +120,26 @@
 				cubes = new THREE.Group();
 				group.add( cubes );
 
-				addImageBitmap();
-				addImage();
-
-				var ibBtn = document.getElementById( 'add_ib_btn' );
-				ibBtn.addEventListener( 'click', function( e ) {
-					addImageBitmap();
-					e.preventDefault();
-				} );
-
-				var iBtn = document.getElementById( 'add_i_btn' );
-				iBtn.addEventListener( 'click', function( e ) {
-					addImage();
-					e.preventDefault();
-				} );
-
-				var clearBtn = document.getElementById( 'clear_btn' );
-				clearBtn.addEventListener( 'click', function( e ) {
-					while( cubes.children.length ) {
-						var cube = cubes.children[ 0 ]
-						cubes.remove( cube );
-						cube.geometry.dispose();
-						cube.material.map.dispose();
-					}
-				})
-
 				// RENDERER
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 
+				// TESTS
+
+				setTimeout( addImage, 300 );
+				setTimeout( addImage, 600 );
+				setTimeout( addImage, 900 );
+				setTimeout( addImageBitmap, 1300 );
+				setTimeout( addImageBitmap, 1600 );
+				setTimeout( addImageBitmap, 1900 );
+
 				// EVENTS
 
 				window.addEventListener( 'resize', onWindowResize, false );
+
 			}
 
 			function onWindowResize() {