block by nitaku 427c1ffc346ed9286fda

Three.js animated cube

Full Screen

A simple test of three.js. An animated cube is rendered, and shaded accordingly to a red ambient light and a white point light.

This example is based on the official Three.js tutorial and on a point light example.

index.js

var width = 960;
var height = 500;

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(25, width/height, 0.1, 1000);

var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);

// create the cube
var geometry = new THREE.BoxGeometry(1,1,1);
var material = new THREE.MeshPhongMaterial({
  ambient: 0x555555,
  color: 0x555555,
  specular: 0xffffff,
  shininess: 50,
  shading: THREE.SmoothShading
});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// create lights
scene.add( new THREE.AmbientLight(0xff0040) );

var light = new THREE.PointLight(0xffffff, 6, 40);
light.position.set(20, 20, 20);
scene.add(light);

// set the camera
camera.position.z = 5;

// define an animation loop
var render = function () {
  requestAnimationFrame(render);
  
  // rotate the cube
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  renderer.render(scene, camera);
};

render();

index.html

<!DOCTYPE html>
<html>
	<head>
        <meta charset="utf-8">
        <meta name="description" content="Three.js animated cube" />
        <title>Three.js animated cube</title>
		<link type="text/css" href="index.css" rel="stylesheet"/>
        <script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r67/three.min.js"></script>
	</head>
	<body>
		<script src="index.js"></script>
	</body>
</html>

index.css

canvas {
  width: 960px;
  height: 500px;
}