Untitled

<!doctype html>
<html lang="en">
<head>
        <title>Skybox (Three.js)</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <link rel=stylesheet href="css/base.css"/>
</head>
<body>

<script src="three.js"></script>
<script src="Detector.js"></script>
<script src="stats.js"></script>
<script src="OrbitControls.js"></script>
<script src="THREEx.KeyboardState.js"></script>
<script src="THREEx.FullScreen.js"></script>
<script src="THREEx.WindowResize.js"></script>

<!-- jQuery code to display an information button and box when clicked. -->
<script src="jquery-1.9.1.js"></script>
<script src="jquery-ui.js"></script>
<link rel=stylesheet href="jquery-ui.css" />
<link rel=stylesheet href="info.css"/>
<script src="info.js"></script>
<div id="infoButton"></div>
<div id="infoBox" title="Demo Information">
This three.js demo is part of a collection at
<a href="http://stemkoski.github.io/Three.js/">http://stemkoski.github.io/Three.js/</a>
</div>
<!-- ------------------------------------------------------------ -->

<div id="ThreeJS" style="position: absolute; left:0px; top:0px"></div>
<script>
/*
        Three.js "tutorials by example"
        Author: Lee Stemkoski
        Date: July 2013 (three.js v59dev)
*/

// MAIN

// standard global variables
var container, scene, camera, renderer, controls, stats;
var keyboard = new THREEx.KeyboardState();
var clock = new THREE.Clock();
// custom global variables
var cube;

// CUSTOM
var polyhedron, sphere, cube2, mirrorSphere, sphere2;

init();
animate();

// FUNCTIONS
function init()
{
        // SCENE
        scene = new THREE.Scene();
        function createMesh(geom, imageFile) {
            var texture = THREE.ImageUtils.loadTexture("textures/" + imageFile)
            var mat = new THREE.MeshPhongMaterial();
            mat.map = texture;

            var mesh = new THREE.Mesh(geom, mat);
            return mesh;
        }
        // CAMERA
        var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
        var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;
        camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
        scene.add(camera);
        camera.position.set(0,150,400);
        camera.lookAt(scene.position);
        // RENDERER
        if ( Detector.webgl )
                renderer = new THREE.WebGLRenderer( {antialias:true} );
        else
                renderer = new THREE.CanvasRenderer();
        renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
        container = document.getElementById( 'ThreeJS' );
        container.appendChild( renderer.domElement );
        // EVENTS
        THREEx.WindowResize(renderer, camera);
        THREEx.FullScreen.bindKey({ charCode : 'm'.charCodeAt(0) });
        // CONTROLS
        controls = new THREE.OrbitControls( camera, renderer.domElement );
        // STATS
        stats = new Stats();
        stats.domElement.style.position = 'absolute';
        stats.domElement.style.bottom = '0px';
        stats.domElement.style.zIndex = 100;
        container.appendChild( stats.domElement );
        // LIGHT
        var light = new THREE.PointLight(0xffffff);
        light.position.set(0,250,0);
        scene.add(light);
        // FLOOR
        var floorTexture = new THREE.ImageUtils.loadTexture( 'textures/checkerboard.jpg' );
        floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping;
        floorTexture.repeat.set( 10, 10 );
        var floorMaterial = new THREE.MeshBasicMaterial( { map: floorTexture, side: THREE.DoubleSide } );
        var floorGeometry = new THREE.PlaneGeometry(100, 100, 10, 10);
        var floor = new THREE.Mesh(floorGeometry, floorMaterial);
        floor.position.y = -0.5;
        floor.rotation.x = Math.PI / 2;


        polyhedron = createMesh(new THREE.IcosahedronGeometry(5, 0), "metal-rust.jpg");
        polyhedron.position.x = 12;
        scene.add(polyhedron);

        sphere = createMesh(new THREE.SphereGeometry(5, 20, 20), "floor-wood.jpg");
        scene.add(sphere);

        cube2 = createMesh(new THREE.CubeGeometry(5, 5, 5), "brick-wall.jpg");
        cube2.position.x = -12;
        scene.add(cube2);
        console.log(cube2.geometry.faceVertexUvs);


        ////////////
        // CUSTOM //
        ////////////


        // axes
        var axes = new THREE.AxisHelper(100);
        scene.add( axes );

        var imagePrefix = "textures/dawnmountain-";
        var directions  = ["xpos", "xneg", "ypos", "yneg", "zpos", "zneg"];
        var imageSuffix = ".png";
        var skyGeometry = new THREE.CubeGeometry( 5000, 5000, 5000 );

        var materialArray = [];
        for (var i = 0; i < 6; i++)
                materialArray.push( new THREE.MeshBasicMaterial({
                        map: THREE.ImageUtils.loadTexture( imagePrefix + directions[i] + imageSuffix ),
                        side: THREE.BackSide
                }));
        var skyMaterial = new THREE.MeshFaceMaterial( materialArray );
        var skyBox = new THREE.Mesh( skyGeometry, skyMaterial );
        scene.add( skyBox );

        var sphereGeom =  new THREE.SphereGeometry( 50, 32, 16 ); // radius, segmentsWidth, segmentsHeight
        mirrorSphereCamera = new THREE.CubeCamera( 0.1, 5000, 512 );
        // mirrorCubeCamera.renderTarget.minFilter = THREE.LinearMipMapLinearFilter;
        scene.add( mirrorSphereCamera );
        var mirrorSphereMaterial = new THREE.MeshBasicMaterial( { envMap: mirrorSphereCamera.renderTarget } );
        mirrorSphere = new THREE.Mesh( sphereGeom, mirrorSphereMaterial );
        mirrorSphere.position.set(75,50,0);
        mirrorSphereCamera.position = mirrorSphere.position;
        scene.add(mirrorSphere);

        function createMeshehehe(geom, imageFile, bump) {
            var texture = THREE.ImageUtils.loadTexture("textures/" + imageFile)
            geom.computeVertexNormals();
            var mat = new THREE.MeshPhongMaterial();
            mat.map = texture;

            if (bump) {
                var bump = THREE.ImageUtils.loadTexture("textures/" + bump)
                mat.bumpMap = bump;
                mat.bumpScale = 0.2;
                console.log('d');
            }


            // create a multimaterial
            var mesh = new THREE.Mesh(geom, mat);

            return mesh;
        }

        sphere2 = createMeshehehe(new THREE.CubeGeometry(15, 15, 2), "stone.jpg", "stone-bump.jpg");
        sphere2.rotation.y = 8;
        sphere2.position.x = -56;
        scene.add(sphere2);
        console.log(sphere2.geometry.faceVertexUvs);
}

function animate()
{
    requestAnimationFrame( animate );

    polyhedron.rotation.y += 0.01;
    polyhedron.rotation.x += 0.03;

    sphere.rotation.y += 0.02;
    sphere.rotation.x -= 0.01;

    cube2.rotation.y -= 0.03;
    cube2.rotation.x += 0.03;

    mirrorSphere.rotation.y -= 0.02;
    mirrorSphere.rotation.x -= 0.03;

    sphere2.rotation.y -= 0.05;
    sphere2.rotation.x += 0.03;

    render();
    update();
}

function update()
{
        if ( keyboard.pressed("z") )
        {
                // do something
        }

        controls.update();
        stats.update();
}

function render()
{
    mirrorSphere.visible = false;
    mirrorSphereCamera.updateCubeMap(renderer, scene);
    mirrorSphere.visible = true;
    renderer.render( scene, camera );

}

</script>

</body>
</html>