Loading GLB files not displaying

Questions
1

I’m a newbie to Three JS, and I’ve got the basic cube displaying on screen, but I’m really struggling to get my 3D model loading.

I’ve validated the GLB file I’m referencing using https://gltf-viewer.donmccurdy.com, and it loads fine there (less the textures), but when I try to load it on my page it refuses to show anything (if I change the background colour it changes, no errors in the developer tools of MS Edge).

If I’m not mistaken, all objects by default are loaded to location 0,0,0… but is there a way to ensure the camera is locked onto a loaded object (so I can tell if the object is loaded or not) and can you see anything wrong with my code below?

My code is;

import {
    Camera,
    Color,
    Scene,
    PerspectiveCamera,
    WebGLRenderer,
    AmbientLight,
  } from "https://cdn.skypack.dev/three@0.132.2";
  
  import { GLTFLoader } from 'https://cdn.skypack.dev/three@0.132.2/examples/jsm/loaders/GLTFLoader.js';

const container = document.querySelector('#scene-container');
const scene = new Scene();
const renderer = new WebGLRenderer();
const hlight = new AmbientLight (0x404040,100);
const fov = 80;
const aspect = container.clientWidth / container.clientHeight;
const near = 0.1;
const far = 100; 
const camera = new PerspectiveCamera(fov, aspect, near, far);
const loader = new GLTFLoader();

scene.background = new Color('white');
camera.position.set(0, 50, 100);
scene.add(hlight);
renderer.setSize(container.clientWidth, container.clientHeight);
renderer.setPixelRatio(window.devicePixelRatio);
container.append(renderer.domElement);

loader.load('tree.glb', function(gltf){
  const car = gltf.scene.children[0];
  car.scale.set(1.5,1.5,1.5);
  scene.add(gltf.scene);
  animate();
});
renderer.render(scene, camera);

function animate() {
    renderer.render(scene,camera);
    requestAnimationFrame(animate);
  }
2

Hi!
Try to use this:

camera.position.set(0, 50, 100);
camera.lookAt(scene.position); //add this line
1 Like
3

Thanks prisoner849, it still hasn’t worked, I attached the project in a ZIP file, I’ve tried a few different approaches (I’ve also added in the load manager to check the GLB file is loading, and the console output confirms it is)

incubator.zip (305.4 KB)

4

i just see index.html and your src files in that zip. you can’t load local files without a server, the browser doesn’t have access to the file system. setting up a local web server would be more work than using a bundler and npm though. then you also don’t need to rely on cdns for three, just import { ...} from "three" . use vite, rollup, whatever you want. stick the glb into the public folder and it’ll work.

5

Im running it on a local web server :), when you download the zip, I could see the glb (in the root) and js file inside src?

6

You have got container.clientHeight=0 and that is why aspect=Infinity
Delete canvas from index.html because you adding him in main.js
One of solution is:
Replace const aspect = container.clientWidth / container.clientHeight;
To const aspect = screen.width / screen.height;
Replace renderer.setSize(container.clientWidth, container.clientHeight);
To renderer.setSize(screen.width, screen.height);

image
image767×589 8.51 KB

2 Likes
7

Thanks @Chaser_Code that was perfect, and working as expected. Thanks

1 Like