Upon utilizing three.js, I encountered an error while parsing data from the GLTF JSON file. This file was exported from the three.js 3D viewer and editor, indicating a version of 4.5 in the JSON content.
Highlighted below is the JSX code snippet:
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
// Spaceships
import Praetor from "../Assets/GameObjects/Spaceships/Praetor.json";
const SpaceshipLoader = new GLTFLoader();
class Spaceship {
constructor() {
this.health = 100;
this.speed = 10;
this.positionX = 0;
this.positionY = 0;
}
create(Scene) {
// Loading the spaceship into the scene
SpaceshipLoader.parse(
Praetor,
function (SpaceshipObject) {
Scene.add(SpaceshipObject);
},
function (xhr) {
console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
},
function (error) {
console.log("An error occurred");
console.log(error);
}
);
}
move() {}
shoot() {}
}
export { Spaceship };
Below is an excerpt from the JSON file data, excluding the Array buffers:
{
"metadata": {
"version": "4.5",
"type": "Object",
"generator": "Object3D.toJSON"
},
"geometries": [
{
"uuid": "d6edee71-c106-4e47-b6eb-4fed31adf432",
"type": "BufferGeometry",
"data": {
"attributes": {
…
},
"index": {
"type": "Uint16Array",
"array": [
0, 1, 2, 3, 4, 5, 6, 7, 8, 6, 9, 10, 6, 11, 12, 13, 14, 15, 16, 17,
18, 19, 20, 21, 19, 22, 23, 24, 25, 26, 27, 28, 29, 27, 30, 31, 32,
33, 34, 35, 36, 37, 35, 38, 39, 40, 41, 42, 40, 43, 44, 45, 46, 47
]
},
"interleavedBuffers": {
"b443ef6f-e5e3-4350-9ef6-c45065b45033": {
"uuid": "b443ef6f-e5e3-4350-9ef6-c45065b45033",
"buffer": "53392d6c-081d-44a5-ace0-badffbc81707",
"type": "Float32Array",
"stride": 8
}
},
It's worth mentioning that the object loaded flawlessly in the three.js editor.