Untitled

<!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;


    //dodajemy model
    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 sześcianu
        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 } );

        //sześcian 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);

        //ładujemy model
        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 wyjściu z funkcji anonimowej wszystkie zmienne użyte
         w jej wnętrzu staną się niedostępne, więc jeśli nie zostałaby utworzona zmienna globalna
         przechowująca odwołanie do modelu, model zostałby dodany do sceny i wyświetlany, 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();
        kontrolaKamery.update();

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

    function render()
    {
        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>