naveenrobo/threejs-template.html

## threejs-template.html
<!-- Naveen Sakthivel -->
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style>
        body {
            background-color: #ffffff;
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>

<body>

    <script src="./js/three.min.js"></script>
    <script src="./js/Detector.js"></script>
    <script>
        if (!Detector.webgl) Detector.addGetWebGLMessage();

        var camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
        camera.position.z = 500;

        var scene = new THREE.Scene();

        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        window.addEventListener('resize', function () {
            renderer.setSize(window.innerWidth, window.innerHeight);
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
        })

        geometry = new THREE.BoxGeometry(200, 200, 200);
        material = new THREE.MeshBasicMaterial({ color: 0xFFFFFF, wireframe: false });
        mesh = new THREE.Mesh(geometry, material);
        scene.add(mesh);

        //logic
        var update = function () {
            mesh.rotation.x += 0.01;
            mesh.rotation.y += 0.005;
        }

        //draw Scene
        var render = function () {
            renderer.render(scene, camera);
        }

        //update, render, repeat
        var loop = function () {
            requestAnimationFrame(loop);
            update();
            render();
        }

        loop();
    </script>
</body>

</html>
	<!-- Naveen Sakthivel -->
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<style>
	body {
	background-color: #ffffff;
	margin: 0;
	overflow: hidden;
	}
	</style>
	</head>

	<body>

	<script src="./js/three.min.js"></script>
	<script src="./js/Detector.js"></script>
	<script>
	if (!Detector.webgl) Detector.addGetWebGLMessage();

	var camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
	camera.position.z = 500;

	var scene = new THREE.Scene();

	var renderer = new THREE.WebGLRenderer();
	renderer.setSize(window.innerWidth, window.innerHeight);
	document.body.appendChild(renderer.domElement);

	window.addEventListener('resize', function () {
	renderer.setSize(window.innerWidth, window.innerHeight);
	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();
	})

	geometry = new THREE.BoxGeometry(200, 200, 200);
	material = new THREE.MeshBasicMaterial({ color: 0xFFFFFF, wireframe: false });
	mesh = new THREE.Mesh(geometry, material);
	scene.add(mesh);

	//logic
	var update = function () {
	mesh.rotation.x += 0.01;
	mesh.rotation.y += 0.005;
	}

	//draw Scene
	var render = function () {
	renderer.render(scene, camera);
	}

	//update, render, repeat
	var loop = function () {
	requestAnimationFrame(loop);
	update();
	render();
	}

	loop();
	</script>
	</body>

	</html>