Video Thumbnail

Unlock this lesson

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

Unlock Lesson

Premium Features

Video unavailable for download

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

b
bunnynomics posted 4 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?

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.

b
bigd posted 5 years ago

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

chris's profile photo
chris posted 5 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 🙌

j
jeantimex posted 3 years ago

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