Hello!
I am using
window.addEventListener(‘click’, XR8.XrController.recenter) or
window.addEventListener(‘touchstart’, XR8.XrController.recenter)
to make button to recenter/recalibrate my space.
But can’t figure out how to configure the target (precise entity i need touch to recenter) like SCREEN_TOUCH_START does.
At this point ‘touchstart’ recenters after touching any place on a screen, and ‘click’ recenters after touching any place INSTEAD of a button (entity component is attached to).
I have also new bug today I can’t figure out.
When switching between levels I have this errors:
Unhandled promise rejection: Error: Cannot get component data if not attached.
at get runtime.js
at getCameraTransform runtime.js
at onSessionDetach xr-simd-27.3.1.427.js
at (anonymous) xr-simd-27.3.1.427.js
at reduce [native code]
at Z xr-simd-27.3.1.427.js
at (anonymous) xr-simd-27.3.1.427.js
at detach xr-simd-27.3.1.427.js
at stop xr-simd-27.3.1.427.js
at stop runtime.js
and it freezes.
Or these:
[XR] Camera Pipeline Module named reality was already added; skipping.
at LA xr-simd-27.3.1.427.js
at start runtime.js
at (anonymous) runtime.js
Unhandled promise rejection: Error: [XR] Scale can only be changed before calling XR8.run()
at PA slam.js
at start runtime.js
at (anonymous) runtime.js
And i can’t figure what component is the root of problem but only component that uses “XR” is this (although i didn’t change anything today to make it stuck, and disabling it doesn’t fiz anythin either):
import * as ecs from '@8thwall/ecs'
const {THREE, XR8} = window as any
ecs.registerComponent({
name: 'resetCameraButton',
schema: {
// Default position values for the camera reset.
defaultX: ecs.f32,
defaultY: ecs.f32,
defaultZ: ecs.f32,
// Optionally, you can specify the camera entity directly.
cameraEntity: ecs.eid,
},
schemaDefaults: {
defaultX: 0,
defaultY: 1.6,
defaultZ: 0,
// cameraEntity is left blank by default. If not set, the component will query for a Camera.
},
data: {},
add: (world, component) => {
const {eid, schemaAttribute} = component
// Get configuration from schema.
const {defaultX, defaultY, defaultZ, cameraEntity} = schemaAttribute.get(eid)
const camEid = cameraEntity
// Reset the camera position using the default values.
const newPos = {x: defaultX, y: defaultY, z: defaultZ}
console.log('newPos set')
// Listen for a screen touch event on this button.
// window.addEventListener('click', XR8.XrController.recenter)
// window.addEventListener('touchstart', XR8.XrController.recenter)
window.addEventListener('touchstart', XR8.XrController.recenter)
},
tick: (world, component) => {},
remove: (world, component) => {
window.removeEventListener('touchstart', XR8.XrController.recenter)
window.removeEventListener('click', XR8.XrController.recenter)
},
})Here may be the problem.
I had this component that also gave me an error when switching spaces.
TypeError: null is not an object (evaluating 'component.data.intervalTrueId')
at remove cyclicblinkingUP.ts:63:43
at (anonymous) runtime.js
at forEach [native code]
at p runtime.js
at w runtime.js
at tick runtime.js
at r runtime.js
at (anonymous) runtime.js
at e runtime.js
so i commented out remove of listeners and that’s when above errors start to occur (but there was a time it was working)
here is the component:
import * as ecs from '@8thwall/ecs'
declare const THREE: any
ecs.registerComponent({
name: 'cyclicPositionAnimationDOWN',
schema: {
bl_interval: ecs.f32,
bl_delay: ecs.f32,
bl_duration: ecs.f32,
// No extra schema parameters needed.
},
schemaDefaults: {
bl_interval: 3000,
bl_delay: 800,
bl_duration: 200,
},
data: {
// Store interval IDs so we can clear them later.
intervalTrueId: ecs.ui32,
intervalFalseId: ecs.ui32,
},
add: (world, component) => {
const interval = component.schema.bl_interval
const delay = component.schema.bl_delay
const howlong = component.schema.bl_duration
// console.log(ecs.PositionAnimation.get(world, component.eid))
// Set an interval that, every 3000 ms, sets loop = true.
const intervalTrue = world.time.setInterval(() => {
ecs.PositionAnimation.set(world, component.eid, {
fromX: 0,
fromY: 0.241,
fromZ: 0.693,
toX: 0,
toY: 0.289,
toZ: 0.776,
autoFrom: false,
duration: howlong,
loop: true,
reverse: true,
easeIn: false,
easeOut: false,
easingFunction: 'Quadratic',
})
// console.log('blinking')
}, interval)
component.data.intervalTrueId = intervalTrue
// console.log(ecs.PositionAnimation.get(world, component.eid))
// Set another interval that, every 3300 ms, sets loop = false.
const timeout = world.time.setTimeout(() => {
const intervalFalse = world.time.setInterval(() => {
ecs.PositionAnimation.remove(world, component.eid)
// console.log('not blinking')
}, interval)
component.data.intervalFalseId = intervalFalse
}, delay)
},
tick: (world, component) => {
// No per-frame logic needed.
},
remove: (world, component) => {
// Clear both intervals when the component is removed.
world.time.clearTimeout(component.data.intervalTrueId)
world.time.clearTimeout(component.data.intervalFalseId)
console.log('[cyclicPositionAnimation] Intervals cleared')
},
})
Hi! The issue you’re facing is due to the fact that accessing data in remove is not supported.
Hm.. alright thank you, i will check on that!
And what about recenter? Is it possible configure target for touch event?
Check out this sample project for how to correctly setup event listeners for touching screen elements.
Also you can see how we call XR8 recenter in our sample project here:
Hi George, I’m a bit confused it doesn’t look like the Animated Shaders sample project shows you how to to call XR8 recenter? Am I mistaken?
I figured it out by the way. I used this :
const {XR8} = window as any
if (XR8 && XR8.XrController) {
XR8.XrController.recenter()
}
This topic was automatically closed 4 days after the last reply. New replies are no longer allowed.