Experimento com canvas - cilindro

Cilindro

Baseando nesse exemplo de animação de um cilindro utilizando Three.js, iremos fazer o cilindro ficar em outra perspectiva e direcionar um feixe luz à ele.

Primeiro passo

Iremos remover as seguintes linhas.

    ...
    var timeDiff = time - lastTime;
    var angleChange = angularSpeed * timeDiff * 2 * Math.PI / 1000;
    cylinder.rotation.x += angleChange;
    cylinder.rotation.z += angleChange;
    

Segundo passo

Iremos mudar a perspectiva da câmera. Substitua o trecho abaixo

    ...
    // camera
    var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
    

    ...
    // camera
    var camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 1000);
    

Terceiro passo

Iremos modificar a cor do cilindro, rotaciona-lo e em seguida direcionar uma luz.

    ...
    var cylinder = new THREE.Mesh(new THREE.CylinderGeometry(100, 100, 400, 50, 50, false), new THREE.MeshNormalMaterial());
    cylinder.overdraw = true;
    scene.add(cylinder);

    // start animation
    animate();
    

    var cylinder = new THREE.Mesh(new THREE.CylinderGeometry(100, 100, 400, 50, 50, false), new THREE.MeshPhongMaterial({
    // light
    specular: '#CA978A',
    // intermediate
    color: '#D3755D',
    // dark
    emissive: '#E45C3A',
    shininess: 100 
    }));
    cylinder.overdraw = true;
    cylinder.rotation.x = 11;
    cylinder.rotation.z = 4;

    scene.add(cylinder);

    // add subtle ambient lighting
    var ambientLight = new THREE.AmbientLight(0x222222);
    scene.add(ambientLight);

    // directional lighting
    var directionalLight = new THREE.DirectionalLight(0xffffff);
    directionalLight.position.set(1, 1, 1).normalize();
    scene.add(directionalLight);

    // start animation
    animate();
    

Resultado

Código-fonte

// revolutions per second
    var angularSpeed = 0.2; 
    var lastTime = 0;

    // this function is executed on each animation frame
    function animate(){
    // update
    var time = (new Date()).getTime();
    lastTime = time;

    // render
    renderer.render(scene, camera);

    // request new frame
    requestAnimationFrame(function(){
        animate();
    });
    }

    // renderer
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // camera
    var camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.z = 700;

    // scene
    var scene = new THREE.Scene();
            
    // cylinder
    // API: THREE.CylinderGeometry(bottomRadius, topRadius, height, segmentsRadius, segmentsHeight)
    var cylinder = new THREE.Mesh(new THREE.CylinderGeometry(100, 100, 400, 50, 50, false), new THREE.MeshPhongMaterial({
    // light
    specular: '#CA978A',
    // intermediate
    color: '#D3755D',
    // dark
    emissive: '#E45C3A',
    shininess: 100 
    }));
    cylinder.overdraw = true;
    cylinder.rotation.x = 11;
    cylinder.rotation.z = 4;

    scene.add(cylinder);

    // add subtle ambient lighting
    var ambientLight = new THREE.AmbientLight(0x222222);
    scene.add(ambientLight);

    // directional lighting
    var directionalLight = new THREE.DirectionalLight(0xffffff);
    directionalLight.position.set(1, 1, 1).normalize();
    scene.add(directionalLight);

    // start animation
    animate();
        

Exibir resultado