I've created a globe on three js and would appreciate some input to why my globe is unresponsive on mobile. On desktop the globe works perfectly with a "drag-to-rotate" function. However, on mobile the globe seems to be stuck or moves in weird positions.
Mobile part on main.js:
addEventListener('touchmove', (event) => {
event.clientX = event.touches[0].clientX
event.clientY = event.touches[0].clientY
const doesIntersect = raycaster.intersectObject(sphere)
if (doesIntersect.length > 0) mouse.down = true
if (mouse.down) {
const offset = canvasContainer.getBoundingClientRect().top
mouse.x = (event.clientX / innerWidth)
* 2 - 1
mouse.y = -((event.clientY - offset)/ innerHeight)
* 2 + 1
gsap.set(popUpEl, {
x: event.clientX,
y: event.clientY
})
event.preventDefault()
const deltaX = event.clientX - mouse.xPrev
const deltaY = event.clientY - mouse.yPrev
group.rotation.offset.x += deltaY * 0.005
group.rotation.offset.y += deltaX * 0.005
gsap.to(group.rotation, {
y: group.rotation.offset.y,
x: group.rotation.offset.x,
duration: 2
})
mouse.xPrev = event.clientX
mouse.yPrev = event.clientY
}
},
{ passive: false}
)
addEventListener('touchend', (event) => {
mouse.down = false
})
html on canvas:
<body>
<div id="popUpEl" class ="bg-black bg-opacity-75 fixed px-3 py-2 rounded-lg">
<h2 class ="text-white text-xs">
<span id= "populationEl"></span>
<span>Impact</span>
</h2>
<p id="populationValueEl" class = "text-white font-bold text-lg">300mil</p>
</div>
<div class="flex flex-col h-screen" id="canvasContainer">
<canvas></canvas>
</div>
<script type="module" src="/main.js"></script>
I suspect the touch move event to be off but I'm open to suggestions.