3d-interface/js/l3d/apps/prototype/interactive/main.js

var isFullscreen = false;
var beenFullscreen = false;

var main_section = document.getElementById('main-section');

// var container_size = {
//     width: function() { if (!isFullscreen) return main_section.clientWidth; else return screen.width;},
//     height: function() {
//         if (!isFullscreen)
//             return main_section.clientHeight
//                 - document.getElementById('nav').offsetHeight
//                 - document.getElementById('main-div').offsetHeight;
//         else
//             return screen.height;
//     }
// };
var container_size = {
    width: function() { return 1024; },
    height: function() { return 768; }
};

var stats;

// Let's be sure we avoid using global variables
var onWindowResize = (function() {

// Disable scrolling
window.onscroll = function () { window.scrollTo(0, 0); };

var mesh_number = 25;
var renderer, scene, controls, cube, container, plane, mouse= {x:0, y:0};
var bigmesh;
var raycaster;
var objects = [];
var cameras, cameraSelecter;
var spheres = new Array(mesh_number);
var visible = 0;
// stats;
var previewer;
var camera1;
var loader;
var coins = [];
var previousTime;

window.onbeforeunload = function() {

    if (initMainScene !== L3D.initPeach && initMainScene !== L3D.initSponza && Coin.total !== 9) {

        return 'Warning : you are going to leave the page and abort the current test !';

    }

};


init();
if (initMainScene !== L3D.initPeach && initMainScene !== L3D.initSponza)
    logfps();
animate();

function logfps() {

    // Log fps
    if (stats !== undefined) {

        var event = new L3D.BD.Event.Fps();
        event.fps = stats.getFps();
        event.send();

    }

    setTimeout(logfps, 1000);

}

function init() {
    // Initialize scene
    scene = new THREE.Scene();
    renderer = new THREE.WebGLRenderer({alpha:true, antialias:true});

    // Collidable objects to prevent camera from traversing objects
    var collidableObjects = [];

    // Initialize renderer
    container = document.getElementById('container');
    container.style.height = container_size.height() + 'px';
    container.style.width = container_size.width() + 'px';
    renderer.setSize(container_size.width(), container_size.height());
    // renderer.setSize(container_size.width(), container_size.height());
    renderer.setClearColor(0x87ceeb);

    // Initialize pointer camera
    camera1 = new L3D.PointerCamera(50, container_size.width() / container_size.height(), 0.01, 100000, renderer, container);

    // Initialize previewer
    previewer = new L3D.Previewer(renderer, scene);
    previewer.domElement.style.position ="absolute";
    previewer.domElement.style.cssFloat = 'top-left';
    previewer.domElement.width = container_size.width();
    previewer.domElement.height = container_size.height();

    // Initialize stats counter
    stats = new Stats();
    stats.setMode(0);
    stats.domElement.style.position = 'absolute';
    stats.domElement.style.cssFloat = "top-left";

    // Initialize pointer for pointer lock
    var pointer = new L3D.MousePointer(camera1);
    pointer.domElement.width = container_size.width();
    pointer.domElement.height = container_size.height();

    //
    var startCanvas = new L3D.StartCanvas(camera1);
    startCanvas.domElement.width = container_size.width();
    startCanvas.domElement.height = container_size.height();

    // Add elements to page
    container.appendChild( stats.domElement );
    container.appendChild(Coin.domElement);
    container.appendChild(startCanvas.domElement);
    container.appendChild(pointer.domElement);
    container.appendChild(previewer.domElement);
    container.appendChild(renderer.domElement);

    startCanvas.render();

    cameras = initMainScene(camera1, scene, coins);
    // cameras = L3D.initPeach(camera1, scene, coins);
    // cameras = L3D.initBobomb(camera1, scene, coins);
    // cameras = L3D.initWhomp(camera1, scene, , coins);
    // cameras = L3D.initMountain(camera1, scene, coins);
    // cameras = L3D.initSponza(camera1, scene, coins);

    // Add listeners
    initListeners();

    // Set interval on animate
    setInterval(animate, 20);
}

function initListeners() {
    window.addEventListener('resize', onWindowResize, false);

    // Transmit click event to camera selecter
    container.addEventListener('mousedown', function(event) {
        if (event.which == 1)
            cameraSelecter.click(event);
        }, false
    );

    // Update camera selecter when mouse moved
    container.addEventListener('mousemove', function(event) {
        cameraSelecter.update(event);
    });

    // Escape key to exit fullscreen mode
    document.addEventListener('keydown', function(event) { if (event.keyCode == 27) { stopFullscreen();} }, false);

    // HTML Bootstrap buttons
    buttonManager = new ButtonManager(camera1, cameras, previewer);

    // Camera selecter for hover and clicking recommendations
    cameraSelecter = new L3D.CameraSelecter(renderer, scene, camera1, cameras, coins, buttonManager);
}

function render() {
    cameraSelecter.update();

    // Update recommendations (set raycastable if shown)
    var transform = buttonManager.showArrows ? show : hide;
    cameras.map(function(camera) {
        if (camera instanceof Recommendation) {
            transform(camera);

            camera.traverse(function(elt) {
                elt.raycastable = buttonManager.showArrows;
            });
        }
    });

    // Update coins
    coins.forEach(function(coin) { coin.update(); });

    // Update main camera
    var currentTime = Date.now() - previousTime;
    camera1.update(isNaN(currentTime) ? 20 : currentTime);
    previousTime = Date.now();

    // Update the recommendations
    cameras.map(function(cam) { cam.update(camera1);});

    // Set current position of camera
    camera1.look();

    var left = 0, bottom = 0, width = container_size.width(), height = container_size.height();
    renderer.setScissor(left, bottom, width, height);
    renderer.enableScissorTest(true);
    renderer.setViewport(left, bottom, width, height);
    renderer.render(scene, camera1);

    // Remove borders of preview
    previewer.clear();

    // Hide arrows in recommendation
    cameras.map(function(camera) { if (camera instanceof Recommendation) hide(camera); });

    // Update transparent elements
    THREEx.Transparency.update(camera1);

    // Render preview
    previewer.render(cameraSelecter.prev, container_size.width(), container_size.height());
}

function animate() {
    // Render each frame
    // requestAnimationFrame(animate);

    // stats count the number of frames per second
    stats.begin();
    render();
    stats.end();
}

function onWindowResize() {

    container.style.width = container_size.width() + "px";
    container.style.height = container_size.height() + "px";

    previewer.domElement.width = container_size.width();
    previewer.domElement.height = container_size.height();

    renderer.setSize(container_size.width(), container_size.height());
    cameras.forEach(function(camera) {camera.aspect = container_size.width() / container_size.height();});
    cameras.forEach(function(camera) {camera.updateProjectionMatrix();});
    render();
}

function hide(object) {
    object.traverse(function(object) {object.visible = false;});
}

function show(object) {
    object.traverse(function(object) {object.visible = true;});
}

// onWindowResize will be the only global function
return onWindowResize;

})();

function fullscreen() {
    var container = document.getElementById('container');
    isFullscreen = true;

    if (!beenFullscreen) {
        beenFullscreen = true;
        alert('To quit fullscren mode, type ESC key');
    }

    container.style.position = "absolute";
    container.style.cssFloat = "top-left";
    container.style.top = "50px";
    container.style.bottom = "0px";
    container.style.left = "0px";
    container.style.right = "0px";
    container.style.width="";
    container.style.height="";
    container.style.overflow = "hidden";

    onWindowResize();
}

function stopFullscreen() {
    isFullscreen = false;

    var container = document.getElementById('container');

    container.style.position = "";
    container.style.cssFloat = "";
    container.style.top = "";
    container.style.bottom = "";
    container.style.left = "";
    container.style.right = "";
    container.style.width = container_size.width() + "px";
    container.style.height = container_size.height() + "px";

    onWindowResize();
}