<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();
});
*/
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.