Minta ZH


<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <title>Minta ZH</title>
    <script src="three.min.javascript"></script>
    <style>
        body { 
            margin: 0; 
            padding:0; 
            overflow: hidden; 
            position:relative; 
        }
        canvas { 
            width: 100%; 
            height: 100% 
            z-index: 0;
        }
        #caption {
            position: absolute;
            top: 10px;
            left: 10px;
            width: 50%;
            height: 50%;
            text-align: left;
            z-index: 100;
            display: block;
            color: yellow;
        }
    </style>
  </head>
  <body onload="init()">
      <div id="caption">Elektro M. Ágnes</div>
      <script>
        function init(){
            "use strict";
        
            var HEIGHT = window.innerHeight;
            var WIDTH = window.innerWidth;
            var aspectRatio = WIDTH / HEIGHT; 
        
            var renderer = new THREE.WebGLRenderer( { antialias: true } );
            renderer.setSize( WIDTH, HEIGHT );
            renderer.setClearColor( 0x000000 );
            document.body.appendChild( renderer.domElement );
        
            var scene = new THREE.Scene();
        
            var camera = new THREE.PerspectiveCamera( 75, aspectRatio, 0.1, 100000 );
            camera.position.x = 200
            camera.position.y = 300;
            camera.position.z = 400;
            camera.lookAt( scene.position );

            var textureLoader = new THREE.TextureLoader();
        
            var groundGeometry = new THREE.PlaneGeometry(1024, 1024);
            var groundMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff } );
            var groundMesh = new THREE.Mesh( groundGeometry, groundMaterial );
            groundMesh.rotation.x=radian(-90);
            groundMaterial.map = textureLoader.load( 'marstex2.jpg' );
            groundMesh.material.side = THREE.DoubleSide;
            scene.add( groundMesh );
        
            var object_height=60;
	    var para_height=10;
            
            var coneGeometry = new THREE.ConeGeometry( 30, para_height, 32 );
            var coneMaterial = new THREE.MeshPhongMaterial( { color: 0x0000ff } );
            var coneMesh = new THREE.Mesh( coneGeometry, coneMaterial );
            coneMesh.position.x=0;
            coneMesh.position.y=0;
            coneMesh.position.z=0;

            var boxGeometry = new THREE.BoxGeometry( 6, 6, 6 );
            var boxMaterial = new THREE.MeshPhongMaterial( { color: 0x00ff00 } );
            var boxMesh = new THREE.Mesh( boxGeometry, boxMaterial );
            boxMesh.position.x=0;
            boxMesh.position.y=0-object_height;
            boxMesh.position.z=0;
            
            var wireGeometry = new THREE.ConeGeometry( 30, 0-object_height, 8 );
            var wireMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000 , wireframe:true} );
            var wireMesh = new THREE.Mesh( wireGeometry, wireMaterial );
            wireMesh.position.x=0;
            wireMesh.position.y=0-object_height/2;
            wireMesh.position.z=0;
            
            coneGeometry.applyMatrix( new THREE.Matrix4().makeTranslation( 0, para_height/2, 0 ) );
            coneMesh.add( boxMesh );
            coneMesh.add( wireMesh );
            
            scene.add( coneMesh );
        
            var ambientLight = new THREE.AmbientLight( 0x708090, 0.4 );
            scene.add( ambientLight );
             
            var spotLight = new THREE.SpotLight( 0xffffff, 1 );
            spotLight.position.set( -1000,1000,0 );
            spotLight.angle = radian(11.25);
            spotLight.distance = 2000;
            spotLight.penumbra = 0.8;
            scene.add( spotLight );
        
            renderer.shadowMap.enabled = true;
            groundMesh.receiveShadow=true;
            boxMesh.receiveShadow=true;
            boxMesh.castShadow = true;
            wireMesh.castShadow = true;
            coneMesh.castShadow = true;
            spotLight.castShadow = true;

            window.addEventListener( 'resize', handleWindowResize, false );
            render();
        
            function radian(fok){
                return fok * Math.PI / 180;
            }
        
            function handleWindowResize() {
                HEIGHT = window.innerHeight;
                WIDTH = window.innerWidth;
                renderer.setSize( WIDTH, HEIGHT );
                aspectRatio = WIDTH / HEIGHT;
                camera.aspect = aspectRatio;
                camera.updateProjectionMatrix();
            }

            function render() {
                requestAnimationFrame( render );
        
                var seconds = new Date().getTime()/1000; 
                var omega=Math.sqrt(object_height/10);
                var fi = radian(4)*Math.cos(omega*seconds);
                var ro = radian(4)*Math.sin(omega*seconds);
                coneMesh.rotation.z=fi;
                coneMesh.rotation.x=ro;

                var drop = (10*seconds)%300;
                var posY=object_height+300-drop;
                coneMesh.position.y=posY;
        
                renderer.render( scene, camera );
            }
        }
    </script>
  </body>
</html>