Fixing Your Three.js GLB Model Loading Issue

I can see several issues in your code that might be causing the black screen:

Main Issues

1. Missing render loop: You're not actually rendering anything after setup
2. Camera far clipping plane: Your camera's far clipping plane is only 10 units, but your camera is positioned at 20 units away
3. Missing animation loop: Three.js requires a continuous render loop
4. No error handling output: You have error handling but might not be seeing the errors

Fixed Code

Here's a corrected version of your code:

JAVASCRIPTCopied
var scene = new THREE.Scene();
// Increase far clipping plane to at least 100
var camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 100);

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Position camera closer or increase far clipping plane
camera.position.set(5, 0, 5);
camera.lookAt(0, 0, 0); // Make camera look at center

// Make sure GLTFLoader is properly imported
const loader = new THREE.GLTFLoader();

loader.load('turbo.glb', function(gltf) {
    // Log successful loading
    console.log('Model loaded successfully');
    
    // Center the model if needed
    const model = gltf.scene;
    scene.add(model);
    
    // Optional: Auto-position camera based on model bounds
    // centerCameraOnModel(model, camera);
}, 
function(progress) {
    console.log('Loading progress: ' + (progress.loaded / progress.total * 100) + '%');
}, 
function(error) {
    console.error('Error loading model:', error);
});

var light = new THREE.AmbientLight(0xffffff);
scene.add(light);

// Add directional light for better visibility
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(5, 10, 7.5);
scene.add(directionalLight);

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

Additional Troubleshooting Tips

1. Check the console for errors: Make sure there are no errors in your browser's console
2. Verify file path: Ensure 'turbo.glb' is in the correct location relative to your HTML file
3. Add orbit controls: For easier debugging, add OrbitControls to navigate around the scene
4. Check model size: Your model might be very small or very large - try scaling it
5. Verify model: Try loading a different GLB model to confirm your loading code works

If you're still having issues, try adding a simple geometry to verify your rendering setup works:

JAVASCRIPTCopied
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({color: 0x00ff00});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);