Panorama-Viewer
/
test.html

<html>
<head>
    <style>
        body{
            margin: 0;
        }
        canvas{
            width: 100%;
            height: 100%
        }
    </style>
    <script src="js\three.js"></script>
    <script src="js\OrbitControls.js"></script>
    <script src="js\dat.gui.min.js"></script>

</head>
<body>
<script>
    THREE.ImageLoader2 = function ( manager ) {

        this.manager = ( manager !== undefined ) ? manager : THREE.DefaultLoadingManager;

    };

    THREE.ImageLoader2.prototype = {

        constructor: THREE.ImageLoader2,

        load: function ( url, onLoad, onProgress, onError ) {
            var _url = url;
            url += '.jpg';
            var scope = this;

            var cached = THREE.Cache.get( url );

            if ( cached !== undefined ) {

                scope.manager.itemStart( url );

                if ( onLoad ) {

                    setTimeout( function () {

                        onLoad( cached );

                        scope.manager.itemEnd( url );

                    }, 0 );

                } else {

                    scope.manager.itemEnd( url );

                }

                return cached;

            }

            var e = document.createElement('img');
            e.src = _url + '_2.jpg';
            var image = document.createElement( 'img' );

            e.addEventListener( 'load', function ( event ) {

                console.log('success to load :' + e.src);
                if ( onLoad ) onLoad( this );

            }, false );

            image.addEventListener( 'load', function ( event ) {

                THREE.Cache.add( url, this );

                if ( onLoad ) onLoad( this );

                scope.manager.itemEnd( url );

            }, false );

            if ( onProgress !== undefined ) {

                image.addEventListener( 'progress', function ( event ) {

                    onProgress( event );

                }, false );

            }

            image.addEventListener( 'error', function ( event ) {

                if ( onError ) onError( event );

                scope.manager.itemError( url );

            }, false );

            if ( this.crossOrigin !== undefined ) image.crossOrigin = this.crossOrigin;

            scope.manager.itemStart( url );

            image.src = url;

            return image;

        },

        setCrossOrigin: function ( value ) {

            this.crossOrigin = value;

        }

    };
</script>

<script>
    // panoramas background
    var panoramaPath = "PanoramaData/r1/ladybug_panoramic_001915";

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

    // creating a new scene
    var scene = new THREE.Scene();

    // adding a camera
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.set( 0, 0, 100 );
    camera.target = new THREE.Vector3(0, 0, 0);

    //control
    controls = new THREE.OrbitControls( camera );
    controls.enablePan = false;
    controls.minDistance = 10;
    //controls.maxDistance = 80;

    // creation of a big sphere geometry
    var sphere = new THREE.SphereGeometry(40, 200, 200);  //widthSegments >= 8 , heightSegments >= 4
    sphere.applyMatrix(new THREE.Matrix4().makeScale(-1, 1, 1));

    // creation of the sphere material
    var sphereMaterial = new THREE.MeshBasicMaterial();
    var texture = new THREE.Texture();
    var loader = new THREE.ImageLoader2();
    loader.load(panoramaPath,function(image){
        texture.image = image;
        texture.needsUpdate = true;
    },false);
    sphereMaterial.map = texture;

    // geometry + material = mesh (actual object)
    var sphereMesh = new THREE.Mesh(sphere, sphereMaterial);
    scene.add(sphereMesh);

    var axisHelper = new THREE.AxisHelper( 50 );
    scene.add( axisHelper );

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

    render();

    function render(){

        requestAnimationFrame(render);
        // moving the camera according to current latitude (vertical movement) and longitude (horizontal movement)
        camera.lookAt(camera.target);
        controls.update();
        // calling again render function
        renderer.render(scene, camera);

    }

    function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize( window.innerWidth, window.innerHeight );

    }

</script>
</body>
</html>