Skip to content

fix: defer xrlayers/xrlayerscene init until XR8 is ready, fix HTML issues #1

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

Open
tkada wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix: defer xrlayers/xrlayerscene init until XR8 is ready, fix HTML issues #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
42 changes: 42 additions & 0 deletions src/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
/* globals AFRAME */

// ─── Root cause ──────────────────────────────────────────────────────────────
// xr.js (async) internal execution order:
// 1. yield Promise.all(...) → async load of WASM and other resources
// 2. window.AFRAME && n() → register A-Frame components (triggers init() immediately)
// 3. window.XR8 = I → global XR8 is set HERE for the first time
//
// xrlayerscene.init() / xrlayers.init() call XR8.xxx directly, but when they
// are invoked at step 2, window.XR8 is still undefined, causing
// "ReferenceError: XR8 is not defined".
//
// Fix: wrap AFRAME.registerComponent so that init() of these two components
// is deferred until the "xrloaded" event fires (dispatched right after window.XR8=I).
// ─────────────────────────────────────────────────────────────────────────────

;(function patchXR8DependentComponents () {
const _reg = AFRAME.registerComponent.bind(AFRAME)

AFRAME.registerComponent = function (name, def) {
if ((name === 'xrlayers' || name === 'xrlayerscene') && typeof def.init === 'function') {
const origInit = def.init
def.init = function () {
const self = this
const run = () => origInit.call(self)
// Run immediately if window.XR8 is already defined, otherwise wait for xrloaded
window.XR8 ? run() : window.addEventListener('xrloaded', run, { once: true })
}
}
return _reg(name, def)
}
})()

AFRAME.registerComponent('sky-recenter', {
init () {
const recenter = () => {
this.el.emit('recenter')
this.el.removeEventListener('sky-coaching-overlay.hide', recenter)
}
this.el.addEventListener('sky-coaching-overlay.hide', recenter)
},
})
16 changes: 3 additions & 13 deletions src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,18 +10,7 @@
<script crossorigin="anonymous" src="../external/xrextras/xrextras.js"></script>
<script crossorigin="anonymous" src="../external/landing-page/landing-page.js"></script>
<script crossorigin="anonymous" src="../external/xr/xr.js" async="true" data-preload-chunks="slam"></script>
<script>
/* globals AFRAME */
AFRAME.registerComponent('sky-recenter', {
init() {
const recenter = () => {
this.el.emit('recenter')
this.el.removeEventListener('sky-coaching-overlay.hide', recenter)
}
this.el.addEventListener('sky-coaching-overlay.hide', recenter)
},
})
</script>
<script src="bundle.js"></script>
</head>

<body>
Expand All @@ -39,7 +28,8 @@
<a-box position="0 10 -10" scale="5 5 5" material="color: #AD50FF; shader: flat; src: assets/cube-texture.png" shadow></a-box>

<a-entity light="type: ambient; intensity: 1;"></a-entity>
</sky-scene>
</a-entity>

</a-scene>
</body>

Expand Down