Use OrbitControls to Interact with your TresJS Scene

Alvaro Saburido
InstructorAlvaro Saburido
Share this video with your friends

Social Share Links

Send Tweet

In this TresJS lesson you will learn how to use OrbitControls from the @tresjs/cientos package to add interactivity to your scenes by:

  • Importing OrbitControls
  • Adding it below your TresPerspectiveCamera component

The @tresjs/cientos package is part of the TresJS ecosystem and provides useful abstractions and composables to extend the core framework.

[00:00] Let's add a little bit of interaction to our scene. Because right now, if we click and we try to move around the 3 d scene, we are not able. Because right now, it's only a render. So to do this, we're gonna import something that is called orbit controls. But we're gonna import it from a different [00:20] package, which is called Tres EScientos. This package is part of the ecosystem, and it gives a lot of abstraction and compostables that you can extend the developer experience and the functionality of the core. So it comes from the word, which it means 100 in English. [00:40] K? And the idea is that it covers a lot of different abstractions, like, for example, text 3 d. We have fill FBO or frame buffer object, and we have the orbit controls right here. So different from what we have right now that we are using components [01:00] that has the trace prefix. Everything that you, get from the Tresia sientos and another packages of the ecosystem, it doesn't have the prefix. K? So the way we're gonna use it is just below the TRES spectate camera, we are gonna add orbit controls. [01:20] If we hit save, now we can move around by clicking and zoom in, zoom out from the scene by using the orbit controls. The orbit controls is just an abstraction that modifies how the camera is handled and add these event listeners so you can [01:40] navigate through.