To have your three.js scene rendering at all times, you need to make use of the requestAnimationFrame() function. requestAnimationFrame() is a method on the window object. It is similar to the setInterval in a sense that it periodically calls the given function. But it also performs certain performance optimizations regarding when a frame gets painted, which makes it preferable to use this function over the setInterval() function when working with animations. Not updating object properties inside the console should actually update the scene as well.
- [Instructor] We are going to be creating…a function called update, that will handle…the rendering of the scene, using…the request animation frame function…that I mentioned in the earlier video.…So, let's create a function called update.…That is going to work with three arguments,…the rendering, the scene, and the camera.…And, moving on, we will be doing…our renderings through this update function,…so instead of calling renderer render method here,…I'm going to be calling the update function,…the same arguments, plus the renderer objects.…
So now, inside the update function,…I will be calling the renderer render methods,…using the scene and the camera as arguments,…and I will also make use of the…request animation frame function,…which is going to get a callback,…and in side this callback, we are going…to be calling the update function in the recursive manner,…using the same arguments.…
Request animation frame is a method on the window object.…It's similar to the set interval in a sense…that it periodically calls the given 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.