almarklein/three_cube.html

## three_cube.html
<!DOCTYPE html>
<html lang="en">
<head>
    <title>three.js sandbox</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
<div id='infodiv' style=""></div>
<script src='https://cdn.jsdelivr.net/gh/mrdoob/three.js@dev/build/three.js'></script>
<script >


var renderer = new THREE.WebGLRenderer();
renderer.physicallyCorrectLights = true;
renderer.outputEncoding = THREE.sRGBEncoding;
document.body.appendChild(renderer.domElement);
function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize( window.innerWidth-10, window.innerHeight-40 );
}
window.addEventListener( 'resize', onWindowResize );
window.addEventListener( 'load', onWindowResize );

let info = document.getElementById("infodiv");
info.innerHTML = "THREE r" + THREE.REVISION;

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(70, 16/9, 0.1, 1000);
camera.position.z = 400;

const geometry = new THREE.BoxGeometry( 200, 200, 200 );
const material = new THREE.MeshPhongMaterial( {color:0x082251} );  // #336699 srgb == #082251 physical

let mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

let light1 = new THREE.AmbientLight(0xffffff, 1)
//scene.add(light1);
let light2 = new THREE.DirectionalLight(0xffffff, 1);
light2.position.set(0, 0, 1)
//scene.add(light2);
let light3 = new THREE.SpotLight(0xffffff, 10000, 0);
light3.decay = 2;
light3.position.set(0, 0, 200)
scene.add(light3);

function animate() {
  requestAnimationFrame( animate );
  mesh.rotation.x += 0.005;
  mesh.rotation.y += 0.01;
  renderer.render( scene, camera );
}
animate();


</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>three.js sandbox</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	</head>
	<body>
	<div id='infodiv' style=""></div>
	<script src='https://cdn.jsdelivr.net/gh/mrdoob/three.js@dev/build/three.js'></script>
	<script >



	var renderer = new THREE.WebGLRenderer();
	renderer.physicallyCorrectLights = true;
	renderer.outputEncoding = THREE.sRGBEncoding;
	document.body.appendChild(renderer.domElement);
	function onWindowResize() {
	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();
	renderer.setSize( window.innerWidth-10, window.innerHeight-40 );
	}
	window.addEventListener( 'resize', onWindowResize );
	window.addEventListener( 'load', onWindowResize );

	let info = document.getElementById("infodiv");
	info.innerHTML = "THREE r" + THREE.REVISION;

	var scene = new THREE.Scene();
	var camera = new THREE.PerspectiveCamera(70, 16/9, 0.1, 1000);
	camera.position.z = 400;

	const geometry = new THREE.BoxGeometry( 200, 200, 200 );
	const material = new THREE.MeshPhongMaterial( {color:0x082251} ); // #336699 srgb == #082251 physical

	let mesh = new THREE.Mesh( geometry, material );
	scene.add( mesh );

	let light1 = new THREE.AmbientLight(0xffffff, 1)
	//scene.add(light1);
	let light2 = new THREE.DirectionalLight(0xffffff, 1);
	light2.position.set(0, 0, 1)
	//scene.add(light2);
	let light3 = new THREE.SpotLight(0xffffff, 10000, 0);
	light3.decay = 2;
	light3.position.set(0, 0, 200)
	scene.add(light3);

	function animate() {
	requestAnimationFrame( animate );
	mesh.rotation.x += 0.005;
	mesh.rotation.y += 0.01;
	renderer.render( scene, camera );
	}
	animate();




	</script>
	</body>
	</html>