Problem loading GLB file

Questions
,
1

I’m trying to load a .glb file. I’m using parcel to serve everything locally. Everything seems to go fine. There are no warnings in the browser. I can print information about the model once it’s loaded. But the model isn’t visible on the screen. I can see the renderer’s background color but nothing else. I tried the model in an online glTF viewer and it works fine. I’ve tried all the troubleshooting steps on this page. There are no errors in the console or network tab. I’ve tried adding lights and scaling the scene up and down. Can anyone tell me what I’m missing?

Here is the model I’m trying to load.

earth.js

import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

// Set up the scene, camera, and renderer
const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 2000);
camera.position.set(0, 0, 10);
camera.lookAt(scene.position);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xaaaaaa); // Light grey

// Add some lights.
const ambientLight = new THREE.AmbientLight(0x404040); // Soft white light
scene.add(ambientLight);

const pointLight = new THREE.PointLight(0xffffff, 1);
pointLight.position.set(1, 1, 1);
scene.add(pointLight);

const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(1, 1, 1);
scene.add(directionalLight);

// Add renderer to page.
const container = document.createElement( 'div' );
document.body.appendChild( container );
container.appendChild(renderer.domElement);

// Add orbit controls
const controls = new OrbitControls(camera, renderer.domElement);

// Load the GLB model
const loader = new GLTFLoader();
loader.load('earth.glb', function(gltf) {
    scene.add(gltf.scene);
    console.log('loaded');
}, undefined, function(error) {
    console.error(error);
});

// Animation loop
function animate() {
    requestAnimationFrame(animate);
    controls.update();
    renderer.render(scene, camera);
}

animate();

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Earth</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script type="module" src="earth.js"></script>
</body>
</html>
2

Does the earth show up when you set the camera further away:

camera.position.set(0, 0, 1000);

The GLB model is large, roughly a sphere with diameter 1000 (i.e. its x/y/z span from -500 to 500), so the initial camera is inside it.

3

Thanks for your help. I though I had tried that. It worked.

1 Like