Basic ThreeJS Scene (R77)

by Nicolas Buecher

HTML

<script src="https://rawgit.com/mrdoob/three.js/master/build/three.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>

CSS

html, body
{
    margin: 0;
    padding: 0;
}

canvas {
  display: block;
}

JavaScript

// Basic ThreeJS Scene

var container, renderer, scene, camera, controls, plane;

init();


////////// CUSTOM //////////

// Add lights
var ambientLight = new THREE.AmbientLight(0xffffff);
scene.add(ambientLight);
var directionalLight = new THREE.DirectionalLight(0xffffff, 1.0);
directionalLight.position.x = 1;
directionalLight.position.y = 1;
directionalLight.position.z = 1;
directionalLight.position.normalize();
scene.add(directionalLight);

scene.add(new THREE.Mesh(new THREE.BoxGeometry(100, 100, 100), new THREE.MeshPhongMaterial()));

//////////  END   //////////


animate();

function init()
{

    // Renderer
    renderer = new THREE.WebGLRenderer({
        antialias: false
    });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor(0xccccff);
    container = document.createElement('div');
    document.body.appendChild(container);
    container.appendChild(renderer.domElement);

    // Scene
    scene = new THREE.Scene();

    // Camera
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.set(0, 200, 800);
    camera.lookAt(scene.position);

    // Controls
    controls = new THREE.OrbitControls(camera, renderer.domElement);

}

function onWindowResize(event)
{
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}

function animate()
{    
    controls.update();
    renderer.render(scene, camera);
    requestAnimationFrame(animate);
}