Threejs / Vite / Blender GLB File - Not Loading

Questions
, , , , , , ,
13

Change imports

import vertexShader from './shaders/vertexShader.vert';
import fragmentShader from './shaders/fragmentShader.frag';
import glbFileUrl from './models/pow-mylar-grape-escape.glb';
import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';

also rename the shader to use the appropriate extension, otherwise the plugin doesn’t compile it correctly.

Copy over Draco Decoder files to /public/draco from /node_modules/three/examples/jsm/libs/draco

Replace the loading code:

const loader = new GLTFLoader();
const dracoloader = new DRACOLoader();
dracoloader.setDecoderPath( '/draco/' );
loader.setDRACOLoader( dracoloader );

loader.load(glbFileUrl, (gltf) => {

add assetsInclude to vite.config.mjs if not already:

export default defineConfig({
  plugins: [glsl()],
  assetsInclude: ["**/*.glb"],
})

Anything in /public/ you can use as simple string url ‘/file’. If it’s not in /public you have to import it, so it get’s bundled and/or copied over to the dist folder. Special file extensions will have to appear in assetsInclude. Also see Vite Static Asset Handling