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
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.
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.
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.
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.
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.