Renders 3D scene with GLTF model

HTML

<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/loaders/GLTFLoader.js"></script>

<div id="canvas-container"></div>

CSS

body {
            margin: 0;
            padding: 0;
            background-color: transparent;
            overflow: hidden;
        }
        #canvas-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
        }

JavaScript

// Initialize Three.js
        const renderer = new THREE.WebGLRenderer({
            antialias: true,
            alpha: true
        });
        renderer.setClearColor(0x000000, 0);
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.getElementById('canvas-container').appendChild(renderer.domElement);

        // Scene setup
        const scene = new THREE.Scene();
        scene.background = null;

        // Camera setup
        const camera = new THREE.PerspectiveCamera(
            45,
            window.innerWidth / window.innerHeight,
            0.1,
            1000
        );
        camera.position.z = 5;

        // Lighting
        const ambientLight = new THREE.AmbientLight(0xffffff, 0.8);
        scene.add(ambientLight);
        
        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.6);
        directionalLight.position.set(1, 1, 1);
        scene.add(directionalLight);

        // Animation control
        let model;
        const spinDuration = 2.5; // seconds for one full spin + scale
        let animationStartTime;

        // Load model
        const loader = new THREE.GLTFLoader();
        loader.load(
            'https://websolutions.my/x8/v2/tiktok.glb',
            (gltf) => {
                model = gltf.scene;
                
                // Center the model
                const box = new THREE.Box3().setFromObject(model);
                const center = box.getCenter(new THREE.Vector3());
                model.position.sub(center);
                
                // Set initial state (very small)
                model.scale.set(0.01, 0.01, 0.01);
                scene.add(model);
                
                // Start animation
                animationStartTime = Date.now();
                animate();
            },
            undefined,
            (error) => console.error('Error loading model:', error)
        );

    ...