Recently, I was looking at the threejs development guide and summed up the 8 steps to make the most basic 3d scene:
1. Set the scene size
2. Create the WebGl renderer
3. Specify the root node element
4. Initialize the scene
5. Add the camera to the scene
6. Create objects into the scene
7. Add light sources to the scene
8. Rendering
The code is given below:
1. Set the scene size
var WIDTH = 400, HEIGHT = 300;
2. Create the WebGl renderer
var renderer = new THREE.WebGLRenderer ({
antialias:true //Antialiasing
});
renderer.setClearColor(0xFFFFFF, 1.0);//Set canvas background color
renderer.setSize(WIDTH, HEIGHT); // start the renderer
3. Specify the root node element
var $container = $('#container');
$container.append(renderer.domElement);
4. Initialize the scene
var scene = new THREE.Scene();
5. Add the camera to the scene
// set camera properties
var VIEW_ANGLE = 45, ASPECT = WIDTH / HEIGHT, NEAR = 0.1, FAR = 10000;
var camera = new THREE.PerspectiveCamera(VIEW_ANGLE ,ASPECT ,NEAR ,FAR );
scene.add(camera);
camera.position.z = 300;
6. Create objects into the scene
// set sphere parameters
var radius = 50,segments = 16,rings = 16;
//sphere material
var sphereMaterial =
new THREE.MeshLambertMaterial({ color: 0xCC0000 });
// create sphere
var geometry = new THREE.SphereGeometry( radius, segments, rings);
var sphere = new THREE.Mesh(geometry , sphereMaterial);
scene.add(sphere);
7. Add light sources to the scene
var light = new THREE.DirectionalLight(0xffffff, 1.0, 0);//Set the parallel light source
light.position.set( 200, 200, 200 );//Set the light source vector
scene.add(light);// Add light source to the scene
8. Rendering
renderer.render(scene, camera);