Three.js导出含TextGeometry场景至OBJ/GLTF后加载异常求助

Great question—this is a common gotcha when working with Three.js scene serialization, so let’s break down what’s happening and your options to work around it.

First, Why This Happens #

Formats like OBJ and GLTF are universal 3D asset formats, not tied to Three.js’s internal type system. They only store raw geometric data (vertices, UVs, normals, indices) and material properties—they have no way to encode engine-specific metadata like "this geometry was originally a TextGeometry".

When you export a TextGeometry via OBJExporter or GLTFExporter, the exporter converts it to raw vertex data first. Then, when you re-import that OBJ/GLTF string, the loader only sees that raw data and converts it to a BufferGeometry (Three.js’s most efficient, generic geometry type) by default.

Can You Keep the Original Geometry Type? #

You can’t do this directly with OBJ/GLTF alone, but there are two solid workarounds that avoid manually storing text parameters separately (or at least integrate them cleanly):

Option 1: Use Three.js’s Native Serialization (toJSON() + ObjectLoader)

Three.js has its own JSON serialization system that preserves engine-specific types like TextGeometry. Here’s how to adapt your code:

Export Function

function CanvasToJSON(callback) {
  // Serialize the entire scene to Three.js's JSON format
  const sceneJSON = scene.toJSON();
  callback(JSON.stringify(sceneJSON, null, 2));
}

Import Function

function LoadJSON() {
  const elem = document.getElementById("modelEditor");
  if (!elem || !elem.value) return;

  const sceneJSON = JSON.parse(elem.value);
  const loader = new THREE.ObjectLoader();

  // Load the serialized scene
  loader.parse(sceneJSON, (loadedScene) => {
    scene = loadedScene;
    
    // Restore any scene settings not included in the serialization (if needed)
    scene.background = new THREE.Color(0xf0f0f0);
    if (!scene.getObjectByProperty('type', 'AmbientLight')) {
      scene.add(new THREE.AmbientLight(0x505050));
    }
    
    // Re-add your spotlight (or include it in the exported scene)
    const light = new THREE.SpotLight(0xffffff, 1.5);
    light.position.set(0, 500, 2000);
    light.angle = Math.PI / 9;
    light.castShadow = true;
    light.shadow.camera.near = 1000;
    light.shadow.camera.far = 4000;
    light.shadow.mapSize.width = 1024;
    light.shadow.mapSize.height = 1024;
    scene.add(light);

    objects.push(...scene.children);
    renderer.setSize(renderer.domElement.width, renderer.domElement.height, false);
  });
}

Important Note: This relies on your TextGeometry fonts being available in the THREE.Font cache when importing. Make sure you load the font files before importing the serialized scene, or include font references in the serialization (Three.js will store the font’s UUID, so as long as the font is registered, it will work).

Option 2: Embed Metadata in Your Exported Data

If you need to stick with OBJ/GLTF, you can wrap the exported string with custom metadata that tracks which meshes were originally TextGeometry. Here’s how:

Modified Export Function

function CanvasToOBJWithMeta(callback) {
  const exporter = new THREE.OBJExporter();
  const options = { trs: false, onlyVisible: true, truncateDrawRange: true, binary: false, forceIndices: false, forcePowerOfTwoTextures: false, embedImages: true };
  const objString = exporter.parse(scene);

  // Collect metadata for all TextGeometry meshes
  const textMeshMeta = [];
  scene.traverse((obj) => {
    if (obj.isMesh && obj.geometry.isTextGeometry) {
      textMeshMeta.push({
        uuid: obj.uuid, // Use UUID to match meshes later
        type: "TextGeometry",
        params: {
          text: obj.geometry.parameters.text,
          font: obj.geometry.parameters.font,
          size: obj.geometry.parameters.size,
          height: obj.geometry.parameters.height,
          // Add any other TextGeometry parameters you use
        }
      });
    }
  });

  // Combine OBJ data and metadata into a single export object
  const exportData = JSON.stringify({
    obj: objString,
    meta: { textMeshes: textMeshMeta }
  }, null, 2);

  callback(exportData);
}

Modified Import Function

function LoadOBJWithMeta() {
  const elem = document.getElementById("modelEditor");
  if (!elem || !elem.value) return;

  const exportData = JSON.parse(elem.value);
  const loader = new THREE.OBJLoader();

  loader.load('', exportData.obj, (gltf) => {
    scene = new THREE.Scene();
    scene.background = new THREE.Color(0xf0f0f0);
    scene.add(new THREE.AmbientLight(0x505050));
    
    const light = new THREE.SpotLight(0xffffff, 1.5);
    light.position.set(0, 500, 2000);
    light.angle = Math.PI / 9;
    light.castShadow = true;
    light.shadow.camera.near = 1000;
    light.shadow.camera.far = 4000;
    light.shadow.mapSize.width = 1024;
    light.shadow.mapSize.height = 1024;
    scene.add(light);

    scene.add(gltf);

    // Replace BufferGeometry with TextGeometry using metadata
    exportData.meta.textMeshes.forEach((meshMeta) => {
      const targetMesh = scene.getObjectByProperty('uuid', meshMeta.uuid);
      if (targetMesh) {
        // Recreate the TextGeometry from stored parameters
        const textGeometry = new THREE.TextGeometry(meshMeta.params.text, meshMeta.params);
        // Copy over any transformations or material settings
        targetMesh.geometry = textGeometry;
      }
    });

    objects.push(...gltf.children);
    renderer.setSize(renderer.domElement.width, renderer.domElement.height, false);
  });
}

Final Thoughts #

• The native Three.js serialization (toJSON()/ObjectLoader) is the cleanest way to preserve geometry types, but it’s tied to Three.js (you can’t use the exported JSON in other engines).
• The metadata wrapper approach lets you keep using OBJ/GLTF, but requires a bit more code to map meshes back to their original types.

Neither approach avoids storing text parameters entirely, but they integrate the data into your export workflow so you don’t have to manage separate files or inputs.

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