GLTF model not showing up on canvas

Questions
1

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:

Screenshot 2023-09-16 21.48.47
Screenshot 2023-09-16 21.48.471600×900 97.3 KB

and here’s my javascript:

import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.118/build/three.module.js';
import {GLTFLoader} from 'https://cdn.jsdelivr.net/npm/three@0.118/examples/jsm/loaders/GLTFLoader.js';
import {OrbitControls} from 'https://cdn.jsdelivr.net/npm/three@0.118/examples/jsm/controls/OrbitControls.js';

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


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


// "Matilda" (https://skfb.ly/6zGMG) by nicolekeane 
// is licensed under 
// CC Attribution-NonCommercial-ShareAlike 
// (http://creativecommons.org/licenses/by-nc-sa/4.0/).
const loader = new GLTFLoader();
loader.load('./assets/3d/matilda/scene.gltf', (gltf) => {
    if (gltf.scene) {
        console.log("im here yo!", gltf.scene);
    }
    scene.add(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);

//camera
const camera = new THREE.PerspectiveCamera(
    45, 
    canvas.innerWidth / canvas.innerHeight, 
    0.1, 
    1000
);
camera.position.z += 20;
camera.position.x += 0;
scene.add(camera);

//renderer
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);
controls.target.set(0, 20, 0);
controls.update();

function animate() {
    requestAnimationFrame(animate);

    // console.log("yo");

    renderer.render(scene, camera);
  }
  animate();

Any help would be greatly appreciated

2

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):
controls.target.set(0, 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
3

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