Improved ImageBitmapLoader example.

3d9b1814 · Mr.doob · 8b920e1e · 3d9b1814 · 3d9b1814
隐藏空白更改
内联并排

Showing with 9 addition and 20 deletion

examples/files.js examples/files.js +1 -0

examples/webgl_loader_imagebitmap.html examples/webgl_loader_imagebitmap.html +8 -20

未找到文件。
--- a/examples/files.js
+++ b/examples/files.js
@@ -92,6 +92,7 @@ var files = {
 		"webgl_loader_draco",
 		"webgl_loader_fbx",
 		"webgl_loader_gltf2",
+		"webgl_loader_imagebitmap",
 		"webgl_loader_json_blender",
 		"webgl_loader_json_claraio",
 		"webgl_loader_json_objconverter",

--- a/examples/webgl_loader_imagebitmap.html
+++ b/examples/webgl_loader_imagebitmap.html
@@ -34,7 +34,6 @@
 	<body>
 		<script src="../build/three.js"></script>
 		<script src="js/Detector.js"></script>
-		<script src="js/controls/OrbitControls.js"></script>
 		<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
@@ -50,19 +49,11 @@
 			var container;

 			var camera, scene, renderer;
-			var controls;
+			var group;

 			init();
 			animate();

-			function decimalToHex( d ) {
-
-				var hex = Number( d ).toString( 16 );
-				hex = "000000".substr( 0, 6 - hex.length ) + hex;
-				return hex.toUpperCase();
-
-			}
-
 			function init() {

 				container = document.createElement( 'div' );
@@ -72,16 +63,16 @@

 				camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 1500 );
 				camera.position.set( 0, 4, 7 );
+				camera.lookAt( new THREE.Vector3() );

 				// SCENE

 				scene = new THREE.Scene();

-				// CONTROLS
-
-				controls = new THREE.OrbitControls( camera );
+				//

-				// LIGHTS
+				group = new THREE.Group();
+				scene.add( group );

 				new THREE.ImageBitmapLoader()
 				.setOptions( { imageOrientation: 'none' } )
@@ -97,7 +88,7 @@
 						})
 					);
 					cube.position.x = 1;
-					scene.add( cube );
+					group.add( cube );

 				}, function( p ) {
 					console.log( p );
@@ -119,7 +110,7 @@
 						})
 					);
 					cube.position.x = -1;
-					scene.add( cube );
+					group.add( cube );

 				}, function( p ) {
 					console.log( p );
@@ -141,9 +132,6 @@

 			function onWindowResize() {

-				windowHalfX = window.innerWidth / 2;
-				windowHalfY = window.innerHeight / 2;
-
 				camera.aspect = window.innerWidth / window.innerHeight;
 				camera.updateProjectionMatrix();

@@ -155,7 +143,7 @@

 				requestAnimationFrame( animate );

-				controls.update();
+				group.rotation.y = performance.now() / 2000;

 				renderer.render( scene, camera );