Three.js-如何反序列化几何体.toJSON(）?(几何体.fromJSON在哪里?）

Three.js - How to deserialize geometry.toJSON()? (where is geometry.fromJSON?)

本文关键字：几何体 js- fromJSON 在哪里 Three toJSON 反序列化      更新时间：2024-06-03

我正在尝试将一些Geometry加载和处理卸载到web工作者中。要将其发送回主线程，需要序列化Geometry实例，而Geometry.prototype.toJSON()似乎正是用于这种类型的事情。

但我不知道如何在主线程中将该对象转换回Geometry实例。toJSON()输出应该如何使用？

附言：我看过这个相关的问题，但它似乎过时了。toJSON()还没有出现在API中。公认的答案有点复杂，需要我在主线程中做一些原始工作。

如果我理解正确，问题是：

  • 您有一个要加载为几何体的文件（obj、stl等）
  • 您希望在WebWorker中加载此文件
  • 然后，您需要将几何体发送回主脚本
  • 因此，您考虑将文件作为JSON发送回主线程，因为不支持发送对象
  • 然后在主线程上将json转换为几何体

这样做的问题是，从JSON字符串转换为几何体是另一种加载操作（这就是为什么有JSONLoader的原因），所以在这一点上，您还可以在主线程上完成加载。

我使用的方法是将文件加载到顶点和法线的平面阵列中，然后将它们发送回主线程以添加到BufferGeometry中。你也可以使用可转移的物体来获得更多的速度。

// worker.js
var vertices = new Float32Array( faces * 3 * 3 );
var normals = new Float32Array( faces * 3 * 3 );   
// Load your file into the arrays somehow.
var message = {
    status:'complete',
    vertices: vertices,
    normals: normals
};
postMessage(message, [message.vertices.buffer, message.normals.buffer]);

// app.js
onmessage = function (event) {
    var vertices = event.data.vertices;
    var normals = event.data.normals;
    var geometry = new THREE.BufferGeometry();
    geometry.addAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
    geometry.addAttribute( 'normal', new THREE.BufferAttribute( normals, 3 ) );
    var material = new THREE.MeshPhongMaterial();
    var mesh = new THREE.Mesh( geometry, material );
    // Do something with it.
};

您可以使用JSONLoader对几何体进行非序列化，如下所示：

var geometry = new THREE.Geometry();
var serializedGeometry = geometry.toJSON();
var jsonLoader = new THREE.JSONLoader();
var result = jsonLoader.parse(serializedGeometry.data);
var unserializedGeometry = result.geometry;

为什么不直接使用JSONLoader？

myloader = new THREE.JSONLoader()
myloader.load("path/to/json", function(geometry,material){
    mesh = new THREE.Mesh(geometry,material)
    scene.add(mesh)
})

或者以与相同的方式加载JSON文件

相关文章：