使用 ObjectLoader 加载包含具有多种材料的 BufferGeometry

Question

我创建了一个具有多种材料的球体，如下所示：

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 中您看不到：

与SphereBufferGeometry：https : //codepen.io/anon/pen/BgQmMq

与SphereGeometry：https : //codepen.io/anon/pen/agBEbp