animation

Ouvrir dans l'éditeur Publiez votre code

Recommandé

19 May 2025

Animation de défilement parallaxe

HTML

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

animation

Recommandé

animation moderne

Animation de texte de liens

Animation de défilement parallaxe

HTML

CSS

JS

Recommandé

animation moderne

Animation de texte de liens

Animation de défilement parallaxe

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS