jacy słoniocy

<!doctype html>
<html>
<head>
    <title>Podstawy three.js</title> <!-- tytuł strony  -->
    <meta charset="ISO-8859-2"> <!-- wybrany zestaw znaków umożliwia korzystanie z polskich znaków-->
</head>
<body style="margin: 0;">

<script src="js/three.js"></script> <!-- ładowanie biblioteki z katalogu js-->
<script src="js/OrbitControls.js"></script>
<!-- dodajemy dodatek do biblioteki który umożliwia sterowanie myszš -->

<script>
    var scena, kamera, renderer;
    var kontrolaKamery; //zmienna globalna odpowiadajšca za sterowanie kamerš
    var kameraLustrzana;
    var malpa;
   // var malpa; //zmienna do dodania modelu
    init();
    animate();

    function init()
    {
        // scena
        scena = new THREE.Scene();
        // kamera
        kamera = new THREE.PerspectiveCamera( 45, window.innerWidth/window.innerHeight, 0.1, 20000);
        scena.add(kamera);
        //kamera.position.set(0,150,2000);
        kamera.position.set(0,150,0);
        kamera.lookAt(scena.position);

        //kamera do cube mappingu
        kameraLustrzana = new THREE.CubeCamera( 0.1, 5000, 512 );
        //parametry: near, far, cubeResolution  rozdzielczoć kamery; im mniejsza wartoć tym mniej dokładne odwzorowanie otoczenia i wrażenie bardziej matowej powierzchni.
        scena.add( kameraLustrzana );

        //renderer
        renderer = new THREE.WebGLRenderer( {antialias:true} );
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        //sterowanie kamerš przy pomocy myszy
        kontrolaKamery = new THREE.OrbitControls( kamera, renderer.domElement );

        //dodajemy materiały na każdš ze cian szecianu
        var tablicaMaterialow = [];
        //tutaj dajemy po prostu ciany w różnych kolorach
        /*tablicaMaterialow.push(new THREE.MeshBasicMaterial( { color: 0xff0000, side:
                THREE.BackSide }));
        tablicaMaterialow.push(new THREE.MeshBasicMaterial( { color: 0x00ff00, side:
                THREE.BackSide }));
        tablicaMaterialow.push(new THREE.MeshBasicMaterial( { color: 0x0000ff, side:
                THREE.BackSide }));
        tablicaMaterialow.push(new THREE.MeshBasicMaterial( { color: 0xffff00, side:
                THREE.BackSide }));
        tablicaMaterialow.push(new THREE.MeshBasicMaterial( { color: 0xff00ff, side:
                THREE.BackSide }));
        tablicaMaterialow.push(new THREE.MeshBasicMaterial( { color: 0x00ffff, side:
                THREE.BackSide }));
*/
        //tutaj już tekstury z folderu, zdjęciowe
        tablicaMaterialow.push(new THREE.MeshBasicMaterial( {
            map: THREE.ImageUtils.loadTexture( 'tekstury/px.jpg' ),side: THREE.BackSide }));
        tablicaMaterialow.push(new THREE.MeshBasicMaterial( {
            map: THREE.ImageUtils.loadTexture( 'tekstury/nx.jpg' ),side: THREE.BackSide }));
        tablicaMaterialow.push(new THREE.MeshBasicMaterial( {
            map: THREE.ImageUtils.loadTexture( 'tekstury/py.jpg' ),side: THREE.BackSide }));
        tablicaMaterialow.push(new THREE.MeshBasicMaterial( {
            map: THREE.ImageUtils.loadTexture( 'tekstury/ny.jpg' ),side: THREE.BackSide }));
        tablicaMaterialow.push(new THREE.MeshBasicMaterial( {
            map: THREE.ImageUtils.loadTexture( 'tekstury/pz.jpg' ),side: THREE.BackSide }));
        tablicaMaterialow.push(new THREE.MeshBasicMaterial( {
            map: THREE.ImageUtils.loadTexture( 'tekstury/nz.jpg' ),side: THREE.BackSide }));
        //materiał odbity
        var materialLustrzany = new THREE.MeshBasicMaterial( {
            envMap: kameraLustrzana.renderTarget } );

        //szecian skyboxu
        var skyboxGeometria = new THREE.CubeGeometry( 1000, 1000, 1000);
        //var skyboxMaterial = new THREE.MeshLambertMaterial( {
        //    color: 0x00ff00, side: THREE.BackSide });
        var skyboxMaterial = new THREE.MeshFaceMaterial( tablicaMaterialow );
        //dodajemy skybox do sceny
        var skybox = new THREE.Mesh( skyboxGeometria, skyboxMaterial );
        scena.add( skybox );

        //wiatło
        //var swiatloPunktowe = new THREE.PointLight( 0xffffff, 2, 1000 );
        //scena.add(swiatloPunktowe);
        // swiatloPunktowe.position.set(100,100,100);

        //dodajemy model
         //zmienna do dodania modelu
        var zrodlo = "monkey.js";
        var loader = new THREE.JSONLoader(); //ładujemy model
        loader.load( zrodlo, function(geometriaModelu){
            //var malpaMaterial = new THREE.MeshBasicMaterial({color: 0x00ff00}); //tutaj malpa będzie zielona
            //malpa = new THREE.Mesh(geometriaModelu, malpaMaterial);
            malpa = new THREE.Mesh(geometriaModelu, materialLustrzany);
            malpa.position.set(0,0,0);
            malpa.scale.set(10,10,10);
            scena.add(malpa);
        });

        /* UWAGA! po wyjciu z funkcji anonimowej wszystkie zmienne użyte
        w jej wnętrzu stanš się niedostępne, więc jeli nie zostałaby utworzona zmienna globalna
        przechowujšca odwołanie do modelu, model zostałby dodany do sceny i wywietlany, ale nie
        można by się do niego w żaden sposób odwołać */


        //kamerę lustrzanš ustawiamy w rodku modelu który ma odbijać obraz
       //kameraLustrzana.position = malpa.position;

    }

    function animate()
    {
        requestAnimationFrame( animate );
        render(malpa);
        kontrolaKamery.update();

        //obracanie modelu
        malpa.rotation.x += 0.01;
    }

    function render(malpa)
    {
        //console.log(global.malpa);
        renderer.render( scena, kamera );
        //instrukcja uaktualniajšca obraz z kamery lustrzanej
      malpa.visible=false; //ukrywamy model
      kameraLustrzana.updateCubeMap( renderer, scena );
      malpa.visible=true; //z powrotem uwidaczniamy model

    }

</script>

</body>
</html>