Experimento com canvas - cubo

Cubo (orientado pelo mouse)

Baseando nesse exemplo de animação de um cubo utilizando Three.js, iremos fazer o cubo se orientar de acordo com o movimento do mouse.

Primeiro passo

Iremos adicionar um parâmetro a função animate, que necessitaremos mais tarde. Substitua o código abaixo.

    ...
    var lastTime = 0;

        // this function is executed on each animation frame
    function animate(){
    

    ...
    var lastTime = 0;

    // this function is executed on each animation frame
    function animate(mouseEvent){
    

Segundo passo

Iremos rotacionar a câmera de acordo com a posição do mouse.

    ...
    lastTime = time;

    //Adicione esta linha após a linha referenciada acima
    if(mouseEvent)camera.rotation.setZ((mouseEvent.offsetX/100 * 1)+(mouseEvent.offsetY/100 * 1));
    

Terceiro passo

Remova o trecho abaixo

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

Quarto passo

Substitua o trecho abaixo para mudarmos as características do cubo e direcionar uma luz à uma das faces do cubo.

    // cube
    var cube = new THREE.Mesh(new THREE.CubeGeometry(200, 200, 200), new THREE.MeshNormalMaterial());
    cube.overdraw = true;
    scene.add(cube);

    // start animation
    animate();
    

    // cube
    var cube = new THREE.Mesh(new THREE.CubeGeometry(200, 200, 200), new THREE.MeshLambertMaterial({
    color: 'purple' 
    }));
    cube.overdraw = true;
    cube.rotation.x = Math.PI * 0.1;
    scene.add(cube);

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

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

    // start animation
    animate();

    document.querySelector("canvas").onmousemove = 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(mouseEvent){
    // update
    var time = (new Date()).getTime();
    var timeDiff = time - lastTime;
    var angleChange = angularSpeed * timeDiff * 2 * Math.PI / 1000;
    cube.rotation.y += angleChange;
    lastTime = time;

    if(mouseEvent)camera.rotation.setZ((mouseEvent.offsetX/100 * 1)+(mouseEvent.offsetY/100 * 1));

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

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

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

    // scene
    var scene = new THREE.Scene();
            
    // cube
    var cube = new THREE.Mesh(new THREE.CubeGeometry(200, 200, 200), new THREE.MeshLambertMaterial({
    color: 'purple' 
    }));
    cube.overdraw = true;
    cube.rotation.x = Math.PI * 0.1;
    scene.add(cube);

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

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

    // start animation
    animate();

    document.querySelector("canvas").onmousemove = animate;
        

Exibir resultado