Thank you for your interest.
Iβm not sure where to start explaining.
Our project is quite extensive.
Yes, it was developed using the 8th Wall Cloud Editor.
The project was created with React and Three.js.
What information would help explain this situation better?
To explain the situation in more detail:
First of all, VPS seems to be working properly.
When the target registered as a VPS point is recognized by the camera, it appears to be recognized well.
However, the error occurs at the moment when something that should be triggered after recognition begins to play.
After the error occurs, if the URL is refreshed and recognition is attempted again, the error does not occur, and it works normally.
Below is the source code for the part where XR mainly operates.
import '../camerafeed.css'
import Layout from '../../../components/Layout'
import ContentsHeader from '../../../components/ContentsHeader'
import CameraFeed from '../../../components/camrafeed/CameraFeed'
import {mainSceneInit, removeAllContentElements, vpsPoints} from './threejs/mainSceneInit'
import {useAdjustViewport} from '../../../hooks/useAdjustViewport'
const {adjustViewport} = useAdjustViewport()
declare let React: any
declare let ReactRouterDOM: any
declare let XR8: any
declare let window: any
declare let XRExtras: any
let isXR8Run: boolean = false
let contentTitle: string = ''
export const pauseVpsXR8 = () => {
console.log('vps xr pause')
if (isXR8Run) {
XR8.pause()
}
}
export const resumeVpsXR8 = () => {
console.log('vps xr resume')
if (isXR8Run) {
XR8.resume()
}
}
export const removeVpsContent = () => {
isXR8Run = false
vpsPoints.length = 0
const displayElement = document.getElementById('locationTitleDisplay')
if (displayElement) {
displayElement.remove()
}
const displayImgElement = document.getElementById('locationImgDisplay')
if (displayImgElement) {
displayImgElement.remove()
}
removeAllContentElements()
}
function getMobileOperatingSystem() {
const userAgent = navigator.userAgent || navigator.vendor || window.opera
if (/windows phone/i.test(userAgent)) {
return 'Windows Phone'
}
if (/android/i.test(userAgent)) {
return 'Android'
}
if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
return 'iOS'
}
return 'unknown'
}
const {withRouter, useHistory} = ReactRouterDOM
const {useRef} = React
const VpsArApp = withRouter(({location}) => {
const history = useHistory()
const canvasRef = useRef(null)
React.useLayoutEffect(() => {
// checkPermissions()
adjustViewport()
let inDom = false
const observer = new MutationObserver(() => {
if (document.querySelector('.prompt-box-8w')) {
if (!inDom) {
document.querySelector('.prompt-box-8w p').innerHTML = '<strong>AR 체νμ μν΄μ<br>λμ λ° λ°©ν₯ μΌμ κΆνμ΄ νμν©λλ€.</strong>'
document.querySelector('.prompt-button-8w').innerHTML = 'κ±°λΆνκΈ°'
document.querySelector('.button-primary-8w').innerHTML = 'νμ©νκΈ°'
}
inDom = true
} else if (inDom) {
inDom = false
observer.disconnect()
}
})
observer.observe(document.body, {childList: true})
const queryString = window.location.search
const urlParams = new URLSearchParams(queryString)
if (urlParams.get('title')) {
contentTitle = urlParams.get('title')
}
const onxrloaded = () => {
// document.body.insertAdjacentHTML('beforeend', '<canvas id="camerafeed"></canvas>')
// document.body.insertAdjacentHTML('beforeend', '<div class="contents-ui"></div>')
// const _canvas = document.getElementById('camerafeed')
XR8.addCameraPipelineModule({
name: 'request-camera',
requiredPermissions: () => ([XR8.XrPermissions.permissions().CAMERA]),
})
XR8.addCameraPipelineModule({
name: 'request-gps-location',
requiredPermissions: () => ([XR8.XrPermissions.permissions().DEVICE_GPS]),
})
XR8.addCameraPipelineModule({
name: 'request-gyro',
requiredPermissions: () => ([XR8.XrPermissions.permissions().DEVICE_ORIENTATION]),
})
setTimeout(() => {
XR8.addCameraPipelineModules([ // Add camera pipeline modules.
XR8.GlTextureRenderer.pipelineModule(), // Draws the camera feed.
XR8.Threejs.pipelineModule(), // Creates a ThreeJS AR Scene.
XR8.XrController.pipelineModule(), // Enables SLAM tracking.
// window.LandingPage.pipelineModule(), // Detects unsupported browsers and gives hints.
window.VpsCoachingOverlay.pipelineModule(), // Shows the Lightship VPS coaching overlay.
XRExtras.FullWindowCanvas.pipelineModule(), // Modifies the canvas to fill the window.
// XRExtras.Loading.pipelineModule(), // Manages the loading screen on startup.
XRExtras.RuntimeError.pipelineModule(), // Shows an error image on runtime error.
mainSceneInit(contentTitle),
])
const _canvas = canvasRef.current
if (!_canvas) {
console.error('Canvas reference is null.')
return
}
if (!isXR8Run) {
XR8.XrController.configure({enableVps: true})
}
XR8.run({
canvas: _canvas,
allowedDevices: XR8.XrConfig.device().ANY,
})
isXR8Run = true
XR8.Vps.projectWayspots().then((projectWayspots) => {
projectWayspots.forEach((projectWayspot) => {
// console.log('projectWayspot: ', projectWayspot)
vpsPoints.push(projectWayspot)
})
})
}, 1000)
window.VpsCoachingOverlay.configure({
disablePrompt: true,
})
}
window.XR8 ? onxrloaded() : window.addEventListener('xrloaded', onxrloaded)
return () => {
XR8.stop()
XR8.clearCameraPipelineModules()
const canvas = canvasRef.current
if (canvas) canvas.remove()
const contentUi = document.querySelectorAll('.contents-ui')
contentUi.forEach((item) => {
item.remove()
})
removeVpsContent()
console.log('Clean up!')
}
}, [history])
return (
<Layout>
<ContentsHeader title={''} />
<CameraFeed ref={canvasRef}></CameraFeed>
<div class='contents-ui'></div>
</Layout>
)
})
export {VpsArApp}