-
-
Notifications
You must be signed in to change notification settings - Fork 198
Description
When a user exits a WebXR session (via back button or browser controls) and re-enters the AR experience, the previous session's state persists, causing:
Placement data from the previous session to remain visible
Camera tracking issues or black screen on re-entry
Anchor references not being properly cleared
Expected Behavior:
Each WebXR session should start as a completely fresh experience
All previous placements should be cleared
Camera should initialize properly on re-entry
No residual state from previous sessions should exist
Actual Behavior:
Portrait placement info from previous session appears in swiper
Portrait appears as "placed" even though user hasn't placed it in current session
Camera may show black screen or poor tracking on re-entry
Three.js scene contains objects from previous session
Steps to Reproduce:
Enter AR experience
Place a portrait on the wall
Press back button to exit AR
Click another portrait to enter AR again
Notice the previous portrait still appears as placed
Environment:
Library: @react-three/xr (latest)
Framework: Next.js with React
Device: Android with Chrome WebXR support
Three.js version: r159+
Attempted Solutions:
We've tried:
Creating fresh XR Store on each component mount
Calling session.end() on unmount
Calling store.destroy() after session ends
Clearing Three.js scene with scene.clear()
Resetting camera position/rotation/scale
Explicitly resetting React state variables to null
Adding cleanup delays between session end and store destroy
Issue Remains:
State resets appear successful in console logs
However, on re-entry the UI still shows previous placement state
Suggests XR Store or session lifecycle isn't fully cleaning up internal references
Suspected Root Cause:
The XR Store or WebXR session may retain internal references or cached state that aren't properly cleared by store.destroy() or session end handlers, particularly:
Anchor references in the XR session
Internal store subscription listeners
WebGL texture/geometry caches from previous scene
Code Example:
"// Session cleanup on unmount
useEffect(() => {
return () => {
if (session) {
session.end();
setTimeout(() => {
store.destroy();
}, 50);
}
};
}, [session, store]);
// Canvas cleanup
onCreated={({ gl, scene, camera }) => {
scene.clear();
camera.position.set(0, 0, 0);
camera.rotation.set(0, 0, 0);
camera.scale.set(1, 1, 1);
}}
// Fresh store per session
const [store] = useState(() =>
createXRStore({
hitTest: true,
frameRate: "high",
anchors: true,
})
);"
Is there an additional step or API call needed to fully reset the XR Store and session state? Should we be calling additional cleanup methods beyond session.end() and store.destroy()?