There is one more level of interactivity that you will add to the scene and that is using orbit controls for the camera. Orbit controls allow you to rotate the camera around the scene origin by just dragging the mouse on the screen. You just need to instantiate orbit controls and then call the update method on the orbit camera to ensure it is working properly.
- [Instructor] There is one more level of interactivity…that we will add to our scene,…and that's using orbit controls for the camera.…'Orbit controls' is a script that you can find…inside the examples folder of three.js.…It allows us to rotate the camera around the scene…by just dragging our mouse on the screen.…It will let us see what's going on much better…by allowing for interactive camera movement.…I have already downloaded orbit controls,…and it's also included in the left folder…of the project files.…If you have been following along,…you can copy and paste…or enter this line…into your HTML file to be able…to start using orbit controls.…
Initiating orbit controls is very easy.…You just need to instantiate the orbit control…with the camera and the renderer domElement.…So after camera and the renderer is declared,…we can find a line here…and create variable called 'controls'…and instantiate the orbit controls…using the camera and the renderer domElement as arguments.…You will be passing this controls…inside the update function…
- Building a simple scene
- Creating three.js 3D objects
- Adding light and shadows
- Animating with Tween.js
- Working with materials and textures
- Editing and importing geometries
- Creating a particle system
- Post-processing with effects and shaders
Skill Level Intermediate
Flash Professional: HTML5 Canvas and WebGLwith Joseph Labrecque1h 36m Intermediate
HTML5: Graphics and Animation with Canvaswith Joe Marini3h 7m Intermediate
1. Building a Simple Scene
2. Three.js Scene Object
5. Materials and Textures
Next steps1m 53s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.