Skip to content

Instantly share code, notes, and snippets.

@nitaku
Last active August 29, 2015 14:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nitaku/427c1ffc346ed9286fda to your computer and use it in GitHub Desktop.
Save nitaku/427c1ffc346ed9286fda to your computer and use it in GitHub Desktop.
Three.js animated cube
canvas {
width: 960px;
height: 500px;
}
<!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="http://cdnjs.cloudflare.com/ajax/libs/three.js/r67/three.min.js"></script>
</head>
<body>
<script src="index.js"></script>
</body>
</html>
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();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment