Three.js加载GLB树木模型仅显示空白页面的问题排查求助

Hey there, let's break down why your tree model isn't showing up—there are a few common culprits here, and I'll walk you through fixing them step by step.

1. You're Only Rendering Once (Critical Issue!) #

The biggest problem in your code is that renderer.render(scene, camera) runs before your GLB model finishes loading. Since loader.load() is asynchronous, the model isn't in the scene when that first render happens, and you never tell Three.js to render again after the model loads.

Fix this by either:

• Adding an animation loop (recommended for any interactive scene):

  function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
  }
  animate(); // Call this after setting up your scene/camera/renderer
  

• Or calling renderer.render(scene, camera) inside your loader callback:

  loader.load('tree.glb', function(gltf){
    const tree = gltf.scene.children[0];
    tree.scale.set(1.5,1.5,1.5);
    scene.add(gltf.scene);
    renderer.render(scene, camera); // Re-render once the model is added
  });
  

The animation loop is better because it'll handle any future changes (like camera movement or animations in your model) automatically.

2. Camera Might Not Be Pointing at the Model #

Your camera is positioned at (0, 50, 100), but by default, PerspectiveCamera looks towards (0, 0, -1)—not the origin where your model is. Add this line right after setting the camera position to make sure it's pointing directly at the tree:

camera.position.set(0, 50, 100);
camera.lookAt(0, 0, 0); // Add this!

If the tree still feels too small or far away, try adjusting the camera position to something closer, like (0, 10, 20)—sometimes a big position value can make small models disappear into the distance.

3. Double-Check Model Scaling #

You're scaling gltf.scene.children[0], but then adding gltf.scene to the scene. If the tree's geometry is actually in the root gltf.scene (not its first child), your scaling won't affect it. Try scaling the entire scene instead:

gltf.scene.scale.set(1.5, 1.5, 1.5);
scene.add(gltf.scene);

Or verify which node has the geometry by logging gltf.scene.children in the callback—this can help you make sure you're targeting the right part of the model.

4. Texture Loading Issues (From Your GLTF Viewer Note) #

You mentioned the texture didn't load in the GLTF viewer—this suggests your GLB file might not have embedded textures properly when you converted it from GLTF. GLB files should bundle textures inside the file, but if the conversion missed that, your model might render as white/black (since there's no texture data).

To fix this:

• Re-convert your GLTF to GLB using a tool that ensures textures are embedded (like Blender's export option for GLB, or the glTF Transform CLI).
• If you can't re-convert, make sure the texture files are in the same directory as your HTML file, and that the paths in the original GLTF were correct before conversion.

Final Tweaked Code Example #

Here's how your code might look with all these fixes applied:

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, 10, 20); // Closer to the model
camera.lookAt(0, 0, 0); // Point at the origin
scene.add(hlight);

renderer.setSize(container.clientWidth, container.clientHeight);
renderer.setPixelRatio(window.devicePixelRatio);
container.append(renderer.domElement);

loader.load('tree.glb', function(gltf){
  gltf.scene.scale.set(1.5, 1.5, 1.5); // Scale the entire model
  scene.add(gltf.scene);
});

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

Give these changes a try—most likely the missing animation loop or camera look direction is the main issue. Let me know if you still run into problems!

内容的提问来源于stack exchange，提问作者Carl Bruiners