Video Thumbnail

Sign up for a plan to instantly unlock all premium lessons.

UNLOCK LESSON

Premium Features

Download Video

Mobile Event Listeners

Previously, we resized our scene to fit the smaller screen proportions associated with phones and tablets. However, you may have noticed, when testing on an actual mobile device, the globe doesn't spin like it does on desktop.

In this video, we'll cover how to add mobile event listeners to our project so we can reobtain the spin effect on mobile.

The step-by-step process will be:

  • Add event listeners

  • Swap out clientX and clientY

  • Test if raycaster intersects with sphere

  • If length is greater than 0, set mouse.down to true

  • Set passive: false if needed

  • If mouse.down, prevent default and spin

  • Test on a mobile phone

Comments

Want to participate?

Create a free Chris Courses account to begin

Login
b
bunnynomics posted 3 years ago

Like the poster said below: The touch locations are non-responsive or way off which makes navigation hard. Try it on mobile. Someone have input to this?

0
a
absurd posted 4 years ago

On mobile the population touch locations are way off. Any ideas how to correct this? I even tried to import your code but it still isn't correct.

0
b
bigd posted 4 years ago

Hi Chris, when is the arcs animation part coming? That one is the most exciting parts of the Github globe.

1
chris posted 4 years ago

Hey bigd, let me see what I can get rolling for that. Thankfully this is a bit easier to implement in my opinion, hardest part would be getting the arcs to travel to the right locations.

Thinking should be here this week 馃檶

4
j
jeantimex posted 2 years ago

Hi Chris, I am eagerly waiting for the arcs animation part out! :D

0

Providing the lift to launch your development career

漏 2026 Chris Courses. All rights reserved.