https://youtube.com/shorts/WPKzFRnxAWE ← look out for bright flashing
Hello, first thing to check.
This could be z-fighting. I would remove any ground plane you have in the scene to verify if this still happens.
Secondly, are you receiving any console errors or logs? What device are you testing with?
Hi Ian,
Thanks for the suggestions. There are no ground planes in my scene as far as I can tell, and I am not receiving anything from the console. I am testing with the iPhone 13.
Can you share the code of your scene?
Sure, please excuse its sloppiness (I’m still getting used to Javascript)
import * as ecs from '@8thwall/ecs'
function setComponent(entityName, componentName, properties, world) {
ecs[componentName].set(world, entityName, properties)
}
ecs.registerComponent({
name: 'Tap Place',
schema: {
snareDrum: ecs.eid,
bassDrum: ecs.eid,
hiHat: ecs.eid,
floorTom: ecs.eid,
tomOne: ecs.eid,
tomTwo: ecs.eid,
crashCymbal: ecs.eid,
},
add: (world, component) => {
const {snareDrum} = component.schema
const {bassDrum} = component.schema
const {hiHat} = component.schema
const {floorTom} = component.schema
const {tomOne} = component.schema
const {tomTwo} = component.schema
const {crashCymbal} = component.schema
if (!snareDrum) {
console.error('Snare drum not set in schema')
return
}
if (!bassDrum) {
console.error('Bass drum not set in schema')
return
}
if (!hiHat) {
console.error('Hi Hat not set in schema')
return
}
if (!floorTom) {
console.error('Floor tom not set in schema')
return
}
if (!tomOne) {
console.error('Tom 2 not set in schema')
return
}
if (!tomTwo) {
console.error('Tom 2 not set in schema')
return
}
if (!crashCymbal) {
console.error('Crash cymbal not set in schema')
return
}
const crashCymbalObject = world.three.entityToObject.get(crashCymbal)
const tomOneObject = world.three.entityToObject.get(tomOne)
const tomTwoObject = world.three.entityToObject.get(tomTwo)
const floorTomObject = world.three.entityToObject.get(floorTom)
const hatObject = world.three.entityToObject.get(hiHat)
const bassObject = world.three.entityToObject.get(bassDrum)
const raycaster = new THREE.Raycaster()
const mouse = new THREE.Vector2()
let lastInteractionTime = 0
function handleInteraction(event) {
const currentTime = Date.now()
console.log('event detected')
if (currentTime - lastInteractionTime < 1) {
return
}
lastInteractionTime = currentTime
if (event.touches) {
mouse.x = (event.touches[0].clientX / window.innerWidth) * 2 - 1
mouse.y = -(event.touches[0].clientY / window.innerHeight) * 2 + 1
} else {
mouse.x = (event.clientX / window.innerWidth) * 2 - 1
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1
}
raycaster.setFromCamera(mouse, world.three.activeCamera)
// use entityToObject within each if statement for optimization
const snareObject = world.three.entityToObject.get(snareDrum)
let audioName = ''
let sourceEntity
const snareIntersection = raycaster.intersectObject(snareObject, true)
if (snareIntersection.length > 0) {
audioName = 'snare.mp3'
sourceEntity = snareDrum
} else {
const bassIntersection = raycaster.intersectObject(bassObject, true)
if (bassIntersection.length > 0) {
audioName = 'kick.mp3'
sourceEntity = bassDrum
} else {
const hatIntersection = raycaster.intersectObject(hatObject, true)
if (hatIntersection.length > 0) {
audioName = 'hihat.mp3'
sourceEntity = hiHat
} else {
const floorTomIntersection = raycaster.intersectObject(floorTomObject, true)
if (floorTomIntersection.length > 0) {
audioName = 'floortom.mp3'
sourceEntity = floorTom
} else {
const tomTwoIntersection = raycaster.intersectObject(tomTwoObject, true)
if (tomTwoIntersection.length > 0) {
audioName = 'tom2.mp3'
sourceEntity = tomTwo
} else {
const crashCymbalIntersection = raycaster.intersectObject(crashCymbalObject, true)
if (crashCymbalIntersection.length > 0) {
audioName = 'crashcymbal.mp3'
sourceEntity = crashCymbal
} else {
const tomOneIntersection = raycaster.intersectObject(tomOneObject, true)
if (tomOneIntersection.length > 0) {
audioName = 'tom1.mp3'
sourceEntity = tomOne
} else {
// no drum was selected, turn into switch statement later
return
}
}
}
}
}
}
}
// set the audio to play
ecs.Audio.set(world, sourceEntity, {
url: 'assets/'.concat(audioName),
volume: 0.8,
loop: false,
positional: true,
refDistance: 10,
distanceModel: 'linear',
rolloffFactor: 0.8,
maxDistance: 20000,
})
world.audio.paused = false
}
window.addEventListener('click', handleInteraction)
window.addEventListener('touchstart', handleInteraction)
},
})
What about your heirarchy? I would suggest hiding the ground first to see if it could be causing the issue.
Here’s my hierarchy, there was no ground object when this issue occurred.
I have two suggestions to help troubleshoot the issue:
- Turn off Low Power Mode (indicated by the yellow battery icon) and test again.
- Gradually hide or remove objects in your hierarchy to identify the cause of the problem.
When debugging, it’s essential to work backwards by eliminating elements step-by-step until the issue disappears.
1 Like