mohhasbias/index.html

## index.html
<!DOCTYPE HTML>
<html lang="en">
	<head>
		<title>three.js canvas - geometry - cube</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
		<style type="text/css">
			body {
				background-color: #f0f0f0;
				margin: 0px;
				overflow: hidden;
			}
		</style>
	</head>
	<body>
    <div id="container-threejs">
    </div>
		<!-- include javascript files -->
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js"></script>

    <script type="text/javascript">
      var scene = new THREE.Scene();
      var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
      camera.position.z = 5;
      var renderer = new THREE.WebGLRenderer();
      renderer.setSize( window.innerWidth, window.innerHeight );
      document.getElementById('container-threejs').appendChild( renderer.domElement );
      var geometry = new THREE.BoxGeometry(2, 2, 2);
      var material = new THREE.MeshBasicMaterial({color: 0x656565});
      var cube = new THREE.Mesh(geometry, material);
      scene.add(cube);
      renderer.render(scene, camera);
      document.getElementById('container-threejs')
        .addEventListener('click', function() {
          console.log('ouch');
          cube.rotation.y += 0.1;
          console.log(cube.geometry);
          renderer.render(scene, camera);
        });
      document.getElementById('container-threejs')
        .addEventListener('contextmenu', function(ev) {
          ev.preventDefault();
          console.log('click kanan');
          camera.position.z++;
          renderer.render(scene, camera);
        });
      document.getElementById('container-threejs')
        .addEventListener('mousemove', function(ev) {
          ev.preventDefault();
          cube.rotation.y += 0.1;
          console.log('mousedown');
          renderer.render(scene, camera);
        });
      var counter = 0;
      function onEnterFrame(){
        counter++;
        console.log(counter);
        cube.rotation.y += 0.1;
        renderer.render(scene, camera);
        requestAnimationFrame(onEnterFrame);
      };
      requestAnimationFrame(onEnterFrame);
    </script>
	</body>
</html>
	<!DOCTYPE HTML>
	<html lang="en">
	<head>
	<title>three.js canvas - geometry - cube</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
	<style type="text/css">
	body {
	background-color: #f0f0f0;
	margin: 0px;
	overflow: hidden;
	}
	</style>
	</head>
	<body>
	<div id="container-threejs">
	</div>
	<!-- include javascript files -->
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js"></script>

	<script type="text/javascript">
	var scene = new THREE.Scene();
	var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
	camera.position.z = 5;
	var renderer = new THREE.WebGLRenderer();
	renderer.setSize( window.innerWidth, window.innerHeight );
	document.getElementById('container-threejs').appendChild( renderer.domElement );
	var geometry = new THREE.BoxGeometry(2, 2, 2);
	var material = new THREE.MeshBasicMaterial({color: 0x656565});
	var cube = new THREE.Mesh(geometry, material);
	scene.add(cube);
	renderer.render(scene, camera);
	document.getElementById('container-threejs')
	.addEventListener('click', function() {
	console.log('ouch');
	cube.rotation.y += 0.1;
	console.log(cube.geometry);
	renderer.render(scene, camera);
	});
	document.getElementById('container-threejs')
	.addEventListener('contextmenu', function(ev) {
	ev.preventDefault();
	console.log('click kanan');
	camera.position.z++;
	renderer.render(scene, camera);
	});
	document.getElementById('container-threejs')
	.addEventListener('mousemove', function(ev) {
	ev.preventDefault();
	cube.rotation.y += 0.1;
	console.log('mousedown');
	renderer.render(scene, camera);
	});
	var counter = 0;
	function onEnterFrame(){
	counter++;
	console.log(counter);
	cube.rotation.y += 0.1;
	renderer.render(scene, camera);
	requestAnimationFrame(onEnterFrame);
	};
	requestAnimationFrame(onEnterFrame);
	</script>
	</body>
	</html>