three.js - 如何在不使用 JSONLoader 的情况下从 JSON 对象创建 three.js Geometry

Question

我正在创建一个场景，其中对象从 JSON 文件(从 blender 导出)中引入并添加到场景中。因为这将是一个 Cordova 应用程序，所以我不能使用 JSONLoader(或任何 XHR 资源)。

我可以使用 FileSystem API 获取 JSON 文件，但我不知道如何从 JSON 创建 THREE.Geometry 对象，因为 Geometry 构造函数不接受任何参数。 (通常，完成的 Geometry 对象由 JSONLoader 回调函数自动提供)。我情不自禁地觉得我缺少了一些明显的东西。有什么建议吗？

Answer 1

选项 1:

您可以通过手动添加其属性来构建自己的THREE.Geometry 对象。文档给你a quick example如何添加顶点和面:

var geometry = new THREE.Geometry();

geometry.vertices.push(
    new THREE.Vector3( -10,  10, 0 ),
    new THREE.Vector3( -10, -10, 0 ),
    new THREE.Vector3(  10, -10, 0 )
);

geometry.faces.push( new THREE.Face3( 0, 1, 2 ) );

geometry.computeBoundingSphere();

在这个例子中，您可以编写自己的迭代器，并使用 JSON 文件中的数据创建几何体。

选项 2:

如果你需要法线、uvs、颜色等，上面的过程可能会变得太冗长。所以不要手动重写它，只需使用 JSONLoader 的解析属性，而不用使用它来加载数据。这可以通过 THREE.JSONLoader.parse() 来实现。方法:

// Use whatever method you're using to fetch the data
var JSONData = getJSONSomehow(); 

// Now we only use JSONLoader for parsing 
var JSONParser = new THREE.JSONLoader();
var myObject3D = JSONParser.parse(JSONData);
scene.add(myObject3D);