Skip to content

Make Three.js location-based examples available on iPhone #659

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Mar 17, 2025
Merged

Make Three.js location-based examples available on iPhone #659

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8e34f61
Show confirmation button before creating DeviceOrientationControls
ma2yama Mar 17, 2025
1639207
npm run build
ma2yama Mar 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion aframe/build/aframe-ar-location-only.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion aframe/build/aframe-ar-location-only.mjs
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion aframe/build/aframe-ar-new-location-only.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion aframe/build/aframe-ar-new-location-only.mjs
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion aframe/build/aframe-ar-nft.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion aframe/build/aframe-ar-nft.mjs
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion aframe/build/aframe-ar.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion aframe/build/aframe-ar.mjs
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion three.js/build/ar-threex-location-only.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion three.js/build/ar-threex-location-only.mjs
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion three.js/build/ar-threex.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion three.js/build/ar-threex.mjs
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion three.js/build/ar.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion three.js/build/ar.mjs
View file
Open in desktop

Large diffs are not rendered by default.

19 changes: 17 additions & 2 deletions three.js/examples/location-based/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,13 @@

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<title>AR.js Three.js</title>
<style>
html,
body {
height: 100%;
margin: 0;
}
</style>
</head>
Expand All @@ -22,8 +25,20 @@
</script>

<body>
<video id='video1' autoplay playsinline style='display:none'></video>
<canvas id="canvas1" style='background-color: black; width:100%; height:100%; display:block'></canvas>
<video id="video1" autoplay playsinline style="display:none"></video>
<canvas id="canvas1" style="background-color: black; width:100%; height:100%; display:block"></canvas>

<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;">
<div style="background-color: white; padding: 6px; border-radius: 3px; width: 18rem; height: 12rem;">
<div style="width: 100%; height: 70%; display: flex; justify-content: center; align-items: center;">
<div style="font-size: 14pt; margin: 1rem;">This immersive website requires access to your device motion sensors.</div>
</div>
<div style="display: inline-flex; width: 100%; height: 30%; justify-content: center; align-items: center;">
<button id="startButton" style="width: 50%; height: 80%; font-size: 12pt;">OK</button>
</div>
</div>
</div>

<script type="module" src="index.js"></script>
</body>

Expand Down
19 changes: 16 additions & 3 deletions three.js/examples/location-based/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,22 @@ function main() {
let orientationControls;

// Orientation controls only work on mobile device
if (isMobile()){
orientationControls = new DeviceOrientationControls(camera);
}
if (isMobile()){
if (
window.DeviceOrientationEvent !== undefined &&
typeof window.DeviceOrientationEvent.requestPermission === "function"
) {
document.getElementById("startModal").style.display = "flex";
const onStartClick = () => {
orientationControls = new DeviceOrientationControls(camera);
document.getElementById("startModal").style.display = "none";
}
document.getElementById("startModal").addEventListener("click", onStartClick);
document.getElementById("startButton").addEventListener("click", onStartClick);
} else {
orientationControls = new DeviceOrientationControls(camera);
}
}

let fake = null;
let first = true;
Expand Down