I’ve been working on a project where I’m using THREE Raycast, but I haven’t been able to get the desired results on my device. It works perfectly in the simulator, but once I test it on a physical device, it doesn’t behave as expected.
I’ve also tried cloning the world effect project and made some modifications, but the issue persists. Despite my efforts, I’m not able to solve it. Below is the code I’ve been working with. Would it be possible for you to recreate this and test it on your device? It would be a huge help if you could let me know if it works for you or if you have any suggestions to fix the issue.
Thanks so much in advance for your assistance!
camera setup
a-camera position=“0 8 8”
raycaster=“objects: .clickable, .cantap;
interval: 100; far: 20”
cursor=“fuse: false;
rayOrigin: mouse”>
entity code
<a-entity id="earth"
gltf-model="#earthModel"
scale="2 2 2"
position="0 0 0"
class="cantap"
visible="true"
shadow="receive: true; cast: false"
xrextras-two-finger-rotate
xrextras-pinch-scale></a-entity>
<!-- Country Group (Initially Hidden) -->
<a-entity id="country"
scale="0 0 0"
position="0 0 0"
visible="false"
xrextras-two-finger-rotate
xrextras-pinch-scale>
<!-- Country Base -->
<a-entity gltf-model="#countryModel"></a-entity>
<!-- Hotels -->
<a-entity id="hotel1"
gltf-model="#hotelModel"
position="-1 0 0"
class="cantap hotel"></a-entity>
<a-entity id="hotel2"
gltf-model="#hotelModel"
position="1 0 0"
class="cantap hotel"></a-entity>
<a-entity id="hotel3"
gltf-model="#hotelModel"
position="2 0 0"
class="cantap hotel"></a-entity>
<a-entity id="hotel4"
gltf-model="#hotelModel"
position="3 0 0"
class="cantap hotel"></a-entity>
<!-- Pins -->
<a-entity id="pin1"
gltf-model="#pinModel"
position="-1 1 0"
class="cantap pin"></a-entity>
<a-entity id="pin2"
gltf-model="#pinModel"
position="1 1 0"
class="cantap pin"></a-entity>
<a-entity id="pin3"
gltf-model="#pinModel"
position="2 1 0"
class="cantap pin"></a-entity>
<a-entity id="pin4"
gltf-model="#pinModel"
position="3 1 0"
class="cantap pin"></a-entity>
</a-entity>
<!-- 360 Photosphere (Initially Hidden) -->
<a-sphere id="sphere"
radius="200"
position="0 0 0"
visible="false"
shader="flat"
side="double"></a-sphere>
and this is my whole js setup
window.onload = function handleWindowLoad() {
let currentState = ‘earth’
const earth = document.querySelector(‘#earth’)
const country = document.querySelector(‘#country’)
const sphere = document.querySelector(‘#sphere’)
const backButton = document.querySelector(‘#backButton’)
const hotelURLs = [
‘https://rb.gy/iq93nb’,
‘https://rb.gy/6qx7ta’,
‘https://rb.gy/x5x736’,
‘https://rb.gy/ion32w’,
]
const pinTextures = [
‘#360image1’,
‘#360image2’,
‘#360image3’,
]
// Fade out Earth and show Country
const handleEarthClick = () => {
if (currentState === ‘earth’) {
earth.setAttribute(‘visible’, ‘false’)
country.setAttribute(‘visible’, ‘true’)
country.setAttribute(‘scale’, ‘2 2 2’)
currentState = ‘country’
}
}
earth.addEventListener(‘click’, handleEarthClick)
earth.addEventListener(‘touchstart’, handleEarthClick) // Handle touch
// Click on Hotels (Redirect to URLs)
document.querySelectorAll(‘.hotel’).forEach((hotel, i) => {
const handleHotelClick = () => {
window.location.href = hotelURLs[i]
}
hotel.addEventListener(‘click’, handleHotelClick)
hotel.addEventListener(‘touchstart’, handleHotelClick) // Handle touch
})
// Click on Pins (Show 360 Sphere)
document.querySelectorAll(‘.pin’).forEach((pin, i) => {
const handlePinClick = () => {
country.setAttribute(‘visible’, ‘false’)
sphere.setAttribute(‘visible’, ‘true’)
sphere.setAttribute(‘src’, pinTextures[i])
currentState = ‘sphere’
}
pin.addEventListener(‘click’, handlePinClick)
pin.addEventListener(‘touchstart’, handlePinClick) // Handle touch
})
// Back Button Logic
const handleBackButton = () => {
if (currentState === ‘sphere’) {
sphere.setAttribute(‘visible’, ‘false’)
country.setAttribute(‘visible’, ‘true’)
currentState = ‘country’
} else if (currentState === ‘country’) {
country.setAttribute(‘visible’, ‘false’)
earth.setAttribute(‘visible’, ‘true’)
currentState = ‘earth’
}
}
backButton.addEventListener(‘click’, handleBackButton)
backButton.addEventListener(‘touchstart’, handleBackButton) // Handle touch
}