rotating cube
May 25th, 2013 by brooks
Type of thing: 3d web webgl
four and a half years since rotating plane.
be sure jquery and three.js are included.
$(document).ready(function(){
var WIDTH = 605,
HEIGHT = 400;
var VIEW_ANGLE = 45,
ASPECT = WIDTH / HEIGHT,
NEAR = 0.1,
FAR = 10000;
var $container = $('#container');
var renderer = new THREE.WebGLRenderer();
var camera = new THREE.PerspectiveCamera(
VIEW_ANGLE,
ASPECT,
NEAR,
FAR);
var scene = new THREE.Scene();
camera.position.z = 300;
scene.add(camera);
renderer.setSize(WIDTH, HEIGHT);
$container.replaceWith(renderer.domElement);
var cubeMaterial = new THREE.MeshBasicMaterial(
{
color: 0xff0000
});
var width = 81,
height = 81,
depth = 81,
widthSegments = 9,
heightSegments = 9,
depthSegments = 9;
var cube = new THREE.Mesh(
new THREE.CubeGeometry(
width,
height,
depth,
widthSegments,
heightSegments,
depthSegments),
cubeMaterial);
scene.add(cube);
function animate() {
cube.rotation.x += 0.03;
cube.rotation.y += 0.03;
cube.rotation.z += 0.003;
renderer.render( scene, camera );
requestAnimationFrame( animate );
}
animate();
});
you’ll need a div with id “container” in the markup.
< div id="container" >
fallback for browsers that dont support
webgl or canvas would go here.
< /div >
Have fun! switch WebGLRenderer with CanvasRenderer for slower/limited performance but wider support.
Leave a Reply