Can't View Planet/Moon GLB Model

Questions
1

No matter what I do, I can’t view this GLB file Europa 3D Model - NASA Science. I’ve tried changing the background color, adding lights, moving the camera. Thing is when I try with a spacecraft model (Europa 3D Model - NASA Science), it works fine, but not the moon or planet (I also tried Jupiter from the same source).
I uploaded it to https://gltf-viewer.donmccurdy.com/ so I know the file isn’t faulty and that it should be possible.
I can load it successfully (with no errors in the console log), it’s just not visible.

Here’s some sample code. I’d also attach a screenshot, but it’s just a black screen.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three.js GLB Model</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/GLTFLoader.js"></script>
    <script>
        // Scene setup
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // Light
        const light = new THREE.DirectionalLight(0xffffff, 10);
        light.position.set(1, 1, 1).normalize();
        scene.add(light);

        // Load GLB model
        const loader = new THREE.GLTFLoader();
        loader.load('models/Europa_1_3138_2.glb', function (gltf) {
            console.log('Model loaded successfully');
            const model = gltf.scene;

            // Adjust model scale and position
            model.scale.set(10, 10, 10); // Scale the model up if it's too small
            model.position.set(0, 0, 0); // Ensure the model is centered

            scene.add(model);
        }, function (xhr) {
            console.log((xhr.loaded / xhr.total * 100) + '% loaded');
        }, function (error) {
            console.error('An error happened', error);
        });

        // Camera position
        camera.position.z = 50;

        // Animation loop
        function animate() {
            requestAnimationFrame(animate);
            renderer.render(scene, camera);
        }
        animate();
    </script>
</body>
</html>
2

Try set:

model.scale.set(0.5, 0.5, 0.5);

and

camera.position.z = 500;
1 Like
3

Well I could have sworn I tried that (probably just very similar things). Anyway, it worked–thank you!