Three.js BASE

by jeum

HTML

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

CSS

body {
  padding:0;
	margin:0;
	overflow:hidden;
}

JavaScript

var camera, scene, renderer;
//var cameraOrtho, sceneOrtho;

init();

animate();

function init() {

  var width = window.innerWidth;
  var height = window.innerHeight;

  camera = new THREE.PerspectiveCamera( 60, width / height, 1, 2100 );
  camera.position.z = 1500;

  //cameraOrtho = new THREE.OrthographicCamera( - width / 2, width / 2, height / 2, - height / 2, 1, 10 );
  //cameraOrtho.position.z = 10;

  scene = new THREE.Scene();
  scene.fog = new THREE.Fog( 0x000000, 1500, 2100 );

  sceneOrtho = new THREE.Scene();

  // renderer
  renderer = new THREE.WebGLRenderer();
  renderer.setPixelRatio( window.devicePixelRatio );
  renderer.setSize( window.innerWidth, window.innerHeight );
  renderer.autoClear = false; // To allow render overlay on top of sprited sphere

  document.body.appendChild( renderer.domElement );

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

function onWindowResize() {

  var width = window.innerWidth;
  var height = window.innerHeight;

  camera.aspect = width / height;
  camera.updateProjectionMatrix();

  //cameraOrtho.left = - width / 2;
  //cameraOrtho.right = width / 2;
  //cameraOrtho.top = height / 2;
  //cameraOrtho.bottom = - height / 2;
  //cameraOrtho.updateProjectionMatrix();

  // autre update possible

  renderer.setSize( window.innerWidth, window.innerHeight );
}

function animate() {
  requestAnimationFrame( animate );
  render();
}

function render() {
  renderer.clear();
  renderer.render( scene, camera );
  renderer.clearDepth();
  //renderer.render( sceneOrtho, cameraOrtho );
}