<html>
	<head>
		<title>Three.js app</title>
	</head>
	<body>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
	</body>
</html>
body { margin: 0; }
canvas { width: 100%; height: 100% }
var SCREEN_WIDTH = 1000;
var SCREEN_HEIGHT = 600;

//renderer
var renderer = new THREE.WebGLRenderer();
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
document.body.appendChild( renderer.domElement );

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

//camera
var camera = new THREE.PerspectiveCamera( 45, SCREEN_WIDTH/SCREEN_HEIGHT, 1, 1000 );
var vFOV = camera.fov * (Math.PI / 180);
camera.position.z = SCREEN_HEIGHT / (2 * Math.tan(vFOV / 2) );

//plane
var geometry = new THREE.PlaneGeometry(100, 100, 2, 2 );
var material = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.FrontSide} );
var material2 = new THREE.MeshBasicMaterial( {color: 0xff0000, side: THREE.BackSide} );
var plane = new THREE.Mesh( geometry, material );
var plane2 = new THREE.Mesh( geometry, material2 );
scene.add( plane );
plane.add(plane2);

function render() {
 requestAnimationFrame( render );
 plane.rotation.y += 0.1;
	 renderer.render( scene, camera );
}

render();
/*
window.addEventListener('resize', function() {
      var WIDTH = window.innerWidth,
          HEIGHT = window.innerHeight;
      renderer.setSize(WIDTH, HEIGHT);
      camera.aspect = WIDTH / HEIGHT;
  
      var vFOV = camera.fov * (Math.PI / 180) // convert VERTICAL fov to radians
      camera.position.z = window.innerHeight / (2 * Math.tan(vFOV / 2) );
  
      camera.updateProjectionMatrix();

    });
*/

Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.