Model not showing on page

Questions
1

I know this question is asked on a regular basis so please bear with me. Come across three js and wanted to delve a little deeper.

I have downloaded a 3d image of earth from NASA. Code is (nasaEarth.js, called from index.html, which is copy of first tutorial with box)

import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

const loader = new GLTFLoader(); 

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.getElementById('globeViz').appendChild( renderer.domElement );

// loading model
loader.load('./Earth_1_12756.glb', (gltf) => {
   scene.add(gltf.scene)
},
	function ( xhr ) {
		console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
	},
	function ( error ) {
		console.log( 'An error happened' );
	});

camera.position.z = 10;

animate();

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

The browser console shows the loading, no errors. But nothing on screen. From reading other questions like this, I guess it is to do with the camera position. I have put in various values to no avail.

So what am I doing wrong?

2

Most likely one of these reasons (solutions included for each one.)

3

Thanks for the link. I tried the various solutions and still a black screen though with a white flash after I added the lookAt code.
Previously (and I should have mentioned originally) I did drop the model file into a viewer and the earth was there.So the model file is OK.

4

Any other ideas on this? I have tried the camera perspective at 45 fov, and 3000 for far.
I looked at the validation report in the gltf viewer and the dimensions were 4096x3072.
Obviously this is fundamental mistake on my part.