Skip to content

Commit dd5ce23

Browse files
nickw1nickw1
authored
Merge pull request #659 from ma2yama/fixForiPhone
Make Three.js location-based examples available on iPhone
2 parents c4f1c0b + 1639207 commit dd5ce23

16 files changed

+47
-19
lines changed

‎aframe/build/aframe-ar-location-only.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎aframe/build/aframe-ar-location-only.mjs

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎aframe/build/aframe-ar-new-location-only.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎aframe/build/aframe-ar-new-location-only.mjs

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎aframe/build/aframe-ar-nft.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎aframe/build/aframe-ar-nft.mjs

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎aframe/build/aframe-ar.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎aframe/build/aframe-ar.mjs

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎three.js/build/ar-threex-location-only.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎three.js/build/ar-threex-location-only.mjs

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎three.js/build/ar-threex.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎three.js/build/ar-threex.mjs

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎three.js/build/ar.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎three.js/build/ar.mjs

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎three.js/examples/location-based/index.html

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,13 @@
33

44
<head>
55
<meta charset="utf-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
7+
<title>AR.js Three.js</title>
68
<style>
79
html,
810
body {
911
height: 100%;
12+
margin: 0;
1013
}
1114
</style>
1215
</head>
@@ -22,8 +25,20 @@
2225
</script>
2326

2427
<body>
25-
<video id='video1' autoplay playsinline style='display:none'></video>
26-
<canvas id="canvas1" style='background-color: black; width:100%; height:100%; display:block'></canvas>
28+
<video id="video1" autoplay playsinline style="display:none"></video>
29+
<canvas id="canvas1" style="background-color: black; width:100%; height:100%; display:block"></canvas>
30+
31+
<div id="startModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background-color: rgba(0,0,0,0.6); justify-content: center; align-items: center;">
32+
<div style="background-color: white; padding: 6px; border-radius: 3px; width: 18rem; height: 12rem;">
33+
<div style="width: 100%; height: 70%; display: flex; justify-content: center; align-items: center;">
34+
<div style="font-size: 14pt; margin: 1rem;">This immersive website requires access to your device motion sensors.</div>
35+
</div>
36+
<div style="display: inline-flex; width: 100%; height: 30%; justify-content: center; align-items: center;">
37+
<button id="startButton" style="width: 50%; height: 80%; font-size: 12pt;">OK</button>
38+
</div>
39+
</div>
40+
</div>
41+
2742
<script type="module" src="index.js"></script>
2843
</body>
2944

‎three.js/examples/location-based/index.js

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,22 @@ function main() {
2222
let orientationControls;
2323

2424
// Orientation controls only work on mobile device
25-
if (isMobile()){
26-
orientationControls = new DeviceOrientationControls(camera);
27-
}
25+
if (isMobile()){
26+
if (
27+
window.DeviceOrientationEvent !== undefined &&
28+
typeof window.DeviceOrientationEvent.requestPermission === "function"
29+
) {
30+
document.getElementById("startModal").style.display = "flex";
31+
const onStartClick = () => {
32+
orientationControls = new DeviceOrientationControls(camera);
33+
document.getElementById("startModal").style.display = "none";
34+
}
35+
document.getElementById("startModal").addEventListener("click", onStartClick);
36+
document.getElementById("startButton").addEventListener("click", onStartClick);
37+
} else {
38+
orientationControls = new DeviceOrientationControls(camera);
39+
}
40+
}
2841

2942
let fake = null;
3043
let first = true;

0 commit comments

Comments
 (0)