From 1653c9a6282970a8f01bee233b0f11344b842f08 Mon Sep 17 00:00:00 2001
From: "Mr.doob" <info@mrdoob.com>
Date: Sun, 24 Nov 2019 16:41:19 -0600
Subject: [PATCH] Examples: Renamed webvr_6dof_panorama to webvr_panorama_depth
 and clean up.

---
 examples/files.js                  |   4 +-
 examples/webvr_6dof_panorama.html  | 138 ----------------------------
 examples/webvr_panorama_depth.html | 139 +++++++++++++++++++++++++++++
 3 files changed, 141 insertions(+), 140 deletions(-)
 delete mode 100644 examples/webvr_6dof_panorama.html
 create mode 100644 examples/webvr_panorama_depth.html
diff --git a/examples/files.js b/examples/files.js
index 7e4a6d917e..9f5472f582 100644
--- a/examples/files.js
+++ b/examples/files.js
@@ -329,14 +329,14 @@ var files = {
 		"webvr_lorenzattractor",
 		"webvr_multiview",
 		"webvr_panorama",
+		"webvr_panorama_depth",
 		"webvr_paint",
 		"webvr_rollercoaster",
 		"webvr_sandbox",
 		"webvr_sculpt",
 		"webvr_video",
 		"webvr_vive_paint",
-		"webvr_vive_sculpt",
-		"webvr_6dof_panorama"
+		"webvr_vive_sculpt"
 	],
 	"physics": [
 		"webgl_physics_cloth",
diff --git a/examples/webvr_6dof_panorama.html b/examples/webvr_6dof_panorama.html
deleted file mode 100644
index fbc36dd66a..0000000000
--- a/examples/webvr_6dof_panorama.html
+++ /dev/null
@@ -1,138 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<title>three.js webvr - 360 6DOF panorama</title>
-		<meta charset="utf-8">
-		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
-		<link type="text/css" rel="stylesheet" href="main.css">
-		<!-- WebXR Device API (For Chrome M76+), expires 12/04/2019 -->
-		<meta http-equiv="origin-trial" content="Aq9LklhCLNUveuCr7QTpGpqwCPG817cYHdVyQuJPOZYk47iRB390lUKa5edVmgS1pZSl8HPspElEC/91Fz55dwIAAABTeyJvcmlnaW4iOiJodHRwczovL3RocmVlanMub3JnOjQ0MyIsImZlYXR1cmUiOiJXZWJYUkRldmljZU03NiIsImV4cGlyeSI6MTU3NTQxNzU5OX0=">
-	</head>
-	<body>
-		<div id="container"></div>
-
-		<div id="info">
-			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webvr - 360 6DOF panorama<br />
-			Created by <a href="https://orfleisher.com" target="_blank" rel="noopener">@juniorxsound</a>. Panorama from <a href="https://krpano.com/examples/?depthmap" target="_blank" rel="noopener">krpano</a>.
-        </div>
-
-		<script src="js/vr/HelioWebXRPolyfill.js"></script>
-
-		<script type="module">
-
-            import * as THREE from '../build/three.module.js';
-            import { WEBVR } from './jsm/vr/WebVR.js';
-
-            var camera, scene, renderer, sphere, clock;
-
-            init();
-            animate();
-
-            function init() {
-
-                var container = document.getElementById( 'container' );
-
-                clock = new THREE.Clock();
-
-                scene = new THREE.Scene();
-                scene.background = new THREE.Color( 0x101010 );
-
-                var light = new THREE.AmbientLight( 0x404040, 10 );
-                scene.add( light );
-
-                camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 2000 );
-                var cameraRig = new THREE.Object3D();
-                cameraRig.position.y = - 1.6;
-                cameraRig.add( camera );
-                scene.add( cameraRig );
-
-                // Create the panoramic sphere geometery
-                var panoSphereGeo = new THREE.SphereBufferGeometry( 6, 256, 256 );
-
-                // Create the panoramic sphere material
-                var panoSphereMat = new THREE.MeshStandardMaterial( {
-                    side: THREE.BackSide,
-                    displacementScale: - 4.0
-                } );
-
-                // Create the panoramic sphere mesh
-                sphere = new THREE.Mesh( panoSphereGeo, panoSphereMat );
-
-                // Load and assign the texture and depth map
-                var manager = new THREE.LoadingManager();
-                var loader = new THREE.TextureLoader( manager );
-
-                loader.load( './textures/kandao3.jpg', function ( texture ) {
-
-                    texture.minFilter = THREE.NearestFilter;
-                    texture.format = THREE.RGBFormat;
-                    texture.generateMipmaps = false;
-                    sphere.material.map = texture;
-
-                } );
-
-                loader.load( './textures/kandao3_depthmap.jpg', function ( depth ) {
-
-                    depth.minFilter = THREE.NearestFilter;
-                    depth.format = THREE.RGBFormat;
-                    depth.generateMipmaps = false;
-                    sphere.material.displacementMap = depth;
-
-                } );
-
-                // On load complete add the panoramic sphere to the scene
-                manager.onLoad = function () {
-
-                    scene.add( sphere );
-
-                };
-
-                renderer = new THREE.WebGLRenderer();
-                renderer.setPixelRatio( window.devicePixelRatio );
-                renderer.setSize( window.innerWidth, window.innerHeight );
-                renderer.vr.enabled = true;
-                container.appendChild( renderer.domElement );
-
-                document.body.appendChild( WEBVR.createButton( renderer ) );
-
-                //
-
-                window.addEventListener( 'resize', onWindowResize, false );
-
-            }
-
-            function onWindowResize() {
-
-                camera.aspect = window.innerWidth / window.innerHeight;
-                camera.updateProjectionMatrix();
-
-                renderer.setSize( window.innerWidth, window.innerHeight );
-
-            }
-
-            function animate() {
-
-                renderer.setAnimationLoop( render );
-
-            }
-
-            function render() {
-
-                // If we are not presenting move the camera a little so the effect is visible
-                if ( ! renderer.vr.isPresenting() ) {
-
-                    var time = clock.getElapsedTime();
-
-                    sphere.rotation.y += 0.001;
-                    sphere.position.x = Math.sin( time ) * 0.2;
-                    sphere.position.z = Math.cos( time ) * 0.2;
-
-                }
-
-                renderer.render( scene, camera );
-
-            }
-
-		</script>
-	</body>
-</html>
diff --git a/examples/webvr_panorama_depth.html b/examples/webvr_panorama_depth.html
new file mode 100644
index 0000000000..adf3c21339
--- /dev/null
+++ b/examples/webvr_panorama_depth.html
@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js webvr - panorama with depth</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+		<link type="text/css" rel="stylesheet" href="main.css">
+		<!-- WebXR Device API (For Chrome M76+), expires 12/04/2019 -->
+		<meta http-equiv="origin-trial" content="Aq9LklhCLNUveuCr7QTpGpqwCPG817cYHdVyQuJPOZYk47iRB390lUKa5edVmgS1pZSl8HPspElEC/91Fz55dwIAAABTeyJvcmlnaW4iOiJodHRwczovL3RocmVlanMub3JnOjQ0MyIsImZlYXR1cmUiOiJXZWJYUkRldmljZU03NiIsImV4cGlyeSI6MTU3NTQxNzU5OX0=">
+	</head>
+	<body>
+		<div id="container"></div>
+
+		<div id="info">
+			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webvr - panorama with depth<br />
+			Created by <a href="https://orfleisher.com" target="_blank" rel="noopener">@juniorxsound</a>. Panorama from <a href="https://krpano.com/examples/?depthmap" target="_blank" rel="noopener">krpano</a>.
+		</div>
+
+		<script src="js/vr/HelioWebXRPolyfill.js"></script>
+
+		<script type="module">
+
+			import * as THREE from '../build/three.module.js';
+			import { WEBVR } from './jsm/vr/WebVR.js';
+
+			var camera, scene, renderer, sphere, clock;
+
+			init();
+			animate();
+
+			function init() {
+
+				var container = document.getElementById( 'container' );
+
+				clock = new THREE.Clock();
+
+				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0x101010 );
+
+				var light = new THREE.AmbientLight( 0x404040, 10 );
+				scene.add( light );
+
+				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 2000 );
+				var cameraRig = new THREE.Object3D();
+				cameraRig.position.y = - 1.6;
+				cameraRig.add( camera );
+				scene.add( cameraRig );
+
+				// Create the panoramic sphere geometery
+				var panoSphereGeo = new THREE.SphereBufferGeometry( 6, 256, 256 );
+
+				// Create the panoramic sphere material
+				var panoSphereMat = new THREE.MeshStandardMaterial( {
+					side: THREE.BackSide,
+					displacementScale: - 4.0
+				} );
+
+				// Create the panoramic sphere mesh
+				sphere = new THREE.Mesh( panoSphereGeo, panoSphereMat );
+
+				// Load and assign the texture and depth map
+				var manager = new THREE.LoadingManager();
+				var loader = new THREE.TextureLoader( manager );
+
+				loader.load( './textures/kandao3.jpg', function ( texture ) {
+
+					texture.minFilter = THREE.NearestFilter;
+					texture.format = THREE.RGBFormat;
+					texture.generateMipmaps = false;
+					sphere.material.map = texture;
+
+				} );
+
+				loader.load( './textures/kandao3_depthmap.jpg', function ( depth ) {
+
+					depth.minFilter = THREE.NearestFilter;
+					depth.format = THREE.RGBFormat;
+					depth.generateMipmaps = false;
+					sphere.material.displacementMap = depth;
+
+				} );
+
+				// On load complete add the panoramic sphere to the scene
+				manager.onLoad = function () {
+
+					scene.add( sphere );
+
+				};
+
+				renderer = new THREE.WebGLRenderer();
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.vr.enabled = true;
+				container.appendChild( renderer.domElement );
+
+				document.body.appendChild( WEBVR.createButton( renderer ) );
+
+				//
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
+			}
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+			}
+
+			function animate() {
+
+				renderer.setAnimationLoop( render );
+
+			}
+
+			function render() {
+
+				// If we are not presenting move the camera a little so the effect is visible
+
+				if ( ! renderer.vr.isPresenting() ) {
+
+					var time = clock.getElapsedTime();
+
+					sphere.rotation.y += 0.001;
+					sphere.position.x = Math.sin( time ) * 0.2;
+					sphere.position.z = Math.cos( time ) * 0.2;
+
+				}
+
+				renderer.render( scene, camera );
+
+			}
+
+		</script>
+	</body>
+</html>
-- 
GitLab

