Sindbad~EG File Manager

Current Path : /home/u625735752/domains/muttrahinternational.com/public_html/
Upload File :
Current File : /home/u625735752/domains/muttrahinternational.com/public_html/3js.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three.js 3D Model with Animation</title>
    <style>
        html, body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #webgl-output {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="webgl-output"></div>

    <!-- Three.js library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <!-- OrbitControls library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/controls/OrbitControls.js"></script>
    <!-- GLTFLoader library for loading GLTF/GLB models -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/loaders/GLTFLoader.js"></script>

    <script>
        // Set up the scene
        const scene = new THREE.Scene();

        // Set up the camera
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.set(0, 1, 3); // Position the camera

        // Set up the renderer
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.getElementById('webgl-output').appendChild(renderer.domElement);

        // Set up OrbitControls
        const controls = new THREE.OrbitControls(camera, renderer.domElement);
        controls.enableDamping = true;
        controls.dampingFactor = 0.25;
        controls.enableZoom = true;
        controls.enablePan = true;

        // Set up a basic light
        const light = new THREE.HemisphereLight(0xffffbb, 0x080820, 1);
        scene.add(light);

        // Load the 3D model
        const loader = new THREE.GLTFLoader();
        loader.load('path/to/your/model.glb', function (gltf) {
            const model = gltf.scene;
            scene.add(model);

            // Start the animation loop if the model has animations
            if (gltf.animations.length) {
                const mixer = new THREE.AnimationMixer(model);
                gltf.animations.forEach((clip) => {
                    mixer.clipAction(clip).play();
                });
                
                // Animation update function
                function animate() {
                    requestAnimationFrame(animate);
                    mixer.update(0.01); // Update animations
                    controls.update(); // Update controls
                    renderer.render(scene, camera);
                }
                animate();
            }
        });

        // Handle window resize
        window.addEventListener('resize', () => {
            renderer.setSize(window.innerWidth, window.innerHeight);
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
        });

        // Initial render
        renderer.render(scene, camera);
    </script>
</body>
</html>

Sindbad File Manager Version 1.0, Coded By Sindbad EG ~ The Terrorists