I have looked and looked all over the projects. is there a way to create a hotspot or button or even a trigger off a .glb asset to go to a website? I would like to trigger off my skulls to the shopify site to buy them.
Thanks for all that you do!!!
Ang
Still trying to get this to work before I release the AR to the public.
So I found the ability to capture the image looking for a button to click and have added that to one of my skullâs AR hereâŚ
And capture works great which is a fun addition, but you can see I added a simple button - buy it, but I cannot get it to link to this - https://bit.ly/skullsculpts
I think I added all of the code correctly and this is in the app.js
import â./main.cssâ
AFRAME.registerComponent(âbuttonâ, {
init() {
const btn = document.getElementById(âmyButtonâ)
btn.addEventListener(âclickâ, () => {
window.open(âhttps://bit.ly/skullsculptsâ, â_blankâ)
})
},
})
What the heck am I doing wrong here?
Also, I have 12 skulls that once I get this working would like to add this functionality to⌠is there an easy way to do that other than manually copy paste into each skull code?
Thanks,
Angie
Are you testing this on a mobile device? Or the simulator?
I got this working
const buttonBehaviorComponent = {
init() {
const btn = document.getElementById('btn')
const handleClick = () => {
console.log('click')
window.open('https://www.8thwall.com', '_blank')
}
btn.addEventListener('click', handleClick)
},
}
export {buttonBehaviorComponent}
Just a simple added line from our simple button sample project here:
OMG I love you. You are hired! I could not figure out that one line!!!
If I want to make a second button, can I do this?
const buttonBehaviorComponent = {
init() {
const btn = document.getElementById(âbtn2â)
const handleClick = () => {
console.log('click')
window.open('https://www.stixandjones.com', '_blank')
}
btn.addEventListener('click', handleClick)
},
}
export {buttonBehaviorComponent}
hmm that is not workingâŚ
I keep trying and I know I am close but this now clicks only the second button
How do I get two buttons in there?
//button01
const buttonBehaviorComponent = {
init() {
const btn = document.getElementById(âbtnâ)
const handleClick = () => {
console.log('click')
window.open('https://stixandjones.myshopify.com/products/hot-pink-afterlife-skull', '_blank')
}
btn.addEventListener('click', handleClick)
},
//button02
init() {
const btn = document.getElementById(âbtn2â)
const handleClick = () => {
console.log('click')
window.open('https://stixandjones.com', '_blank')
}
btn.addEventListener('click', handleClick)
},
}
export {buttonBehaviorComponent}
How many buttons do you want? If it is just two, you can create two seperate components.
So button-behavior.js
const buttonBehaviorComponent = {
init() {
const btn = document.getElementById('btn')
const handleClick = () => {
console.log('click')
window.open('https://www.8thwall.com', '_blank')
}
btn.addEventListener('click', handleClick)
},
}
export {buttonBehaviorComponent}
Then button-behavior2.js
const buttonBehaviorComponent2 = {
init() {
const btn2 = document.getElementById('btn2')
const handleClick = () => {
console.log('click')
window.open('https://www.8thwall.com/projects', '_blank')
}
btn2.addEventListener('click', handleClick)
},
}
export {buttonBehaviorComponent2}
Then register these both in app.js
import {buttonBehaviorComponent} from './button-behavior'
AFRAME.registerComponent('button-behavior', buttonBehaviorComponent)
import {buttonBehaviorComponent2} from './button-behavior2'
AFRAME.registerComponent('button-behavior2', buttonBehaviorComponent2)
Then make sure add the components into your scene
<a-scene
landing-page
xrextras-loading
xrextras-runtime-error
xrextras-gesture-detector
xrweb="allowedDevices: any"
button-behavior
button-behavior2>
this is the ascene
<a-scene
splash-image
xrextras-gesture-detector
landing-page
xrextras-loading
xrextras-runtime-error
custom-capture-btn
xrextras-tap-recenter
renderer=âcolorManagement: trueâ
xrweb=âallowedDevices: anyâ
button-behavior
button-behavior2
OK after testing I got everything to work except the second button urlâŚ
I land/pub it so you can see
These are my two buttons in the body
buy it!
website
I have this in the a scene
button-behavior
button-behavior2>
and these in app.js
import {buttonBehaviorComponent} from â./button-behaviorâ
AFRAME.registerComponent(âbutton-behaviorâ, buttonBehaviorComponent)
import {buttonBehaviorComponent2} from â./button-behavior2â
AFRAME.registerComponent(âbutton-behavior2â, buttonBehaviorComponent2)
OMG I fixed it!!!
The const needed a â2â for the doc btn!!!
const buttonBehaviorComponent2 = {
init() {
const btn2 = document.getElementById(âbtn2â) <----------------------
const handleClick = () => {
console.log('click')
window.open('https://www.8thwall.com/projects', '_blank')
}
btn2.addEventListener('click', handleClick)
},
}
export {buttonBehaviorComponent2}
THANK YOU IAN!!!
Unsure if I should post this here since there is history but one more questionâŚ
When you go to any of my skull projects on 8th wall like this pink skull -
stixandjones.8thwall.app/afterlife-p/
And you use your finger to drag or scale the skullsâŚ
- the start to pop on and off
- their eyes start to glow a different color if you go off screen and then look at them again (kind of kewl, but not on purpose)
- the shadows seem wrong too
Is the code for the button colors or highlight interfering with the gesture?
Thanks again for always helping,
Ang
please ask any new questions on a new post.
helloďźI use the hotspot button in VPS template project, then there is a bug show that â {getPositionInfo: [Function: function(t){var n=t.href,o=function(e){var t=document.querySelectorAll(âiframeâ),n=e.replace(/^https?:/,ââ);return Array.from(t).filter((function(t){var o=t.getAttribute(âsrcâ);return[e,n].includes(o)}))[0]}(n),r=o&&o.getBoundingClientRect();e.requestSubFrame(n,{api:âsetPositionInfoâ,payload:{href:n,positionInfo:r}})}]} falseďź may i ask how to Modify the codeďź thanks