import * as THREE from 'three';
import { GLTFLoader } from 'https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/GLTFLoader.js';let scene, camera, renderer, cat, mixer;function init() {
// Set up scene
scene = new THREE.Scene();
// Set up camera
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// Set up renderer with the canvas element
renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('catCanvas') });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);// Load the 3D Cat Model
const loader = new GLTFLoader();
loader.load('path/to/your/cat.gltf', (gltf) => {
// Add model to scene
cat = gltf.scene;
mixer = new THREE.AnimationMixer(cat);// Play all animations (assuming the model has walk/idle animations)
gltf.animations.forEach((clip) => {
mixer.clipAction(clip).play();
});scene.add(cat);
});// Set up lighting (optional, but gives a more realistic effect)
const light = new THREE.AmbientLight(0x404040, 2); // Ambient light
scene.add(light);const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(5, 10, 5).normalize();
scene.add(directionalLight);// Camera position (adjust as needed)
camera.position.z = 5;// Start animation loop
animate();
}function animate() {
requestAnimationFrame(animate);// Update animations
if (mixer) mixer.update(0.01);// Render the scene from the perspective of the camera
renderer.render(scene, camera);
}// Initialize the animation
init();Skip to content