Threejs / Vite / Blender GLB File - Not Loading

[Connie_Cham]

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:

Installed:

• 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)

vite.config.js

[AshhadDevLab]

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

The model is alright and it is appearing for me:

[axekan]

Vite doesn’t include .glb assets by default.

Try adding this to your vite.config:

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

[Connie_Cham]

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

[Connie_Cham]

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

[manthrax]

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

[Connie_Cham]

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?

[Connie_Cham]

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.

[Connie_Cham]

New error on my console!

[manthrax]

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

[Connie_Cham]

hmmm how do I fix it? any tips?

[AshhadDevLab]

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.

[webdingens]

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