I am so stumped, I can't get my webAR experience to work. I'm hoping I can get help here. I just need my button activate my rain.glb If I can get that going everything else will make sense to me I think.
This is what is going in the head
<!-- Copyright (c) 2022 8th Wall, Inc. -->
<!-- head.html is optional; elements will be added to your html head before app.js is loaded. -->
<!-- Use "8thwall:" meta tags to hook into 8th Wall's build process and developer tools. -->
<meta name="8thwall:renderer" content="aframe:1.3.0">
<meta name="8thwall:package" content="@8thwall.xrextras">
<meta name="8thwall:package" content="@8thwall.landing-page">
<!-- Other external scripts and meta tags can also be added. -->
<meta name="apple-mobile-web-app-capable" content="yes">
<script crossorigin="anonymous" src="//cdn.8thwall.com/web/aframe/aframe-extras-6.1.1.min.js"></script>
in the body
<button id="rainBtn">Toggle Rain Visibility</button>
<a-scene
tap-place
xrextras-gesture-detector
landing-page
xrextras-loading
xrextras-runtime-error
renderer="colorManagement:true; webgl2: true;"
xrweb="allowedDevices: any">
<!-- Assets -->
<a-assets>
<a-asset-item id="raccoonasset" src="assets/raccoon5.glb"></a-asset-item>
<a-asset-item id="emperorasset" src="assets/emperor3.glb"></a-asset-item>
<a-asset-item id="heartasset" src="assets/pixel-heart1.glb"></a-asset-item>
<a-asset-item id="rainasset" src="assets/rain.glb"></a-asset-item>
</a-assets>
<!-- Lights and Camera -->
<a-entity light="type: directional; castShadow: true; color: white; intensity: 0.5;" position="5 10 7"></a-entity>
<a-light type="ambient" intensity="0.7"></a-light>
<a-camera position="0 2 2" raycaster="objects: .cantap" cursor="fuse: false; rayOrigin: mouse;"></a-camera>
<xrextras-named-image-target name="model-target">
<a-entity
id="raccoon-glb-target"
gltf-model="#raccoonasset"
scale="0.2 0.2 0.2"
position="0 -0.35 0"
animation-mixer="timeScale: 1"
></a-entity>
</xrextras-named-image-target>
<xrextras-named-image-target name="emperor-target">
<a-entity
id="emperor-glb-target"
gltf-model="#emperorasset"
scale="0.9 0.9 0.9"
animation-mixer="timeScale: 1"
></a-entity>
</xrextras-named-image-target>
<xrextras-named-image-target name="heart-target">
<a-entity
id="heart-glb-target"
gltf-model="#heartasset"
scale="0.5 0.5 0.5"
animation-mixer="timeScale: 0"
animation__spin="property: rotation; dur: 5000; easing: linear; loop: true; to: 0 360 0"
animation__move-up-down="property: position; dur: 3000; easing: easeInOutQuad; loop: true; to: 0 1 0"
></a-entity>
</xrextras-named-image-target>
<!-- Rain model -->
<a-entity
id="rain-glb-target"
gltf-model="#rainasset"
scale="2 2 2"
position="0 0.8 0"
animation-mixer
visible="false">
</a-entity>
</a-scene>
in the app.js
// Copyright (c) 2022 8th Wall, Inc.
//
// app.js is the main entry point for your 8th Wall app. Code here will execute after head.html
// is loaded, and before body.html is loaded.
import './main.css'
// app.js
import {onClickRainButton} from './rain-button'
AFRAME.registerComponent('rain-button', {
init() {
console.log('Rain button component initialized.')
const rainBtn = document.getElementById('rainBtn')
if (rainBtn) {
rainBtn.addEventListener('click', onClickRainButton)
console.log('Event listener registered for rain button.')
} else {
console.error('Rain button element not found.')
}
},
})
and in the rain-button.js
// rain-button.js
// Function to handle click event on the rain button
function onClickRainButton() {
console.log('Rain button clicked.');
// Get the rain entity
const rainEntity = document.querySelector('#rain-glb-target')
// Check if the rain entity exists and toggle its visibility
if (rainEntity) {
const isVisible = rainEntity.getAttribute('visible')
rainEntity.setAttribute('visible', !isVisible)
}
}
export {onClickRainButton}
I hope i don't burn anyone's eyes and I appreciate any help.
I tried a couple of different ways to write this and I tried just adding a simple url link to my button, I tried using just a tap on screen but nothing works, so I think it's a larger problem that I am not seeing.