Google街景背景替换3D模型（摩天轮改小行星）后黑屏求助

Hey there, let's walk through why you're seeing a black screen after replacing the Ferris wheel with your asteroid model, and fix it step by step:

1. Check JSON Model Format Compatibility #

Chances are the JSON you exported from Blender doesn't match the format expected by your original example (most likely Three.js JSON, since that's common for combining 3D models with Google Street View). Blender's default JSON export might not align with the specific version or schema the example uses.

• Fix: Install the official Three.js Blender add-on, then when exporting:
  • Select "Three.js" as the export format
  • Enable options like Export Geometry, Export Normals, Export Materials
  • Make sure to adjust the coordinate system (Blender uses Z-up by default, but many web 3D setups use Y-up—toggle this in export settings)

2. Verify Model Scale & Position #

Your asteroid might be way too large/small, or positioned outside the camera's field of view (making it look like a black screen even though it's loaded).

• Fix:
  • In Blender, compare your asteroid's dimensions to the original Ferris wheel's scale, then resize it to match the scene's context.
  • Add debug code to test positioning:

    // Temporarily add a visible cube to confirm the scene is working
    const testCube = new THREE.Mesh(
      new THREE.BoxGeometry(1, 1, 1),
      new THREE.MeshBasicMaterial({ color: 0xff0000 })
    );
    testCube.position.set(0, 0, 5); // Match your asteroid's position
    scene.add(testCube);
    

  If the cube shows up, adjust your asteroid's scale and position properties until it's visible.

3. Fix Missing Materials/Textures #

If your asteroid has textures or complex materials, they might not have been included in the JSON export, or the file paths are incorrect—this can cause rendering failures.

• Fix:
  • In Blender, assign a simple solid-color material to the asteroid first (no textures) and re-export. If it shows up, you know the issue is with textures.
  • When exporting with textures, ensure texture files are saved in your project folder, and update any path references in your code to point to the correct location.

4. Check Browser Console for Errors #

The black screen is often accompanied by hidden error messages that tell you exactly what's wrong.

• Fix: Press F12 to open your browser's DevTools, go to the Console tab, and look for errors like:
  • 404 Not Found: Your model file path is incorrect
  • Unexpected token in JSON: The exported JSON is malformed (re-export with correct settings)
  • Cannot read property of undefined: There's an issue with how you're loading/parsing the model

5. Ensure Proper Lighting Setup #

The original Ferris wheel might have been configured with specific lighting that your asteroid is missing. Without proper lights, even a loaded model will appear black.

• Fix: Add basic lighting to your scene if it's missing:

  // Add ambient light for general illumination
  const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
  scene.add(ambientLight);
  
  // Add directional light for shadows/brightness
  const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
  directionalLight.position.set(10, 15, 10);
  scene.add(directionalLight);
  

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