Three.js Snippets

load_animate_3d_models.js

import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

// Scene setup
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 5, 10);

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Add lights
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 5, 5).normalize();
scene.add(light);

// Load the GLB model
const loader = new GLTFLoader();
loader.load(
    '/path/to/your-model.glb',
    (gltf) => {
        const model = gltf.scene;
        scene.add(model);

        // Log the model's structure
        console.log(model);

        // Handle animations (if any)
        if (gltf.animations && gltf.animations.length > 0) {
            const mixer = new THREE.AnimationMixer(model);
            const action = mixer.clipAction(gltf.animations[0]);
            action.play();

            const clock = new THREE.Clock();
            function animate() {
                const delta = clock.getDelta();
                mixer.update(delta);
                requestAnimationFrame(animate);
            }
            animate();
        }

        // Traverse the model to find skinned meshes and bones
        model.traverse((node) => {
            if (node.isSkinnedMesh) {
                console.log('Skinned Mesh:', node);
            }
            if (node.isBone) {
                console.log('Bone:', node);
            }
        });
    },
    (progress) => {
        console.log((progress.loaded / progress.total) * 100 + '% loaded');
    },
    (error) => {
        console.error('Error loading model:', error);
    }
);

// Render loop
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();

load_glb_models.js

// Create a GLTFLoader instance
const loader = new GLTFLoader();

// Load the GLB file
loader.load(
    '/path/to/your-model.glb', // Path to your GLB file
    (gltf) => {
        // Model loaded successfully
        const model = gltf.scene;
        scene.add(model); // Add the model to the scene

        // Optionally, log the model's structure
        console.log(model);

        // If the model has animations, you can play them here
        if (gltf.animations && gltf.animations.length > 0) {
            const mixer = new THREE.AnimationMixer(model);
            const action = mixer.clipAction(gltf.animations[0]); // Play the first animation
            action.play();

            // Update the mixer in the render loop
            const clock = new THREE.Clock();
            function animate() {
                const delta = clock.getDelta();
                mixer.update(delta);
                requestAnimationFrame(animate);
            }
            animate();
        }
    },
    (progress) => {
        // Loading progress callback
        console.log((progress.loaded / progress.total) * 100 + '% loaded');
    },
    (error) => {
        // Error callback
        console.error('Error loading model:', error);
    }
);