Web GL : cours 10

Les interactions

PF Villard d'après le cours de Eric Haines (Autodesk Inc.) disponible sur Udacity

Exemple

Les évenements

document.addEventListener( 'mousedown', onDocumentMouseDown, false );
 

function onDocumentMouseDown( event ) {
    even.preventDefault();
}    
 

Picking

Picking

function onDocumentMouseDown( event ) {
    var mouseVector = new THREE.Vector3(
        2 * ( event.clientX / canvasWidth ) - 1,
        1 - 2 * ( event.clientY / canvasHeight ));
    var projector = new THREE.Projector();
    var raycaster = projector.pickingRay( mouseVector.clone(), camera );
 

Picking

var intersects = raycaster.intersectObjects( objects );
if ( intersects.length > 0 ) {
    intersects[ 0 ].object.material.color.setRGB(
        Math.random(), Math.random(), Math.random() );

    var sphere = new THREE.Mesh( sphereGeom, sphereMaterial );
    sphere.position = intersects[ 0 ].point;
    scene.add( sphere );
}
 

Dragging

Dragging

Dragging

Dragging

La boucle de rendu

renderer.render(scene, camera);

function animate() {
    window.requestAnimationFrame(animate);
    render();
}

function render() {
    var delta = clock.getDelta();
    cameraControls.update(delta);
    renderer.render(scene, camera);
} 

Animation incrémental

var bodyhead = new THREE.Object3D();
bodyhead.add(body);
bodyhead.add(head);

// add field for animated part, for simplicity
bbird.animated = bodyhead;

bbird.add(support);
bbird.add(bodyhead);

Animation incrémental

var tiltDirection = 1;

function render() {
    bird.animated.rotation.z += tiltDirection * 0.5 * Math.PI/180;
    if ( bird.animated.rotation.z > 103 * Math.PI/180 ) {
        tiltDirection = -1;
        bird.animated.rotation.z = 2*(103 * Math.PI/180) - 
        bird.animated.rotation.z;
    } else if ( bird.animated.rotation.z < -22 * Math.PI/180 ) {
        tiltDirection = 1;
        bird.animated.rotation.z = 2*(-22 * Math.PI/180) - 
        bird.animated.rotation.z;
    }

    renderer.render(scene, camera);
}

Mise en place d'une rotation

Animation minutée

var clock = new THREE.Clock();

function render() {
    var delta = clock.getDelta();

// fixed step size:
bird.animated.rotation.z +=
    tiltDirection * 0.5 * Math.PI/180;

// clock controlled:
bird.animated.rotation.z +=
    tiltDirection * 30 * delta * Math.PI/180;

Animation minutée

    
// final code:
var angle = (30 * clock.getElapsedTime()) % 250;
if ( angle < 125 ) {
    // go from -22 to 103 degrees
    bird.animated.rotation.z =
        (angle - 22) * Math.PI/180;
} else {
    // go back from 103 to -22 degrees
    bird.animated.rotation.z =
        ((250-angle) - 22) * Math.PI/180;
}