I have successfully crafted a sphere using multiple materials in the following manner:
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);
The scene, light, and camera have been defined as well (although not detailed here as they are functioning appropriately).
Initially, everything works flawlessly when the page loads.
However, when I try to export the entire scene with scene.toJSON() and then load it back in to replace the scene, I encounter an issue. Here is the code snippet I'm using for this process:
const loader = new THREE.ObjectLoader();
loader.parse(jsonObject, function(object) {
// instance holds various elements, including the current scene
// Hence, I swap the existing scene with the newly loaded one from the JSON
instance.scene = object;
}
Although the scene is replaced correctly, the object does not appear (despite being sure of the correct JSON format).
I attempted creating the sphere using:
const geometry = new THREE.SphereGeometry(2,100,100);
Surprisingly, with this change, the object displays perfectly after loading the JSON.
I prefer utilizing SphereBufferGeometry(), but I am puzzled by its failure. What could be missing or incorrect in my approach?
Two examples are provided below. Both display a blank sphere, however only #2 is functional:
- Using
SphereBufferGeometry: https://codepen.io/anon/pen/BgQmMq - Using
SphereGeometry: https://codepen.io/anon/pen/agBEbp