anımatıon

Open In Editor Video Publish Your Code

<!DOCTYPE html>
<html>
<head>
    <title>Gerçekçi Uçak İniş Simülasyonu</title>
    <style>
        body { margin: 0; overflow: hidden; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script>
        // Sahne, kamera ve renderer
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setClearColor(0x87CEEB); // Mavi gökyüzü
        document.body.appendChild(renderer.domElement);

// Işık
        const light = new THREE.DirectionalLight(0xffffff, 1);
        light.position.set(0, 10, 10);
        scene.add(light);
        scene.add(new THREE.AmbientLight(0x404040));

// Pist ve çevre düzenleme
        createEnvironment();

// Detaylı uçak modeli
        const airplane = createDetailedAirplane();
        airplane.position.set(0, 10, 50);
        airplane.rotation.x = Math.PI / 8;
        scene.add(airplane);

// Yolcular için küçük noktalar (uçaktan çıkacaklar)
        const passengers = [];
        
        // Kamera pozisyonu
        camera.position.set(5, 8, 40);
        camera.lookAt(0, 0, 0);

// Animasyon kontrol değişkenleri
        let animationPhase = 0; // 0: uçuş, 1: iniş, 2: durma, 3: yolcular iniyor
        let passengerTimer = 0;

function createEnvironment() {
            // Pist
            const runwayGeometry = new THREE.PlaneGeometry(20, 100);
            const runwayMaterial = new THREE.MeshStandardMaterial({ color: 0x333333, roughness: 0.7 });
            const runway = new THREE.Mesh(runwayGeometry, runwayMaterial);
            runway.rotation.x = -Math.PI / 2;
            runway.position.z = -30;
            scene.add(runway);

// Pist çizgileri (daha gerçekçi)
            for (let i = 0; i < 20; i++) {
                const lineGeometry = new THREE.PlaneGeometry(1.5, 5);
                const lineMaterial = new THREE.MeshStandardMaterial({ color: 0xF1C40F });
                const line = new THREE.Mesh(lineGeometry, lineMaterial);
                line.rotation.x = -Math.PI / 2;
                line.position.set(0, 0.1, -80 + i * 8);
                scene.add(line);
            }

// Terminal binası (basit)
            const terminalGeometry = new THREE.BoxGeometry(15, 3, 8);
            const terminalMaterial = new THREE.MeshStandardMaterial({ color: 0x3498DB });
            const terminal = new THREE.Mesh(terminalGeometry, terminalMaterial);
            terminal.position.set(12, 1.5, -40);
            scene.add(terminal);

// Çim alan
            const grassGeometry = new THREE.PlaneGeometry(200, 200);
            const grassMaterial = new THREE.MeshStandardMaterial({ color: 0x27AE60 });
            const grass = new THREE.Mesh(grassGeometry, grassMaterial);
            grass.rotation.x = -Math.PI / 2;
            grass.position.y = 0.01;
            scene.add(grass);
        }

// Animasyon
        function animate() {
            requestAnimationFrame(animate);

// Uçak animasyonu
            if (animationPhase === 0) {
                // Yaklaşma
                airplane.position.z -= 0.25;
                if (airplane.position.z < 20) {
                    animationPhase = 1;
                }
            } else if (animationPhase === 1) {
                // İniş
                airplane.position.z -= 0.15;
                airplane.position.y = Math.max(0.5, airplane.position.y - 0.03);
                
                if (airplane.rotation.x > 0) {
                    airplane.rotation.x -= 0.001;
                }
                
                // Kanatlar hafifçe sallansın
                const wingWave = Math.sin(Date.now() * 0.003) * 0.05;
                airplane.children[1].rotation.z = wingWave; // Sol kanat
                airplane.children[2].rotation.z = -wingWave; // Sağ kanat
                
                if (airplane.position.z < -25) {
                    animationPhase = 2;
                }
            } else if (animationPhase === 2) {
                // Durma
                if (airplane.position.z > -28) {
                    airplane.position.z -= 0.05;
                } else {
                    animationPhase = 3;
                }
            } else if (animationPhase === 3) {
                // Yolcular iniyor
                passengerTimer += 0.1;
                if (passengerTimer > 1 && passengers.length < 20) {
                    createPassenger();
                    passengerTimer = 0;
                }
                
                // Yolcuları hareket ettir
                passengers.forEach(p => {
                    const dx = p.targetX - p.mesh.position.x;
                    const dz = p.targetZ - p.mesh.position.z;
                    
                    p.mesh.position.x += dx * p.speed;
                    p.mesh.position.z += dz * p.speed;
                    
                    // Yolcuları pist üzerinde tut
                    p.mesh.position.y = 0.2;
                });
            }

// Kamera takibi
            if (animationPhase < 3) {
                camera.position.z = airplane.position.z + 10;
                camera.lookAt(airplane.position);
            }

renderer.render(scene, camera);
        }

// Pencere boyutu değişikliği
        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });

animate();
    </script>
</body>
</html>

anımatıon

Recommended

Parallax scroll animation

CSS Glassmorphism Button with Shine Animation

CSS Loading Animation with Background Image

HTML

CSS

JS

Recommended

Parallax scroll animation

CSS Glassmorphism Button with Shine Animation

CSS Loading Animation with Background Image

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS