javascript - 使用 ObjectLoader 加载包含具有多种 Material 的 BufferGeometry 的 JSON 不起作用

Question

我创建了一个具有多种 Material 的球体，如下所示:

const materials = [
    new THREE.MeshPhongMaterial({});
    new THREE.ShaderMaterial({ visible: false});
]

const geometry = new THREE.SphereBufferGeometry(2,100,100);
geometry.addGroup(0, Infinity, 0);
geometry.addGroup(0, Infinity, 1);

const mesh = new THREE.Mesh(geometry, materials);
scene.add(mesh);

还定义了场景、灯光、相机(但未包含在此处，因为它们不是问题)。

这一切都在页面加载(初始化)时起作用。

稍后我使用 scene.toJSON() 导出整个场景。然后，稍后，我可能想要重新加载该 JSON 并替换整个场景。我正在这样做:

const loader = new THREE.ObjectLoader();
loader.parse(jsonObject, function(object) {

    // instance is an object containing a bunch of things,
    // including the current scene. 
    // So I replace the current scene with the new one from the JSON

    instance.scene = object;
}

此时，场景已正确替换，但对象并未出现(并且我知道 JSON 已正确形成)。

我尝试过创建球体

const geometry = new THREE.SphereGeometry(2,100,100);

如果我这样做，那么在加载 JSON 时，对象会正确显示。

我更喜欢使用SphereBufferGeometry()，但我不确定为什么它不起作用。我错过了什么/做错了什么？

这里有两个例子。在这两种情况下，您都应该看到一个空白球体，但在 #1 中您看不到:

1. 使用SphereBufferGeometry:https://codepen.io/anon/pen/BgQmMq
2. 使用SphereGeometry:https://codepen.io/anon/pen/agBEbp

Answer 1

您的代码有两个问题。

• 使用内置几何生成器时，two.js 假定您不修改几何数据。但实际上您是通过添加组来做到这一点的。这些数据在序列化/反序列化过程中丢失。因此，我们的想法是创建一个新的 BufferGeometry 对象并复制缓冲区属性和索引。然后，您可以自由定义新数据或覆盖现有数据。
• 此外，Infinity 是一个糟糕的选择，因为它无法序列化。最好设置代表非索引几何体的最后一个顶点的值或代表索引几何体的最后一个索引的值。我已经用这两个修复程序更新了您的 codepen。

https://codepen.io/anon/pen/MMbQgv

三.js R105