Three.js simple rotating cube tutorial

by navinleon

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.js"></script>

CSS

body { margin: 0; } 
canvas { width: 100%; height: 100% }

JavaScript

var scene = new THREE.Scene(); 
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); 

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

//var geometry = new THREE.BoxGeometry( 1, 1, 1 ); 
		 var geometry=new THREE.SphereGeometry(0.4, 100, 100);
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); 
var cube = new THREE.Mesh( geometry, material ); 

/*var spotLight = new THREE.SpotLight( 0xffffff ); 
spotLight.position.set( 100, 1000, 100 ); 
spotLight.castShadow = true; 
spotLight.shadowMapWidth = 1024; 
spotLight.shadowMapHeight = 1024; 
spotLight.shadowCameraNear = 500; 
spotLight.shadowCameraFar = 4000; 
spotLight.shadowCameraFov = 30; 

scene.add( spotLight );*/
scene.add( cube ); 
camera.position.z = 5;

function render() { 
    requestAnimationFrame( render ); 
    
    cube.rotation.x += 0.05; 
    cube.rotation.y += 0.05;
    
    renderer.render( scene, camera ); 
} 

render();