Cube and Cylinder (three.js)

by Mikel Ortega

JavaScript

var camera, scene, renderer, geometry;

init();
animate();

function init() {

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.z = 500;
    scene.add(camera);

    texture = THREE.ImageUtils.loadTexture( '/img/initializing.png' );
    var material = new THREE.MeshLambertMaterial({color: 0x00bbff,map:texture});

    geomCube = new THREE.CubeGeometry(150, 150, 150);
    cube     = new THREE.Mesh(geomCube, material);
    scene.add(cube);

    var material = new THREE.MeshLambertMaterial({color: 0xaabbff});

    geomCyl  = new THREE.CylinderGeometry(100, 100, 100, 32, 1);
    cylinder = new THREE.Mesh(geomCyl, material);
    scene.add(cylinder);

	light = new THREE.DirectionalLight( 0xffffff );
	light.position.set( 0, 0, 1 );
	scene.add( light );    
    
    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.domElement);

}

function animate() {

    requestAnimationFrame(animate);
    render();

}

function render() {

    cube.rotation.x += 0.01;
    cube.rotation.y += 0.02;

    cylinder.rotation.x += 0.004;
    cylinder.rotation.y += 0.006;

    renderer.render(scene, camera);

}