Quest

Quest 2 – ThreeJS Coordinates and Camera Movement

Join us on Discord
STATUS Past
TOTAL REWARDS
$1,500
REWARD AMOUNT
$2
STARTS (GMT +08:00)
ENDS (GMT +08:00)

Learning Outcomes

By the end of your learning, you will be able to

  • Move a mesh in relation to the camera
  • Listen to Keyboard Key events and change the behaviour of ThreeJS
  • Add a Panoramic Image to the scene
  • Learn about vectors and magnitude and apply it to a 3-Dimensional space

Quest Details

Introduction

The trick to mastering ThreeJS is simple. You need to remember how to position your mesh in relation to your camera angle.

We will learn how to move our camera using our keyboards. This will be a great start to figure out the proper way to angle your camera. In fact, we will also learn on how we can add in a Panoramic Image that was taken from a 360º Camera. With the combination of a moveable camera and a Panoramic Image, we are able to create a “Virtual Tour”-like experience.

Click on this link to see what you can expect to build. You can interact with the page by pressing the following keys on your keyboard: W, A, S, D, Q, E, Left, and Right.

If this sounds interesting to you, get ready and open up your coding workspace as we zoom through the wonders of ThreeJS.

For technical help, be sure to join our StackUp Discord and head to the 🆘｜general-help channel.

Deliverables

This quest has 2 deliverables.

  1. Web Link
  2. Screenshot

This quest is part of a campaign so do check out other quests!

More Quests
Help Center Need help?

Find articles to support you through your journey or chat with our support team.

Help Center