index.html

<!DOCTYPE html>

<html lang="en">

<head>
    <title>Web VR - #2 JS Meetup Sarajevo</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <style>
        body {
            width: 100%;
            height: 100%;
            background-color: #000;
            color: #fff;
            margin: 0px;
            padding: 0;
            overflow: hidden;
        }
        /* Position the button on the bottom of the page. */

        #ui {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            font-family: 'Karla', sans-serif;
            z-index: 1;
        }

        #magic-window {
            display: block;
            color: white;
            margin-top: 1em;
        }
    </style>
</head>

<body>
    <div id="ui">
        <div id="vr-button"></div>
        <a id="magic-window">Try it without a headset</a>
    </div>
</body>

<script>
    /*
     * Debug parameters.
     */
    WebVRConfig = {
        /**
         * webvr-polyfill configuration
         */

        // Forces availability of VR mode.
        //FORCE_ENABLE_VR: true, // Default: false.
        // Complementary filter coefficient. 0 for accelerometer, 1 for gyro.
        //K_FILTER: 0.98, // Default: 0.98.
        // How far into the future to predict during fast motion.
        //PREDICTION_TIME_S: 0.040, // Default: 0.040 (in seconds).
        // Flag to disable touch panner. In case you have your own touch controls
        //TOUCH_PANNER_DISABLED: true, // Default: false.
        // Enable yaw panning only, disabling roll and pitch. This can be useful for
        // panoramas with nothing interesting above or below.
        //YAW_ONLY: true, // Default: false.
        // Enable the deprecated version of the API (navigator.getVRDevices).
        //ENABLE_DEPRECATED_API: true, // Default: false.
        // Scales the recommended buffer size reported by WebVR, which can improve
        // performance. Making this very small can lower the effective resolution of
        // your scene.
        BUFFER_SCALE: 0.5, // default: 1.0
        // Allow VRDisplay.submitFrame to change gl bindings, which is more
        // efficient if the application code will re-bind it's resources on the
        // next frame anyway.
        // Dirty bindings include: gl.FRAMEBUFFER_BINDING, gl.CURRENT_PROGRAM,
        // gl.ARRAY_BUFFER_BINDING, gl.ELEMENT_ARRAY_BUFFER_BINDING,
        // and gl.TEXTURE_BINDING_2D for texture unit 0
        // Warning: enabling this might lead to rendering issues.
        //DIRTY_SUBMIT_FRAME_BINDINGS: true // default: false
    };
</script>

<!--
  A polyfill for Promises. Needed for IE and Edge.
-->
<script src="node_modules/es6-promise/dist/es6-promise.min.js"></script>

<!--
  three.js 3d library
-->
<script src="node_modules/three/build/three.min.js"></script>

<!--
  VRControls.js acquires positional information from connected VR devices and applies the transformations to a three.js camera object.
-->
<script src="node_modules/three/examples/js/controls/VRControls.js"></script>

<!--
  VREffect.js handles stereo camera setup and rendering.
-->
<script src="node_modules/three/examples/js/effects/VREffect.js"></script>

<!--
  A polyfill for WebVR using the Device{Motion,Orientation}Event API.
-->
<script src="node_modules/webvr-polyfill/build/webvr-polyfill.min.js"></script>

<!--
  A set of UI controls for entering VR mode.
-->
<script src="node_modules/webvr-ui/build/webvr-ui.min.js"></script>


<script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.5.0.js"></script>

<script src="./orbit-gamepad.js"></script>


<script>
    var pubnub = new PubNub({
        publishKey: 'pub-c-7f43492c-431c-4404-b7a7-96ee3f60086a',
        subscribeKey: 'sub-c-1fd379da-067e-11e7-83b6-0619f8945a4f'
    })


    var heightOfUser = 1.6;

    if (isClient()) {

        // ablyChannel.subscribe('camsync', function(message) {
        //   if (vrButton.isPresenting()) {
        //       var newMatrix = message.data.camera;
        //       camera.matrix.fromArray(message.data.camera);
        //       camera.matrix.decompose(camera.position, camera.quaternion, camera.scale);
        //       dollyCam.matrix.fromArray(message.data.dollyCam);
        //       dollyCam.matrix.decompose(dollyCam.position, dollyCam.quaternion, dollyCam.scale);
        //       effect.render(scene, camera);
        //       controls.update();
        //   }
        // });
        // Subscribe to the demo_tutorial channel
        pubnub.addListener({
            message: function(message) {
                if (vrButton.isPresenting()) {
                    var newMatrix = message.message.camera;
                    camera.matrix.fromArray(message.message.camera);
                    camera.matrix.decompose(camera.position, camera.quaternion, camera.scale);
                    dollyCam.matrix.fromArray(message.message.dollyCam);
                    dollyCam.matrix.decompose(dollyCam.position, dollyCam.quaternion, dollyCam.scale);
                    effect.render(scene, camera);
                    controls.update();
                }
            }
        })

        pubnub.subscribe({
            channels: ['cameramatrix']
        });
    }

    function isClient() {
        return window.location.hash === '' || window.location.hash === '#client';
    }

    var oldCameraMatrix;
    var oldDollyCamMatrix;
    var CAM_DELTA = 0.02;

    function matrixChanged(oldMatrix, newMatrix) {
        if (!oldMatrix) {
            return true;
        }
        var oldLength = oldMatrix.length;
        var newLength = newMatrix.length;
        if (oldLength != newLength) {
            return true;
        }

        for (var i = 0; i < newLength; i++) {
            if (Math.abs(oldMatrix[i] - newMatrix[i]) > CAM_DELTA) {
                return true;
            }
        }

        return false;
    }

    function publishCameraLocationMessage() {

        if (window.location.hash !== '#presenter') {
            return;
        }

        var newCameraMatrix = camera.matrix.toArray();
        var newDollyCamMatrix = dollyCam.matrix.toArray();
        var publishConfig = {
            channel: "cameramatrix",
            message: {
                camera: newCameraMatrix,
                dollyCam: newDollyCamMatrix
            }
        }

        // ablyChannel.publish('camsync',  {
        //     camera: newCameraMatrix,
        //     dollyCam: newDollyCamMatrix
        // });

        if (matrixChanged(oldCameraMatrix, newCameraMatrix) || matrixChanged(oldDollyCamMatrix, newDollyCamMatrix)) {
            pubnub.publish(publishConfig, function(status, response) {
                //console.log(status, response);
            })
            oldCameraMatrix = newCameraMatrix;
            oldDollyCamMatrix = newDollyCamMatrix;
        }
    }
    // Last time the scene was rendered.
    var lastRenderTime = 0;
    // Currently active VRDisplay.
    var vrDisplay;
    // How big of a sphere to render.
    var boxSize = 200;
    // Various global THREE.Objects.
    var scene;
    var cube;
    var controls;
    var orbitControls;
    var effect;
    var camera;
    var dollyCam;
    // EnterVRButton for rendering enter/exit UI.
    var vrButton;

    var moved = false;
    var pressing = false;
    var positions = [{
            x: 0,
            y: 0,
            z: -6
        }, // closeup

        {
            x: 0,
            y: heightOfUser,
            z: 0
        }, // intro

        {
            x: 25,
            y: 25,
            z: 25
        }, // vr first

        {
            x: 0,
            y: 25,
            z: 25
        }, // vr second

        {
            x: 25,
            y: 0,
            z: 25
        }, // Web VR

        {
            x: 50,
            y: 50,
            z: 50
        }, // CODE

        {
            x: 50,
            y: 50,
            z: 0
        }, // QA

        {
            x: 0,
            y: 50,
            z: 0
        }, // Thank You

    ]
    var currentPositionIndex = 0;

    function currentPosition() {
        if (currentPositionIndex >= 0 && currentPositionIndex < positions.length) {
            return positions[currentPositionIndex];
        }
    }

    function goToNextPosition() {
        if (currentPositionIndex >= 0 && currentPositionIndex < positions.length - 1) {
            currentPositionIndex = currentPositionIndex + 1;
        }
    }

    function goToPreviousPosition() {

        if (currentPositionIndex > 0 && currentPositionIndex <= positions.length - 1) {
            currentPositionIndex = currentPositionIndex - 1;
        }
    }

    function loadFont(afterFont) {

        var loader = new THREE.FontLoader();
        loader.load('fonts/helvetiker_regular.typeface.json', function(response) {

            font = response;
            if (afterFont) {
                afterFont();
            }

        });

    }

    function degreesToRadians(degrees) {
        return degrees * (Math.PI / 180.0);
    }

    function onLoad() {
        // Setup three.js WebGL renderer. Note: Antialiasing is a big performance hit.
        // Only enable it if you actually need to.
        var renderer = new THREE.WebGLRenderer({
            antialias: true
        });
        renderer.setPixelRatio(window.devicePixelRatio);

        // Append the canvas element created by the renderer to document body element.
        document.body.appendChild(renderer.domElement);

        document.body.addEventListener('keydown', function(e) {
            e = e || window.event;
            var charCode = e.charCode || e.keyCode,
                character = String.fromCharCode(charCode);
            switch (character) {
                case 'p':
                case 'P':
                    moveToNextPlace();
                    break;
                case 'q':
                case 'Q':
                    moveToPreviousPlace();
                    break;
            }
            console.log('pressed ', character);
        });

        // Create a three.js scene.
        scene = new THREE.Scene();

        // Create a three.js camera.
        var aspect = window.innerWidth / window.innerHeight;
        camera = new THREE.PerspectiveCamera(75, aspect, 0.1, 10000);

        var dummyControls = {
            update: function() {}
        };

        controls = (!isClient()) ? new THREE.VRControls(camera) : dummyControls;
        controls.standing = true;
        var current = currentPosition();

        var oldUpdate = controls.update;
        controls.update = function() {
            oldUpdate();
            publishCameraLocationMessage();
        };

        // The dolly has to be a PerspectiveCamera, as opposed
        // to a simple Object3D, since that's what
        // OrbitControls expects.
        dollyCam = new THREE.PerspectiveCamera(75, aspect, 0.1, 10000);
        /*var orbitControls = new THREE.OrbitControls(dollyCam); */

        dollyCam.add(camera);
        //orbitControls = new OrbitControls(dollyCam);
        dollyCam.position.set(current.x, current.y, current.z);
        scene.add(dollyCam);


        // Apply VR stereo rendering to renderer.
        effect = new THREE.VREffect(renderer);
        effect.setSize(window.innerWidth, window.innerHeight);

        var loader = new THREE.TextureLoader();
        loader.load('img/livada.jpg', onTextureLoaded);

        // // Create 3D objects.
        // var geometry = new THREE.SphereGeometry(0.5, 0.5, 0.5);
        // var material = new THREE.MeshNormalMaterial();
        // cube = new THREE.Mesh(geometry, material);
        //
        // // Position cube mesh to be right in front of you.
        // cube.position.set(0, heightOfUser, -1);

        // Add cube mesh to your three.js scene
        //scene.add(cube);

        window.addEventListener('resize', onResize, true);
        window.addEventListener('vrdisplaypresentchange', onResize, true);

        // Initialize the WebVR UI.
        var uiOptions = {
            color: 'black',
            background: 'white',
            corners: 'square'
        };

        vrButton = new webvrui.EnterVRButton(renderer.domElement, uiOptions);
        vrButton.on('exit', function() {
            camera.quaternion.set(0, 0, 0, 1);
            camera.position.set(current.x, current.y, current.z);
        });
        vrButton.on('hide', function() {
            document.getElementById('ui').style.display = 'none';
        });
        vrButton.on('show', function() {
            document.getElementById('ui').style.display = 'inherit';
        });
        document.getElementById('vr-button').appendChild(vrButton.domElement);
        document.getElementById('magic-window').addEventListener('click', function() {
            vrButton.requestEnterFullscreen();
        });

        var light = new THREE.PointLight(0xffffff, 1, 300);
        light.position.set(0, 4.9, 0);
        scene.add(light);

        loadFont(function() {

            displayText("Intro", {
                color: 0xffaa00,
                size: 2,
                height: 0.01,
                specular: 0xaaaaaa
            }, {
                x: -2,
                y: heightOfUser + 5,
                z: -9
            });

              var pos2 = positions[2];
              displayText("About VR", {
                  color: 0x00ff00,
                  size: 2,
                  height: 0.01,
                  specular: 0xaaaaaa
              }, {
                  x: pos2.x - 5,
                  y: pos2.y + 5,
                  z: pos2.z - 9
              });

              var pos3 = positions[3];
              displayText("Cardboard", {
                  color: 0x00ff00,
                  size: 2,
                  height: 0.01,
                  specular: 0xaaaaaa
              }, {
                  x: pos3.x - 5,
                  y: pos3.y + 5,
                  z: pos3.z - 9
              });

              var pos4 = positions[4];
              displayText("Web VR & Three.js", {
                  color: 0x00ff00,
                  size: 2,
                  height: 0.01,
                  specular: 0xaaaaaa
              }, {
                  x: pos4.x - 10,
                  y: pos4.y + 5,
                  z: pos4.z - 9
              });

              var pos5 = positions[5];
              displayText("Code", {
                  color: 0x00ff00,
                  size: 2,
                  height: 0.01,
                  specular: 0xaaaaaa
              }, {
                  x: pos5.x - 2,
                  y: pos5.y + 5,
                  z: pos5.z - 9
              });


              var pos6 = positions[6];
              displayText("Q and A", {
                  color: 0x00ff00,
                  size: 2,
                  height: 0.04,
                  specular: 0xaaaaaa
              }, {
                  x: pos6.x - 4,
                  y: pos6.y,
                  z: pos6.z - 5
              });

              var pos7 = positions[7];
              displayText("verygoodpoint.net", {
                  color: 0x00ff00,
                  size: 2,
                  height: 0.04,
                  specular: 0xaaaaaa
              }, {
                  x: pos7.x - 10,
                  y: pos7.y,
                  z: pos7.z - 9
              });


            //displayText("Senad Uka", {
            //     color: 0x00ff00,
            //     size: 0.3,
            //     height: 0.01,
            //     specular: 0xaaaaaa
            // }, {
            //     x: 2,
            //     y: heightOfUser + 2,
            //     z: -2
            // }, {
            //     x: 0.1,
            //     y: degreesToRadians(-35),
            //     z: 0
            // });

            // displayText("JS Meetup Sarajevo", {
            //     color: 0xaaff12,
            //     size: 0.3,
            //     height: 0.02,
            //     specular: 0x11aaaa
            // }, {
            //     x: 2,
            //     y: heightOfUser - 1,
            //     z: -2
            // }, {
            //     x: degreesToRadians(-40),
            //     y: degreesToRadians(0),
            //     z: 0
            // });
        });


        // 1 pravo
        displayPicture('./img/slide1.jpeg', {
            width: 10,
            height: 5,
            depth: 0.1,
        }, {
            y: 0,
            x: 0,
            z: -9
        }, {
            x: 0,
            y: 0,
            z: 0

        });

        // // 1 dole
        // displayPicture('./img/slide2.jpeg', {
        //     width: 5,
        //     height: 2.5,
        //     depth: 0.1,
        // }, {
        //     y: 0.01,
        //     x: 0,
        //     z: 0
        // }, {
        //     x: degreesToRadians(-90),
        //     y: 0,
        //     z: 0
        //
        // });

        // 1 desno
        displayPicture('./img/slide3.jpeg', {
            width: 10,
            height: 5,
            depth: 0.1,
        }, {
            y: 0,
            x: 10,
            z: -5
        }, {
            x: 0,
            y: 5,
            z: 0

        });

        // 1 lijevo
        displayPicture('./img/slide2.jpeg', {
            width: 10,
            height: 5,
            depth: 0.1,
        }, {
            y: 0,
            x: -10,
            z: -5
        }, {
            x: 0,
            y: -5,
            z: 0

        });

        var pos2 = positions[2];

        displayPicture('./img/slide4.jpeg', {
            width: 10,
            height: 5,
            depth: 0.1,
        }, {
            y: pos2.y,
            x: pos2.x,
            z: pos2.z -9
        }, {
            x: 0,
            y: 0,
            z: 0

        });

        // 1 lijevo
        displayPicture('./img/slide5.jpeg', {
            width: 10,
            height: 5,
            depth: 0.1,
        }, {
            y: pos2.y ,
            x: pos2.x -10,
            z: pos2.z -5
        }, {
            x: 0,
            y: -5,
            z: 0

        });


        // 1 desno
        displayPicture('./img/slide6.jpeg', {
            width: 10,
            height: 5,
            depth: 0.1,
        }, {
            y: pos2.y ,
            x: pos2.x + 10,
            z: pos2.z -5
        }, {
            x: 0,
            y: 5,
            z: 0

        });

        var pos3 = positions[3];

        displayPicture('./img/slide8.jpeg', {
            width: 10,
            height: 5,
            depth: 0.1,
        }, {
            y: pos3.y ,
            x: pos3.x,
            z: pos3.z -9
        }, {
            x: 0,
            y: 0,
            z: 0

        });

        // 1 lijevo
        displayPicture('./img/slide9.jpeg', {
            width: 10,
            height: 5,
            depth: 0.1,
        }, {
            y: pos3.y ,
            x: pos3.x -10,
            z: pos3.z -5
        }, {
            x: 0,
            y: -5,
            z: 0

        });


        // 1 desno
        displayPicture('./img/slide7.jpeg', {
            width: 10,
            height: 5,
            depth: 0.1,
        }, {
            y: pos3.y ,
            x: pos3.x + 10,
            z: pos3.z -5
        }, {
            x: 0,
            y: 5,
            z: 0

        });

        var pos4 = positions[4];

        displayPicture('./img/slide10.jpeg', {
            width: 10,
            height: 5,
            depth: 0.1,
        }, {
            y: pos4.y ,
            x: pos4.x,
            z: pos4.z -9
        }, {
            x: 0,
            y: 0,
            z: 0

        });

        // 1 lijevo
        displayPicture('./img/slide11.jpeg', {
            width: 10,
            height: 5,
            depth: 0.1,
        }, {
            y: pos4.y ,
            x: pos4.x -10,
            z: pos4.z -5
        }, {
            x: 0,
            y: -5,
            z: 0

        });


        // 1 desno
        displayPicture('./img/slide12.jpeg', {
            width: 10,
            height: 5,
            depth: 0.1,
        }, {
            y: pos4.y ,
            x: pos4.x + 10,
            z: pos4.z -5
        }, {
            x: 0,
            y: 5,
            z: 0

        });


        var pos5 = positions[5];

        displayPicture('./img/slide13.jpeg', {
            width: 10,
            height: 5,
            depth: 0.1,
        }, {
            y: pos5.y ,
            x: pos5.x,
            z: pos5.z -9
        }, {
            x: 0,
            y: 0,
            z: 0

        });

        // 1 lijevo
        displayPicture('./img/slide14.jpeg', {
            width: 10,
            height: 5,
            depth: 0.1,
        }, {
            y: pos5.y ,
            x: pos5.x -10,
            z: pos5.z -5
        }, {
            x: 0,
            y: -5,
            z: 0

        });


        // 1 desno
        displayPicture('./img/slide15.jpeg', {
            width: 10,
            height: 5,
            depth: 0.1,
        }, {
            y: pos5.y ,
            x: pos5.x + 10,
            z: pos5.z -5
        }, {
            x: 0,
            y: 5,
            z: 0

        });


        // nazad desno

        // 1 lijevo
        displayPicture('./img/slide16.jpeg', {
            width: 10,
            height: 5,
            depth: 0.1,
        }, {
            y: pos5.y ,
            x: pos5.x -10,
            z: pos5.z + 5
        }, {
            x: 0,
            y: 5,
            z: 0

        });

         // nazad lijevo
        // 1 desno
        displayPicture('./img/slide17.jpeg', {
            width: 10,
            height: 5,
            depth: 0.1,
        }, {
            y: pos5.y ,
            x: pos5.x + 10,
            z: pos5.z + 5
        }, {
            x: 0,
            y: -5,
            z: 0

        });

        // nazad pravo
        // 1 desno
        displayPicture('./img/slide18.jpeg', {
            width: 10,
            height: 5,
            depth: 0.1,
        }, {
            y: pos5.y ,
            x: pos5.x,
            z: pos5.z + 9
        }, {
            x: 0,
            y: degreesToRadians(180),
            z: 0

        });


    }

    function onTextureLoaded(texture) {
        texture.wrapS = THREE.RepeatWrapping;
        texture.wrapT = THREE.RepeatWrapping;
        //texture.repeat.set(boxSize, boxSize);

        var geometry = new THREE.SphereGeometry(boxSize, boxSize, boxSize);
        var material = new THREE.MeshBasicMaterial({
            map: texture,
            /*  color: 0x01BE00,
              side: THREE.BackSide */
        });


        // Align the skybox to the floor (which is at y=0).
        skybox = new THREE.Mesh(geometry, material);
        skybox.position.y = boxSize / 3;
        skybox.scale.x = -1;
        scene.add(skybox);

        // For high end VR devices like Vive and Oculus, take into account the stage
        // parameters provided.
        setupStage();
    }


    // Request animation frame loop function
    function animate(timestamp) {
        var delta = Math.min(timestamp - lastRenderTime, 500);
        lastRenderTime = timestamp;

        // Apply rotation to cube mesh
        //cube.rotation.y += delta * 0.0006;

        // Only update controls if we're presenting.
        if (vrButton.isPresenting()) {
            controls.update();
        }
        // Render the scene.
        effect.render(scene, camera);

        vrDisplay.requestAnimationFrame(animate);
    }

    function onResize(e) {
        effect.setSize(window.innerWidth, window.innerHeight);
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
    }

    // Get the HMD, and if we're dealing with something that specifies
    // stageParameters, rearrange the scene.
    function setupStage() {
        navigator.getVRDisplays().then(function(displays) {
            if (displays.length > 0) {
                vrDisplay = displays[0];
                if (vrDisplay.stageParameters) {
                    setStageDimensions(vrDisplay.stageParameters);
                }
                vrDisplay.requestAnimationFrame(animate);
            }
        });
    }

    function setStageDimensions(stage) {
        // Make the skybox fit the stage.
        var material = skybox.material;
        scene.remove(skybox);

        // Size the skybox according to the size of the actual stage.
        var geometry = new THREE.BoxGeometry(stage.sizeX, boxSize, stage.sizeZ);
        skybox = new THREE.Mesh(geometry, material);

        // Place it on the floor.
        skybox.position.y = boxSize / 2;
        //scene.add(skybox);

        // Place the cube in the middle of the scene, at user height.
        cube.position.set(0, heightOfUser, 0);
    }

    var currentCityTextMesh;

    function displayText(text,
        format = {
            color: 0xffaa00,
            specular: 0xaaaaaa,
            size: 0.5,
            height: 0.01,
        },
        position = {
            y: heightOfUser,
            x: 0,
            z: -1
        }, rotation = {
            x: 0,
            y: 0,
            z: 0

        }) {
        currentCityText = new THREE.TextGeometry(text, {
            size: format.size,
            height: format.height,
            font: font,
            curveSegments: 12,
            bevelThickness: 0.01,
            bevelSize: 0.01,
            bevelEnabled: false
        });

        currentCityTextMesh = new THREE.Mesh(currentCityText, new THREE.MeshPhongMaterial({
            color: format.color,
            specular: format.specular
        }));


        currentCityTextMesh.position.y = position.y;
        currentCityTextMesh.position.z = position.z;
        currentCityTextMesh.position.x = position.x;


        currentCityTextMesh.rotateX(rotation.x);
        currentCityTextMesh.rotateY(rotation.y);
        currentCityTextMesh.rotateZ(rotation.z);

        scene.add(currentCityTextMesh);
    }

    function displayPicture(picture,
        format = {
            width: 10,
            height: 5,
            depth: 0.1,
        },
        position = {
            y: heightOfUser,
            x: 0,
            z: -9
        }, rotation = {
            x: 0,
            y: 0,
            z: 0

        }) {

        var loader = new THREE.TextureLoader();
        loader.load(picture, function(texture) {

            var geometry = new THREE.BoxGeometry(format.width, format.height, format.depth);
            var material = new THREE.MeshBasicMaterial({
                map: texture,
            });
            var display = new THREE.Mesh(geometry, material);

            display.position.y = position.y;
            display.position.z = position.z;
            display.position.x = position.x;


            display.rotateX(rotation.x);
            display.rotateY(rotation.y);
            display.rotateZ(rotation.z);

            scene.add(display);
        });
    }

    function moveToNextPlace() {
        if (!pressing) {
            goToNextPosition();
            // U - naprijed
            var current = currentPosition();
            dollyCam.position.x = current.x;
            dollyCam.position.y = current.y;
            dollyCam.position.z = current.z;
            controls.update();
            moved = false;
            pressing = true;
            setTimeout(function() {
                pressing = false;
            }, 500);
        }
    }

    function moveToPreviousPlace() {

        if (!pressing) {
            // O - nazad
            if (!moved) {
                goToPreviousPosition();
            }
            var current = currentPosition();
            dollyCam.position.x = current.x;
            dollyCam.position.y = current.y;
            dollyCam.position.z = current.z;
            controls.update();
            moved = false;
            pressing = true;
            setTimeout(function() {
                pressing = false;
            }, 500);
        }

    }


    function buttonPressed(buttonNumber) {
        var keyPanSpeed = 1;
        var direction = camera.getWorldDirection();
        var vectorUp = new THREE.Vector3(0, 1, 0);
        var strafeVector = new THREE.Vector3().crossVectors(vectorUp, direction).normalize();

        switch (buttonNumber) {

            case 6:

                dollyCam.position.add(direction.multiplyScalar(keyPanSpeed));
                controls.update();
                moved = true;
                break;

            case 7:
                dollyCam.position.add(direction.multiplyScalar(-keyPanSpeed));
                controls.update();
                moved = true;
                break;

            case 8:
                dollyCam.position.add(strafeVector.multiplyScalar(keyPanSpeed))
                controls.update();
                moved = true;
                break;

            case 9:
                dollyCam.position.add(strafeVector.multiplyScalar(-keyPanSpeed))
                controls.update();
                moved = true;
                break;
            case 0:
                moveToPreviousPlace();
                break;
            case 1:
                moveToNextPlace();
                break;


        }
        //alert(buttonNumber);
    }


    window.addEventListener('load', onLoad);
</script>

<script src="./gamepad.js"></script>

</html>