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.
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.
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(); |