THREEjs Panorama

awesome bg panarama with thee.js

HTML

<script src="http://mrdoob.github.com/three.js/build/three.min.js"></script>
<div id="container"></div>

CSS

body {
    background-color: rgb(200,200,200);
    margin: 0px;
    overflow: hidden;
}

JavaScript

var camera, scene, renderer;

var texture_placeholder,
isUserInteracting = false,
onMouseDownMouseX = 0, onMouseDownMouseY = 0,
lon = 90, onMouseDownLon = 0,
lat = 0, onMouseDownLat = 0,
phi = 0, theta = 0,
target = new THREE.Vector3();

init();

function init() {

    var container, mesh;

    container = document.getElementById( 'container' );

    camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1100 );

    scene = new THREE.Scene();

    texture_placeholder = document.createElement( 'canvas' );
    texture_placeholder.width = 128;
    texture_placeholder.height = 128;

    var context = texture_placeholder.getContext( '2d' );
    context.fillStyle = 'rgb( 200, 200, 200 )';
    context.fillRect( 0, 0, texture_placeholder.width, texture_placeholder.height );

    var materials = [

        loadTexture( 'http://mrdoob.github.com/three.js/examples/textures/cube/skybox/px.jpg' ), // right
        loadTexture( 'http://mrdoob.github.com/three.js/examples/textures/cube/skybox/nx.jpg' ), // left
        loadTexture( 'http://mrdoob.github.com/three.js/examples/textures/cube/skybox/py.jpg' ), // top
        loadTexture( 'http://mrdoob.github.com/three.js/examples/textures/cube/skybox/ny.jpg' ), // bottom
        loadTexture( 'http://mrdoob.github.com/three.js/examples/textures/cube/skybox/pz.jpg' ), // back
        loadTexture( 'http://mrdoob.github.com/three.js/examples/textures/cube/skybox/nz.jpg' ) // front

    ];

    mesh = new THREE.Mesh( new THREE.CubeGeometry( 300, 300, 300, 7, 7, 7, materials ), new THREE.MeshFaceMaterial() );
    mesh.scale.x = - 1;
    scene.add( mesh );

    for ( var i = 0, l = mesh.geometry.vertices.length; i < l; i ++ ) {

        var vertex = mesh.geometry.vertices[ i ];

        vertex.normalize();
        vertex.multiplyScalar( 550 );

    }

    renderer = new THREE.CanvasRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );

    container.appendChild( renderer.domElement );

...