GLB Model not displaying on Three JS webpage

Question

The scene, the mesh is all showing up on the website. I've moved the glb literally next to the main.ts file so there's no directory issues. But nothing shows up.

The filename is coffeeshop.glb. This is my main.ts file:

const scene = new THREE.Scene();
// scene.background = new THREE.Color(0xffc0cb)
scene.background = new THREE.Color(0x000000)

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.set(0, 1, 5)

const renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);

const container = document.getElementById("container3D");
if (!container) {
    console.error("Container element 'container3D' not found!");
} else {
    container.appendChild(renderer.domElement);
}

const controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true

const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);

const gridHelper = new THREE.GridHelper(10, 10);
scene.add(gridHelper);

const glbLoader = new GLTFLoader();

glbLoader.load('coffeeshop.glb', (gltf) => {
    const coffee = gltf.scene;
    coffee.traverse((child) => {
        if ((child as THREE.Mesh).isMesh) {
            (child as THREE.Mesh).geometry.center();
        }
    });
    scene.add(coffee)

})

function animate() {
    requestAnimationFrame(animate);
    controls.update(); // required if controls.enableDamping = true
    renderer.render(scene, camera);
}

animate();

Jaap Moerkerk · Accepted Answer · 2025-04-16 11:15:06Z

1

The problem is not that the path is wrong, but the fact you put it next to your main.ts. ThreeJS treats the binary .glb file as a static asset, this means they have to be in the /public/ directory to be able to work in your browser. So the solution is to put it in the public folder of your project structure.

answered Apr 16 at 11:15

Jaap Moerkerk

593 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

GLB Model not displaying on Three JS webpage

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related