tp-interaction/js/main.js

class Controls {
    constructor(object) {

        // object is the object controlled by the controls, in our case, the camera.
        this.object = object;

        // 3D coordinates where the camera is looking at
        this.target = new THREE.Vector3(0, 0, 0);

        // Unit vectors of the local camera frame
        // forward is in the z-direction
        // left point towards the x-direction
        // (a vector towards y is not necessary)
        // in the direction of the angles
        this.forward = new THREE.Vector3(0,0,0);
        this.left = new THREE.Vector3(0,0,0);

        // speed at which the camera will translate
        this.speed = 50;

        // speed at which the camera will rotate
        this.sensitivity = 0.004;

        // angles of the camera
        this.angles = {
            delta: 0,
            theta: 0,
        };

        // the position of the camera is this.object.position

        this.vectorsFromAngles();

        // currently pressed keys
        this.keys = {
            up: false,
            down: false,
            left: false,
            right: false,
        };

        // whether the mouse is being pressed or not
        this.mouseClicked = false;

        // whether there is a transition running or not
        //   if not, this.t is NaN
        //   otherwise, this.t is in [0, 1]
        this.t = NaN;

        // calls this.keyChange(true) when a key is pressed
        document.addEventListener('keydown', this.keyChange(true));

        // calls this.keyChange(false) when a key is released
        document.addEventListener('keyup', this.keyChange(false));

        // calls this.mouseDown(e) when a mouse button is pressed
        document.addEventListener('mousedown', (e) => this.mouseDown(e));

        // sets this.mouseClicked to false when a mouse button is released
        document.addEventListener('mouseup', () => this.mouseClicked = false);

        // calls this.mouseMove(e) when the mouse is moved
        document.addEventListener('mousemove', (e) => this.mouseMove(e));
    }

    // rotates the camera to make it look to its target.
    look() {
        this.object.lookAt(this.target);
    }

    // updates this.forward, this.left and this.target
    // from this.angles.delta and this.angles.theta

    //  this.forward is the vector moving direction
    //  this.left is the vector moving sideways to the left
    //  this.target is the point that the camera is looking
    vectorsFromAngles() {
        // TODO Part 1
    }


    // computes this.angles.delta and this.angles.theta from this.forward
    // (may be useless)
    anglesFromVectors() {
        // TODO Part 2
    }

    // updates this.keys when a key is pressed or released
    keyChange(setting) {
        return (event) => {
            switch (event.keyCode) {
                case 37: case 81: this.keys.left = setting;          break;
                case 38: case 90: this.keys.up = setting;            break;
                case 39: case 68: this.keys.right = setting;         break;
                case 40: case 83:  this.keys.down = setting;          break;
                case 13:
                    console.log("Position:", this.object.position);
                    console.log("Target:", this.target);
                    break;
            }
        };
    }

    // sets mouseClicked to true, and searches for a bookmark being clicked
    mouseDown(event) {
        this.mouseClicked = true;

        let mouse = {
            x: ( event.clientX / window.innerWidth ) * 2 - 1,
            y: - ( event.clientY / window.innerHeight ) * 2 + 1,
        };

        // update the picking ray with the camera and mouse position
        raycaster.setFromCamera(mouse, camera);

        // calculate objects intersecting the picking ray
        var intersects = raycaster.intersectObjects(scene.children, true);

        if (this.testIntersection(intersects)) {
            this.bookmarkClicked(intersects[0].object.parent);
        }

    }

    // tests that a bookmark is clicked or not
    //
    // this function filters out other objects of the scene.
    testIntersection(intersects) {
        if (intersects.length === 0) {
            return;
        }

        if (intersects[0].object === undefined) {
            return;
        }

        if (! (intersects[0].object.parent instanceof Bookmark)) {
            return;
        }

        if (this.object.position.distanceTo(intersects[0].object.parent.position) < 10) {
            return;
        }

        this.bookmarkClicked(intersects[0].object.parent);
    }

    // initializes the paramters for the transition to a bookmark.
    bookmarkClicked(bookmark) {
        // TODO Part 2
    }

    // changes this.angles depending of event.movementX and event.movementY
    //
    // event.movementX indicates how many pixels the mouse has moved to the right
    // event.movementY indicates how many piels the mouse has moved to the bottom
    // both those values can be negative to indicate a motion in the opposite direction
    mouseMove(event) {
        // TODO Part 1
    }

    // called at every frame
    update() {

        // No transition : use keyboard and mouse to update the camera
        if (isNaN(this.t)) {

            // TODO Part 1

            if (this.keys.up) {
                // ...
            }

        } else {
            // Transition to bookmark
            // TODO Part 2

        }

        // update the camera parameters
        this.look();
    }
}

let container, controls;
let camera, scene, renderer;
let raycaster = new THREE.Raycaster();

init();
animate();

function init() {

    container = document.createElement('div');
    document.body.appendChild(container);
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 100, 50000);
    camera.position.y = 1000;
    camera.position.z = 1000;

    scene = new THREE.Scene();
    let ambientLight = new THREE.AmbientLight(0xcccccc, 0.4);
    scene.add(ambientLight);
    let pointLight = new THREE.PointLight(0xffffff, 0.8);
    camera.add(pointLight);
    scene.add(camera);

    let geometry = new THREE.PlaneGeometry(20000, 20000);
    for (let index = 0; index < geometry.faceVertexUvs[0].length; index++) {
        geometry.faceVertexUvs[0][index][0].multiplyScalar(10);
        geometry.faceVertexUvs[0][index][1].multiplyScalar(10);
        geometry.faceVertexUvs[0][index][2].multiplyScalar(10);
    }
    let texture = new THREE.TextureLoader().load('assets/windfall/water.png');
    texture.wrapS = THREE.RepeatWrapping;
    texture.wrapT = THREE.RepeatWrapping;
    let material = new THREE.MeshBasicMaterial({map: texture});
    let sea = new THREE.Mesh(geometry, material);
    sea.rotation.x = -Math.PI / 2;
    scene.add(sea);

    // controls
    controls = new Controls(camera);

    // model
    let directory = "assets/windfall/";
    let modelName = "Windfall";

    let onProgress = function (xhr) {
        if (xhr.lengthComputable) {
            let percentComplete = xhr.loaded / xhr.total * 100;
            console.log(Math.round(percentComplete, 2) + '% downloaded');
        }
    };

    let onError = function () { };
    let manager = new THREE.LoadingManager();

    new THREE.MTLLoader(manager)
        .setPath(directory)
        .load(modelName + ".mtl", function (materials) {
            materials.preload();
            new THREE.OBJLoader(manager)
                .setMaterials(materials)
                .setPath(directory)
                .load(modelName + ".obj", function (object) {
                    scene.add(object);
                }, onProgress, onError);
        });

    renderer = new THREE.WebGLRenderer();
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor(new THREE.Color(0x87ceeb));
    container.appendChild(renderer.domElement);

    window.addEventListener('resize', onWindowResize, false);

    // Add a bookmark to the scene
    // let position = { x: -3089.6612461510463, y: 3944.8226721499614, z: -2409.0350261969947 };
    // let target = { x: -3088.665295409939, y: 3944.824672148628, z: -2409.124904566436 };
    // let bookmark = new Bookmark(position, target);
    // scene.add(bookmark);
}

function animate() {
    requestAnimationFrame(animate);
    controls.update();

    for (let child of scene.children) {
        if (child instanceof Bookmark) {
            child.update(camera);
        }
    }

    renderer.render(scene, camera);
}

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}