Exampels: Fix CSS3D panorama example for iOS 13.

9aa782fb · Mugen87 · e3002404 · 9aa782fb
隐藏空白更改
内联并排

Showing with 52 addition and 2 deletion

examples/css3d_panorama_deviceorientation.html examples/css3d_panorama_deviceorientation.html +52 -2

未找到文件。
--- a/examples/css3d_panorama_deviceorientation.html
+++ b/examples/css3d_panorama_deviceorientation.html
@@ -5,8 +5,50 @@
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 		<link type="text/css" rel="stylesheet" href="main.css">
+		<style>
+
+			#overlay {
+				position: absolute;
+				z-index: 1;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height:100%;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				opacity: 1;
+				background-color: #000000;
+				color: #ffffff;
+			}
+
+			#overlay > div {
+				text-align: center;
+			}
+
+			#overlay > div > button {
+				height: 20px;
+				background: transparent;
+				color: #ffffff;
+				outline: 1px solid #ffffff;
+				border: 0px;
+				cursor: pointer;
+			}
+
+			#overlay > div > p {
+				color: #777777;
+				font-size: 12px;
+			}
+
+		</style>
 	</head>
 	<body>
+		<div id="overlay">
+			<div>
+				<button id="startButton">Start Demo</button>
+				<p>Using device orientation might require a user interaction.</p>
+			</div>
+		</div>
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> css3d - panorama - device orientation.<br/>cubemap by <a href="http://www.humus.name/index.php?page=Textures" target="_blank" rel="noopener">Humus</a>.</div>

 		<script type="module">
@@ -19,11 +61,19 @@
 			var camera, scene, renderer;
 			var controls;

-			init();
-			animate();
+			var startButton = document.getElementById( 'startButton' );
+			startButton.addEventListener( 'click', function () {
+
+				init();
+				animate();
+
+			}, false );

 			function init() {

+				var overlay = document.getElementById( 'overlay' );
+				overlay.remove();
+
 				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );

 				controls = new DeviceOrientationControls( camera );