ThreeJS - Basic Test

by Bintang Anandhiya

HTML

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

CSS

html {
  width: 100%;
  height: 100%;
}

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

canvas {
  width: 100%;
  height: 100%;
  float: left;
}

JavaScript

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

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

camera.position.z = 50;

//Cube
var geometry = new THREE.BoxGeometry( 5, 5, 5 );

for ( var i = 0; i < geometry.faces.length; i += 2 ) {
		var color = Math.random() * 0xffffff;
    geometry.faces[ i ].color.setHex( color );
    geometry.faces[ i+1 ].color.setHex( color );
}
var material = new THREE.MeshBasicMaterial( {vertexColors: THREE.FaceColors } );

var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

//Main Loop
var vel = 0.20;
function render(){
	requestAnimationFrame(render);
  renderer.render(scene, camera);
  cube.position.x += vel;
  if(cube.position.x > 0){
  	vel -= 0.0015
  }else{
  	vel += 0.0015
  }
  cube.rotation.y += vel;
}
render();