Working with Scenes in three.js
A Scene in three.js is a constructor that can be used to create an instance of Scene that can be used to place everything that makes up an environment in a three.js project. It can contain cameras, lights, and of course objects composed of a geometry and material.
In this post I will be covering Scenes in a bit of detail as I continue to expand, and improve my content on three.js
What to know
This is an advanced post on three.js that covers just one little constructor known as THREE.Scene. If you are new to three.js you might want to start with my getting started post on three.js. If you are new to javaScript in general that is outside the scope of this whole collection of posts on three.js.
Basic example of THREE.Scene
At a minimum you will want to have at least some kind of object to look at added to a Scene. This could just be a mesh that used a geometry from one of the built in geometry constructors in three.js such as THREE.BoxGeometry with no material given to it.
Unless I aim to do something headless with a scene and one or more objects, I will also want a camera and a renderer to look at what it is that I am doing.
So a basic example of THREE.Scene might look something like this:
|
|
By default a Mesh will use the Basic material with a random color used to paint the faces of the geometry. Of course I could create an instance of some other material, or give a color or texture to another instance of basic material that I would then give as the second argument to the Mesh constructor, but this is a post on THREE.Scene so I will not be getting into that in depth. However I will be getting into the properties of THREE.Scene including the material override property, more on that later.
Fog
my full post on fog
A property of interest in a scene instance is the fog Property which can be used to add a fog effect to a scene.
|
|
There are two kinds of fog that can be added to a scene in three.js which are Fog, and FogExp2. The regular Fog constructor will add a fog that works in a linear way, while the FogExp2 constructor works in an exponential way. Check out my full post on fog for more on this.
Changing the background of the Scene with Scene.background
It goes without saying that an important part of the scene instance is the background property. By default it is a solid black color, but it can be set to another solid color using THREE.Color.
|
|
If you want to use a texture, or a cube texture that can be used as well. I have written a post on how to used a cube texture in which I get into how to go about doing just that in detail.
Using Scene.overrideMaterial to add a material that overrides all materials
There is the scene override property of a scene that will do exactly as you would expect, override all materials used in the scene with the material given to the material override property of the scene instance.
|
|
In the above demo I created a simple scene with a few instances of Mesh that each use a different material and or settings for the material. By setting an instance of THREE.MeshDepthMaterial as the value of Scene.overrideMaterial, all the other materials are ignored and the depth material is just used for everything.
This can be useful if you want to have a feature that allows for doing something like setting everything in the scene to wire frame mode.
|
|
Using Object3D methods in scene
read my full post on Object3D
Like a lot of things in three.js the Scene Class inherits from Object3D. This gives THREE.Scene properties and methods like Object3D.position, Object3D.rotation and Object3D.add.
So if I play with the instance of Vector3 that is stored in the position property of my scene instance this will change the position of the whole Scene, and everything in it.
|
|