Most objects in three.js are instances of the Object3D base class. This means that they share some common properties with each other. One of those properties is the visible property which controls the visibility of the objects. You can try changing this parameter from the console but you will notice that it doesn't have an effect. The reason for that is the scene is not rendering all the time for this to take an effect after the initial render.
- [Instructor] Most objects in Three.js are instances of the object 3D base class. This means that they share some common properties with each other. Let's return the scene object from our init function call into a global variable called scene. Doing this, you will be able to see the properties of the scene object inside the console of a browser. Now, if you are to type scene inside the console, we can see the properties and metas that are associated with the scene object.
So I'm typing scene and pressing enter, and looking at this object that is being returned, we can see the properties and the metas that are of the scene object. As mentioned earlier, some of these properties are inherited from the object 3D class, so that they are common to other objects as well, such as meshes, lines, et cetera. One of these properties that are common to all these objects is the visible parameter. Visible parameter determines if an object is visible, or not. If you are to set the visibility of the scene to be false, then it means that nothing will be visible on the screen as everything is contained inside the scene object.
Let's try to do that using the console. So getting the scene parameter and setting it to false, we are seeing nothing is really changing in the scene. The reason for this is, currently the 3D scene is being rendered only once, when our script loads, which is before we are doing this change. For every subsequent change to be visible, we need to be rendering the scene at all times. This continuous rendering cycle would allow for animation and interactivity. It's how you get real-time 3D graphics.
Let's set up our scene, so that we are continuously doing renders. For this purpose, we need to use a method on the window object called request animation frame. Let's look at that next.
- 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