GLTF model not showing up on canvas

So I’ve been trying to get an asset model to show up in this little viewer canvas I made on an html page, but all I get is a black box where the viewer is. I’ve checked my code and consoled for stuff like directory name typos and stuff but still can’t get things working.

Here’s my html:

and here’s my javascript:

import * as THREE from '';
import {GLTFLoader} from '';
import {OrbitControls} from '';

//scene setup
const scene = new THREE.Scene();
const canvas = document.querySelector('.viewer');

const light = new THREE.PointLight(0xffffff, 1, 100);
light.position.set(0, 10, 10);

// "Matilda" ( by nicolekeane 
// is licensed under 
// CC Attribution-NonCommercial-ShareAlike 
// (
const loader = new GLTFLoader();
loader.load('./assets/3d/matilda/scene.gltf', (gltf) => {
    if (gltf.scene) {
        console.log("im here yo!", gltf.scene);

//test cube
// const geometry = new THREE.SphereGeometry(3, 64, 64);
// const material = new THREE.MeshStandardMaterial({color: '#00ff83'});
// const mesh = new THREE.Mesh(geometry, material);
// scene.add(mesh);

const camera = new THREE.PerspectiveCamera(
    canvas.innerWidth / canvas.innerHeight, 
camera.position.z += 20;
camera.position.x += 0;

const renderer = new THREE.WebGLRenderer({canvas});
renderer.setSize(canvas.innerWidth, canvas.innerHeight);
// renderer.setSize(window.innerWidth, window.innerHeight);

const controls = new OrbitControls(camera, renderer.domElement);, 20, 0);

function animate() {

    // console.log("yo");

    renderer.render(scene, camera);

Any help would be greatly appreciated

There are many things that need fixing, it is hard to guess all of them. Here are a few to start with:

  • when setting the camera aspect use clientWidth and clientHeight:
canvas.clientWidth / canvas.clientHeight
  • when setting renderer size, also use clientWidth and clientHeight:
renderer.setSize(canvas.clientWidth, canvas.clientHeight);
  • set the target of the controls to where the object is (for example):, 0, 0);
  • to make sure there is no issue with light strength, set its intensity to 10 (and if everything is OK, reduce it back):
const light = new THREE.PointLight(0xffffff, 10, 100);
  • (optional) switch to a newer Three.js release, r118 is rather old

Thank you so much. I went through and made all the changes that you outlined and it worked. I’m still kinda new to three js and programming in general so I feel a bit dumb for all the mistakes I made. Thanks again!

1 Like