Threejs / Vite / Blender GLB File - Not Loading

It keeps showing up as blank or a blank canvas, I set a plane for a model and only the lights and shadows from it showed, my orbit controls worked and everything - is there something the matter with my model?

Here’s my project structure:


  • vite
  • nodejs
  • vite-plugin-glsl
  • created vite.config.mjs file

Core Files:
index.html (316 Bytes)
main.js (2.6 KB)
fragmentShader.glsl (389 Bytes)
vertexShader.glsl (362 Bytes)
pow-mylar-grape-escape.glb (2.7 MB)


What is the error that you are getting in the console?

The model is alright and it is appearing for me:

Vite doesn’t include .glb assets by default.

Try adding this to your vite.config:

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

It had a bunch of errors before, but now it’s just showing this:

thanks! I added it, but it’s still a blank canvas - do I need to install a glb plugin for vite too?

That error loading three looks liek you need to change:
import * as THREE from ‘three/build/three.module.js’;

to just:
import * as THREE from ‘three’;

and make sure you have
“npm i three” in you project

Cool yeah! I fixed that bit - I think I was trying to make a custom fragment shader/vertex Shader to get a rainbow chrome material on it. Do you know of an easier way to do that?

I’ve updated the import + THREE from ‘three’; line and now all my imports are loading properly, looks like it’s a black screen, which is better than before. So I’ll try to add a few more lights and keep ya’ll updated.

BUT if you have any suggestions on getting this rainbow iridescent effect, lmk.

New error on my console!

I’m guessing its getting 404 on the gltf… and trying to parse the 404 response as a gtlf. :slight_smile:

1 Like

hmmm how do I fix it? any tips?

You should locally download the model and them import it, or one thing what I do is create a Glitch and upload the model as an asset and you will have a cdn URL that you can use to import it.

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