Untitled

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <title>Three.js Object Tester</title>
    <style>
        body { margin: 0; overflow: hidden; }
        canvas { width: 100%; height: 100% }


        #info {
            position: absolute;
            top: 10px;
            left: 10px;
            color: white;
            font-size: 36px;
            width: 100%;

            z-index: 100;
            display:block;
        }
    </style>
</head>
<div id="info">Brnic Miroslav</div>
<body onload="init()">
<script src="js-r96/three.js"></script>
<script src="js-r96/TrackballControls.js"></script>
<script src="js-r96/tween.min.js"></script>
<script>
    // Globális változók


    var WIDTH, HEIGHT, aspectRatio;
    var renderer;
    var scene, camera;
    var controls;
    var axesHelper = new THREE.AxesHelper( 500 );
    var textureLoader = new THREE.TextureLoader();
    var isTweening = false;
    var moving_group;
    var irany = 1;
    function init() {


        // Böngésző ablakméret lekérése és méretarány számítása
        HEIGHT = window.innerHeight;
        WIDTH = window.innerWidth;
        aspectRatio = WIDTH / HEIGHT;


        // Renderer létrehozása és DOM-hoz adása
        renderer = new THREE.WebGLRenderer( { antialias: true } );
        renderer.setSize( WIDTH, HEIGHT );
        renderer.setClearColor( 0x000000 );


        renderer.setSize( WIDTH, HEIGHT );
        renderer.shadowMap.enabled = true;
        document.body.appendChild( renderer.domElement );

        // Színtér létrehozása
        scene = new THREE.Scene();
        scene.add( axesHelper );


        // Kamera létrehozása és vetítési paramétereinek beállítása
        camera = new THREE.PerspectiveCamera( 75, aspectRatio, 0.1, 1000 );
        camera.position.set( 0, 100, 100 );
        camera.lookAt( scene.position );

        // Objektumok létrehozása

        var groundGeometry = new THREE.PlaneGeometry( 200, 200 );
        var groundMaterial = new THREE.MeshPhongMaterial( {
            wireframe: false,
            wireframe: false,
            side: THREE.DoubleSide
        } );

        var texture = textureLoader.load( '../../assets/marstex2.jpg' );

        groundMaterial.map = texture;
        var groundMesh = new THREE.Mesh( groundGeometry, groundMaterial );
        groundMesh.rotation.x = -1.0 * THREE.Math.degToRad( 90 );
        groundMesh.castShadow = false;
        groundMesh.receiveShadow = true;
        scene.add( groundMesh );


        /////////////////////////Ejtőernyő//////////////////
        var coneGeometry = new THREE.ConeGeometry( 5, 4, 16 );
        var coneMaterial = new THREE.MeshPhongMaterial( { color: 'red', wireframe: false } );
        var coneMesh = new THREE.Mesh( coneGeometry, coneMaterial );
        coneMesh.castShadow = true;
        coneMesh.receiveShadow = false;


        coneMesh.position.set( 0,0, 0 );


        ////////////

        //////////////Kötél////////////////

        var coneGeometry1 = new THREE.ConeGeometry( 5, 6, 10 );
        var coneMaterial1 = new THREE.MeshPhongMaterial( { color: 'blue', wireframe: true } );
        var coneMesh1 = new THREE.Mesh( coneGeometry1, coneMaterial1 );
        coneMesh1.castShadow = true;
        coneMesh1.receiveShadow = false;


        coneMesh1.position.set( 0,-5, 0 );
        coneMesh1.rotation.x = -1.0 * THREE.Math.degToRad( 180 );


        /////////////////////////////////////


        ////////////Kocka////////////


        var boxGeometry = new THREE.BoxGeometry( 3, 3, 3 );
        var boxMaterial = new THREE.MeshPhongMaterial( { color: "orange" , wireframe: false} );
        var boxMesh = new THREE.Mesh( boxGeometry, boxMaterial );
        boxMesh.castShadow = true;
        boxMesh.receiveShadow = false;


        boxMesh.position.set(0,-6.5,0)
        ////////////////////


        ////////////Group////////
        this.moving_group = new THREE.Group();


        moving_group.add( coneMesh );
        moving_group.add( coneMesh1 );
        moving_group.add( boxMesh );


        moving_group.position.set(0,50,0);


        scene.add( moving_group );


        /////////////////////////


        ////////////AMbiens fény///////////


        var ambientLight = new THREE.AmbientLight( "gray", 0.5 );
        scene.add( ambientLight );
        /////////////
        //
        // ...
        //


        //////Reflektor fény///////
        var sLight = new THREE.SpotLight( "white", 1 );
        sLight.position.set( -30, 50, 5 );
        sLight.angle = Math.PI / 3;
        sLight.target = moving_group;
        sLight.penumbra = 0.9;
        sLight.distance = 0;
        sLight.castShadow = true;

        var spotLightHelper = new THREE.SpotLightHelper( sLight );
        scene.add( spotLightHelper );
        scene.add( sLight );


        ///////////
        // Az ablak későbbi átméretezése esetén visszahívható függvény megadása
        window.addEventListener( 'resize', handleWindowResize, false );

        // Kamera vezérlés
        controls = new THREE.TrackballControls( camera, renderer.domElement );
        controls.rotateSpeed = 5.0;
        controls.panSpeed = 1.0;

        // Első képkocka rajzolása


        render();


    }

    function handleWindowResize() {
        // Az ablak átméretezése esetén a kamera vetítési paraméterek újraszámolása
        HEIGHT = window.innerHeight;
        WIDTH = window.innerWidth;
        console.log( 'WIDTH=' + WIDTH + '; HEIGHT=' + HEIGHT );

        aspectRatio = WIDTH / HEIGHT;
        camera.aspect = aspectRatio;
        camera.updateProjectionMatrix();
    }

    var render = function () {
        // Újabb képkocka rajzolásának kérése.
        // Maximálisan 60 FPS-t biztosít a rendszer.
        requestAnimationFrame( render );
        // Kamera vezérlés

        if (moving_group.rotation.z >= THREE.Math.degToRad(40)){
            irany = 1;
        }else if (moving_group.rotation.z <= THREE.Math.degToRad(-40)){
            irany = 0;
        }


        if (irany == 0 && moving_group.rotation.z < THREE.Math.degToRad(40)){
            moving_group.rotation.z += THREE.Math.degToRad(1);
        }else if (irany == 1 && moving_group.rotation.z > THREE.Math.degToRad(-40)){
            moving_group.rotation.z -= THREE.Math.degToRad(1);
        }


        if(this.moving_group.position.y > 7){
            this.moving_group.position.y -= 0.07;

        }else{
            this.moving_group.position.y = 50;

        }


        controls.update();

        // 3D -> 2D vetített kép kiszámítása.
        // scene 3D színtér képe a camera kamera szemszögéből.
        renderer.render( scene, camera );
    };


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