Cordova应用中如何不使用JSONLoader创建three.js Geometry

Got it, let's work through this problem since Cordova's restrictions are forcing us to bypass the usual JSONLoader workflow. Here's a step-by-step approach to manually build your THREE.Geometry instance from the JSON data you've retrieved via the FileSystem API:

Step 1: Parse the JSON string into a JavaScript object #

First, take the raw JSON content you've loaded and convert it into a usable object:

// Assuming jsonString is the content you got from FileSystem API
const modelData = JSON.parse(jsonString);

Step 2: Initialize an empty Geometry and populate its core properties #

Since THREE.Geometry() has no constructor parameters, we'll manually fill in all the data from your Blender export:

const geometry = new THREE.Geometry();

// Add vertices
modelData.vertices.forEach(vert => {
  geometry.vertices.push(new THREE.Vector3(vert[0], vert[1], vert[2]));
});

// Add faces (adjust based on your export's face format)
modelData.faces.forEach(faceData => {
  // Blender's Three.js export typically stores faces as arrays of indices + optional data
  const face = new THREE.Face3(faceData[0], faceData[1], faceData[2]);
  
  // If your export includes face normals, add them
  if (faceData.normal) {
    face.normal.set(faceData.normal[0], faceData.normal[1], faceData.normal[2]);
  }
  
  geometry.faces.push(face);
});

// Add vertex normals (if present in your export)
if (modelData.vertexNormals) {
  modelData.vertexNormals.forEach(normal => {
    geometry.vertexNormals.push(new THREE.Vector3(normal[0], normal[1], normal[2]));
  });
} else {
  // If no normals are exported, compute them automatically
  geometry.computeVertexNormals();
}

// Add UV coordinates (if your model has textures)
if (modelData.uvs && modelData.uvs.length > 0) {
  modelData.uvs.forEach(uvSet => {
    const uvFace = uvSet.map(uv => new THREE.Vector2(uv[0], uv[1]));
    geometry.faceVertexUvs[0].push(uvFace);
  });
}

// Finalize the geometry (critical for Three.js to recognize changes)
geometry.computeBoundingBox();
geometry.computeBoundingSphere();
geometry.verticesNeedUpdate = true;
geometry.elementsNeedUpdate = true;

Step 3: Create materials and mesh, then add to your scene #

Don't forget to handle the material data from your JSON export (adjust based on your material type):

// Example: Create a basic material from the exported material data
const materialData = modelData.materials[0];
const material = new THREE.MeshPhongMaterial({
  color: new THREE.Color(materialData.color),
  shininess: materialData.shininess,
  side: THREE.DoubleSide // Useful if your model has flipped faces
});

// Create the mesh and add it to your scene
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

Key Notes: #

• Blender Export Settings: Make sure when exporting from Blender to Three.js JSON, you enable all the data you need (vertices, faces, normals, UVs, materials) in the export options—this will make manual parsing easier.
• Three.js Version: If you're using a newer Three.js version where Geometry is deprecated (replaced by BufferGeometry), the approach is similar but you'll use BufferAttribute to populate data instead. Let me know if you need that adjustment!
• Error Handling: Add try/catch blocks around the JSON parsing and geometry population to handle any malformed data from the export.

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