I have two image targets but the second one is not read when I test the preview. when I try the preview, only the
name=“target1”
works.
this one does not work:
name=“target2”
I’d appreciate your help.
here are my code:
head.html:
body.html:
<img id="eggPNG" src="assets/eggNest.png" />
<video
id="eggHatching"
crossorigin="anonymous"
loop="true"
muted
autoplay
playsinline
webkit-playsinline
src="assets/Egg-Cracking.mp4"></video>
<video
id="babyBird"
crossorigin="anonymous"
loop="true"
muted
autoplay
playsinline
webkit-playsinline
src="assets/Baby-Bird.mp4"></video>
<video
id="birdVideo"
crossorigin="anonymous"
loop="true"
muted
autoplay
playsinline
webkit-playsinline
src="assets/Flying-Bird.mp4"></video>
<!-- second image target -->
<img id="eggPNG1" src="assets/Wall2-vector.jpg" />
<video
id="eggHatching1"
crossorigin="anonymous"
loop="true"
muted
autoplay
playsinline
webkit-playsinline
src="assets/Heron_Cartoon_Video_Ready.mp4"></video>
<video
id="babyBird1"
crossorigin="anonymous"
loop="true"
muted
autoplay
playsinline
webkit-playsinline
src="assets/jellyfish-video.mp4"></video>
<a-video
id="eggVideoEntity1"
src="#eggHatching1"
width="1"
height="1"
position="0 0 0.01"
material="shader: flat; src: #eggHatching1">
</a-video>
<a-video
id="babyBirdVideoEntity1"
src="#babyBird1"
width="1"
height="1"
position="0 0 0.01"
material="shader: flat; src: #babyBird1">
</a-video>
<a-video
id="BirdVideoEntity1"
src="#birdVideo"
width="1"
height="1"
position="0 0 0.01"
material="shader: flat; src: #birdVideo">
</a-video>
app.js:
AFRAME.registerComponent(‘egg-hatch’, {
init() {
const egg = document.querySelector(‘#egg’)
const hatchingVideo = document.querySelector(‘#eggHatching’)
const hatchingVideoEntity = document.querySelector(‘#eggVideoEntity’)
const videoBabyBird = document.querySelector(‘#babyBird’)
const BabyBirdVidEntity = document.querySelector(‘#babyBirdVideoEntity’)
const videoBird = document.querySelector(‘#birdVideo’)
const BirdVidEntity = document.querySelector(‘#BirdVideoEntity’)
// Second image target
const egg1 = document.querySelector(‘#egg1’)
const hatchingVideo1 = document.querySelector(‘#eggHatching1’)
const hatchingVideoEntity1 = document.querySelector(‘#eggVideoEntity1’)
const videoBabyBird1 = document.querySelector(‘#babyBird1’)
const BabyBirdVidEntity1 = document.querySelector(‘#babyBirdVideoEntity1’)
// hide videos on realityready
this.el.sceneEl.addEventListener('realityready', () => {
hatchingVideoEntity.setAttribute('visible', false)
BabyBirdVidEntity.setAttribute('visible', false)
BirdVidEntity.setAttribute('visible', false)
})
egg.addEventListener('click', () => {
egg.parentNode.removeChild(egg)
hatchingVideo.play()
hatchingVideoEntity.setAttribute('visible', true)
hatchingVideoEntity.classList.add('cantap')
})
hatchingVideoEntity.addEventListener('click', () => {
hatchingVideo.pause()
hatchingVideoEntity.parentNode.removeChild(hatchingVideoEntity)
videoBabyBird.play()
BabyBirdVidEntity.setAttribute('visible', true)
BabyBirdVidEntity.classList.add('cantap')
})
BabyBirdVidEntity.addEventListener('click', () => {
videoBabyBird.pause()
BabyBirdVidEntity.parentNode.removeChild(BabyBirdVidEntity)
videoBird.play()
BirdVidEntity.setAttribute('visible', 'true')
BirdVidEntity.classList.add('cantap')
})
// Second image target, hide videos on realityready
this.el.sceneEl.addEventListener('realityready', () => {
hatchingVideoEntity1.setAttribute('visible', false)
BabyBirdVidEntity1.setAttribute('visible', false)
BirdVidEntity.setAttribute('visible', false)
})
egg1.addEventListener('click', () => {
egg1.parentNode.removeChild(egg1)
hatchingVideo1.play()
hatchingVideoEntity1.setAttribute('visible', true)
hatchingVideoEntity1.classList.add('cantap')
})
hatchingVideoEntity1.addEventListener('click', () => {
hatchingVideo1.pause()
hatchingVideoEntity1.parentNode.removeChild(hatchingVideoEntity1)
videoBabyBird1.play()
BabyBirdVidEntity1.setAttribute('visible', true)
BabyBirdVidEntity1.classList.add('cantap')
})
BabyBirdVidEntity1.addEventListener('click', () => {
videoBabyBird1.pause()
BabyBirdVidEntity1.parentNode.removeChild(BabyBirdVidEntity1)
videoBird.play()
BirdVidEntity.setAttribute('visible', 'true')
BirdVidEntity.classList.add('cantap')
})
},
})