使用Three.js的ObjectLoader加载对象时出现UUID问题的原因及解决方法

Let's break down your problems step by step and work through solutions for each one:

1. Fix the ObjectLoader Code Mistake #

First, that extra var object = new Object(); object.loader = 'Models/amy.json' line is unnecessary and might even be interfering with the loader's logic. ObjectLoader doesn't require you to pre-create an object like this—just initialize the loader and call load() directly. Here's the corrected code, plus an error callback to get clearer debug info:

var loader = new THREE.ObjectLoader();
// Add error callback to see detailed error messages
loader.load('Models/amy.json', 
  function(object) {
    scene.add(object);
  },
  undefined, // Optional progress callback
  function(error) {
    console.error('Model loading failed:', error);
  }
);

This will help you see exactly what's going wrong with the UUID issue, instead of just a vague error message.

2. Troubleshoot the UUID Error #

UUID conflicts usually stem from one of two issues:

• Model Format/Version Mismatch: The JSON model exported from Clara.io might use an older Three.js format that's incompatible with your current Three.js version. Try re-exporting the model from Clara.io, making sure to select a format matching your Three.js version.
• Duplicate UUIDs in the Model: Open your amy.json file in a text editor and search for "uuid" fields. If any entries share the same UUID value, manually edit a few to be unique (UUIDs just need to be distinct strings—you can generate new ones easily online).

Bonus: Switch to GLTFLoader (Recommended) #

ObjectLoader is primarily designed for loading Three.js-native JSON scenes/objects. For models from external tools like Clara.io, GLTFLoader is the modern, recommended option with better compatibility. Clara.io supports exporting GLTF models—here's how to load one:

var loader = new THREE.GLTFLoader();
loader.load('Models/amy.gltf', 
  function(gltf) {
    scene.add(gltf.scene);
  },
  undefined,
  function(error) {
    console.error('GLTF model loading failed:', error);
  }
);

Just make sure to include the GLTFLoader.js file in your project (you can grab it from the Three.js examples directory).

3. Resolve Module Import & 404 Errors #

The "cannot use import statement outside of a module" error and 404s are related to how you're loading Three.js files. You have two valid options:

Option A: Use Traditional Non-Module Scripts #

• Make sure you're using the UMD versions of Three.js files (these are the standard files in the main js directory of the Three.js download, not the jsm module folder).
• Double-check file paths: If your HTML is in the root folder, js/three.js should exist, and Models/amy.json should be in a Models subfolder. A 404 means the browser can't find the file at the path you specified.
• Keep your script tags as:

  <script src="js/three.js"></script>
  <script src="js/OrbitControls.js"></script>
  <script src="js/ObjectLoader.js"></script>
  

Option B: Use ES Modules #

If you want to use import statements, you need to mark your main script as a module and use the module versions of Three.js files:

<script type="module">
  import * as THREE from './js/three.module.js';
  import { OrbitControls } from './js/jsm/controls/OrbitControls.js';
  import { ObjectLoader } from './js/jsm/loaders/ObjectLoader.js';

  // Your Three.js code here
  const scene = new THREE.Scene();
  // ... setup camera, renderer, etc.
  const loader = new ObjectLoader();
  loader.load('Models/amy.json', (object) => scene.add(object));
</script>

• Ensure three.module.js and the jsm folder files are in the correct paths relative to your HTML file.
• 404 errors here are almost always path mistakes—verify every file's location matches your import paths.

4. Clarifying the "Import Statement Outside Module" Error #

This error happens when:

• You use import in a <script> tag that doesn't have type="module", OR
• You load an ES module file (like those in the jsm folder) with a traditional non-module script tag.

Pick one approach (non-module or ES module) and stick with it—don't mix the two, as that will cause conflicts.

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