Added equirectangular panorama example with drop events.

e100c23e · Mr.doob · b1680deb · e100c23e
隐藏空白更改
内联并排

Showing with 42 addition and 1 deletion

examples/webgl_panorama_equirectangular.html examples/webgl_panorama_equirectangular.html +42 -1

未找到文件。
--- a/examples/webgl_panorama_equirectangular.html
+++ b/examples/webgl_panorama_equirectangular.html
@@ -30,7 +30,10 @@
 	<body>

 		<div id="container"></div>
-		<div id="info"><a href="http://threejs.org" target="_blank">three.js webgl</a> - equirectangular panorama demo. photo by <a href="http://www.flickr.com/photos/jonragnarsson/2294472375/" target="_blank">Jón Ragnarsson</a>.</div>
+		<div id="info">
+			<a href="http://threejs.org" target="_blank">three.js webgl</a> - equirectangular panorama demo. photo by <a href="http://www.flickr.com/photos/jonragnarsson/2294472375/" target="_blank">Jón Ragnarsson</a>.<br />
+			drag equirectangular texture into the page.
+		</div>

 		<script src="../build/three.min.js"></script>

@@ -82,6 +85,44 @@

 				//

+				document.addEventListener( 'dragover', function ( event ) {
+
+					event.preventDefault();
+					event.dataTransfer.dropEffect = 'copy';
+
+				}, false );
+
+				document.addEventListener( 'dragenter', function ( event ) {
+
+					document.body.style.opacity = 0.5;
+
+				}, false );
+
+				document.addEventListener( 'dragleave', function ( event ) {
+
+					document.body.style.opacity = 1;
+
+				}, false );
+
+				document.addEventListener( 'drop', function ( event ) {
+
+					event.preventDefault();
+
+					var reader = new FileReader();
+					reader.addEventListener( 'load', function ( event ) {
+
+						material.map.image.src = event.target.result;
+						material.map.needsUpdate = true;
+
+					}, false );
+					reader.readAsDataURL( event.dataTransfer.files[ 0 ] );
+
+					document.body.style.opacity = 1;
+
+				}, false );
+
+				//
+
 				window.addEventListener( 'resize', onWindowResize, false );

 			}