Creating the Scene

Three.js is a popular JavaScript library used to create 3D graphics on the web. In Three.js, "Scene" is an essential element. Think of it as a container where objects, lights, and cameras are placed and managed. This chapter is dedicated to explaining how to create a scene in Three.js and add objects to it. We will illustrate this using a movie theme, by creating a scenario as though we are setting up a movie set with different elements − characters, lights, and cameras.

Let's get started by introducing you to the basics.

The Scene

In terms of the Three.js world, a scene is a stage where everything happens. On this stage, we can place objects, lights, and cameras. Each of these elements has its own properties, methods, and features that can be controlled individually.

Here's how to create a blank canvas:

var scene = new THREE.Scene();

This line of code creates a new THREE.Scene object. When the scene is initialized, it is empty. There's no objects, lights or cameras.

Adding a Cube (Object)

In our script, we want to add a simple object: a cube. A cube is a Three-dimensional figure with six equal square faces. This cube will represent a character in our movie. Let's name it "MartyCube", named after Marty McFly from the classic 'Back to the Future' movie series.

Before we add the cube to the scene, we need to define it first. Three.js uses geometric meshes to create complex 3D content. In the simplest form, a cube is a mesh with a BoxGeometry (the shape of the object) and a MeshBasicMaterial (defines the color or image apply to the surface of the object).

var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var MartyCube = new THREE.Mesh(geometry, material);

We've just created the cube called "MartyCube". Currently, the cube exists, but it is not part of the scene yet.

scene.add(MartyCube);

By using scene.add(), we have added "MartyCube" to our scene.

Adding Lights

Next, let's add some lights to our scene to make "MartyCube" visible. Without lights, even though the objects are part of the scene, they cannot be seen. For our movie scene, we are adding a PointLight named "Spotlight".

A PointLight is placed at a single point in space and emits light in all directions evenly. Similar to other objects in Three.js, before we can add the light to the scene, we need to define it.

var Spotlight = new THREE.PointLight(0xFFFF00); // Spotlight is yellow 
Spotlight.position.set(10, 20, 20); 

Here, a PointLight is created with a yellow color, and positioned at (10, 20, 20).

scene.add(Spotlight);

By using scene.add(), the "Spotlight" is now part of the scene.

Adding a Camera

A scene in Three.js is not complete without a camera. The camera defines the point of view from which the scene will be seen. Let's add a "DirectorCam" to our scene, representing the director's perspective on this movie scene.

var DirectorCam = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
DirectorCam.position.z = 5;

We've created a PerspectiveCamera, which mimics the way human eyes see. It takes four arguments:

1. FOV — the extent of the scene that is seen on the display at any given moment.
2. Aspect — the aspect ratio is the width of the element divided by the height. window.innerWidth/window.innerHeight ensures we’re using the whole screen.
3. Near clip — anything closer than the near clipping length will not be rendered.
4. Far clip — anything further away from the far clipping length will not be rendered.

scene.add(DirectorCam);

Now we have set a stage (Scene) for our movie with a central character ("MartyCube"), illuminated by a light source ("Spotlight"), and visualized through a perspective ("DirectorCam").

In conclusion, Three.js provides a powerful and flexible framework for creating 3D objects in a web-sensitive context. The Scene, as we have seen, is a pivotal component where all elements of the 3D universe reside, interact, and amaze the audience. Following through the examples with references to movie features and characters, you should now have a more vivid understanding of how the Scene in Three.js operates. Happy coding!