Three.js GLTF Loading Issue

The error you're encountering (Unexpected token ':') suggests there's an issue with how Vite is handling your GLTF file. This typically happens when the browser is trying to parse the GLTF file as JavaScript instead of treating it as a data file.

Issues and Solutions

1. Path Problem: When using Vite, the public folder reference is different than you might expect.

2. GLTFLoader Import: I don't see where you're importing the GLTFLoader.

3. Three.js Import: You're using three with lowercase, but you need to import it properly.

Here's how to fix your code:

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

let scene, camera, renderer, light;

function init() {
  // Use THREE instead of three
  scene = new THREE.Scene();
  scene.background = new THREE.Color(0xdddddd);

  camera = new THREE.PerspectiveCamera(40, window.innerWidth/window.innerHeight, 1, 5000);
  camera.position.set(0, 0, 10); // Set camera position
  
  light = new THREE.AmbientLight(0x404040, 100);
  scene.add(light);

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

  // With Vite, use the correct path to assets in public folder
  // Don't use ../public/ - just reference directly from the root
  const loader = new GLTFLoader();
  loader.load('/abarth131/abarth131.gltf', (gltf) => {
    scene.add(gltf.scene);
    animate(); // Start animation after loading
  }, 
  // Add progress and error handlers
  (xhr) => {
    console.log((xhr.loaded / xhr.total * 100) + '% loaded');
  },
  (error) => {
    console.error('An error happened', error);
  });
}

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

init();

Key Changes:

1. Proper imports for THREE and GLTFLoader
2. Correct path to the GLTF file (in Vite, the public folder is served at the root)
3. Added camera position so you can see the model
4. Added animation loop for continuous rendering
5. Added error handling to help diagnose issues

Make sure your GLTF file is valid JSON and properly formatted. The error suggests there might be an issue with the file itself or how it's being loaded.