basic three.js scene

basic-scene.js

window.onload = function(){
  var camera, controls, scene, renderer, light, material;

  init();
  animate();

  function init(){
    var container = document.getElementById('container');

    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 2000);
    camera.position.z = 100;

    scene = new THREE.Scene();

    controls = new THREE.OrbitControls(camera);
    controls.minDistance = 30;
    controls.maxDistance = 100;
    controls.addEventListener('change', render);

    light = new THREE.PointLight(0xffffff);
    light.position.copy(camera.position);
    scene.add(camera);
    camera.add(light);

    renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
    renderer.setClearColor(0x000000, 0);
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(container.offsetWidth, container.offsetHeight);
    container.appendChild(renderer.domElement);

    window.addEventListener('resize', onWindowResize, false);
  }

  function onWindowResize(){
    camera.aspect = window.innerwidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(container.offsetWidth, container.offsetHeight);
  }

  function animate(){
    requestAnimationFrame(animate);
    controls.update();
  }

  function render(){
    camera.lookAt(scene.position);
    renderer.render(scene, camera);
  }
}