animation

1,392 kevekıbhack

Ouvrir dans l'éditeur Publiez votre code

Recommandé

23 August 2025

Structure HTML du conteneur d'animation CSS

31 January 2026

Animation

22 September 2025

Extrait d'animation HTML Neuron

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>

CSS