Basic THREE.js scene setup

Scenes are used to set up the rendered object using three.js. We can place objects, lights, and cameras. A mesh object is created using geometry and a material. We need a scene, camera, and renderer to display anything with three.js. With a camera, we can render the scene.  

We will assign an object (const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera()), if the geometry class for a rectangular cuboid with a given 'width', 'height', and 'depth'. The cuboid is created centered on the origin, with every edge parallel to one of the axes.  

The scene is a holder for everything that we can be able to see. 

• Initial Setup 
• Create the Scene 
• Create the Camera 
• Create a Visible Object 
• Create the Renderer 
• Render the Scene 

Import Classes from three.js 

• Mesh 
• MeshBasicMaterial 
• PerspectiveCamera 
• Scene 
• WebGLRenderer 

To set the scene's background color, we'll also use the Color class: 

• Color 

Animating the cube- cube.rotation.x += 0.01; 

                    cube.rotation.y += 0.01; 

The object will be run every frame (normally 60 times per second), and it gives a nice rotation animation to the cube. While the app runs, anything you want to move, or change must go through the animate loop.  

Here is an example of how to do a basic Three.js scene setup: