Hi, here.
I’ve got an issue with parsing gttf zip from ArrayBuffer using (GLTFLoader.parse) on lib v0.156.1. The same zip archive parsed fine on v0.125.0
Here is an example of zip (can’t upload zip here due to size). Download source of example Yellow Plaster 3d model. Free download. | Creazilla
In some phase, parsing is going well…
Running env - it’s a desktop web app in Chrome, bundled by webpack.
The glTF can be loaded as expected in the three.js editor:
Note, that you have to unzip the archive first before using GLTFLoader.
Sorry, your link to the editor shows empty axes. Did you parse zip as ArrayBuffer?
data comes as ArrayBuffer to loader.parse method, which you can see on the screenshot
const loader = new GLTFLoader();
const parsed = loader.parse(
data, // ArrayBuffer
'',
(result) => {
processObject(result); // this callback didn't call at all due to error
},
(err) => {
throw Error(err); // throw an error on some phase of parsing
}
);
Yes, that is as expected. You have to drag’n’drop your asset into the editor and also add some lighting.
No, I have unpacked the zip first.
But, how does it parse it underhood? I’m interesting on const loader = new GLTFLoader(); loader.parse() method
The editor code that imports the glTF asset looks like so:
Ok, as you can see const contents = event.target.result; provide the similar data to loader.parse( contents, '', function ( result ) {
I’ve added this part as well to my code
`const { DRACOLoader } = await import( ‘three/examples/jsm/loaders/DRACOLoader’ );
const { KTX2Loader } = await import( ‘three/examples/jsm/loaders/KTX2Loader’ );
const { MeshoptDecoder } = await import( ‘three/examples/jsm/libs/meshopt_decoder.module’ );
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath( '../examples/jsm/libs/draco/gltf/' );
const ktx2Loader = new KTX2Loader();
ktx2Loader.setTranscoderPath( '../examples/jsm/libs/basis/' );
loader.setDRACOLoader( dracoLoader );
loader.setKTX2Loader( ktx2Loader );
loader.setMeshoptDecoder( MeshoptDecoder );`
but got the same error
This type of error almost always means that some file is not in the location it should be in, relative to the URL you’re importing. I don’t think we can answer that one for you based on screenshots. If you’re using a build tool like Vite or Webpack, it probably has some documentation for “static” or “public” folders which you can review to host assets like 3D models.
No, but the image errors certainly mean that the images cannot be found in the given location. I don’t know what the “universal-loader.ts” file is, but the “Can’t parse ArrayBuffer” message could mean your file also depends on a .bin file, which also cannot be found at the given URL.
I’m back since the issue is still not resolved for me. So, this is my loader
data comes as arrayBuffer
after new TextDecoder().decode(data) // it becomes as this object
const decoded = {
"asset": {
"generator": "Khronos glTF Blender I/O v1.6.16",
"version": "2.0"
},
"extensionsUsed": [
"KHR_texture_transform"
],
"extensionsRequired": [
"KHR_texture_transform"
],
"scene": 0,
"scenes": [
{
"name": "Scene",
"nodes": [
0
]
}
],
"nodes": [
{
"mesh": 0,
"name": "sphere_gltf"
}
],
"materials": [
{
"doubleSided": true,
"name": "yellow_plaster",
"normalTexture": {
"extensions": {
"KHR_texture_transform": {
"offset": [
0,
-1
],
"scale": [
2,
2
]
}
},
"index": 0
},
"pbrMetallicRoughness": {
"baseColorTexture": {
"extensions": {
"KHR_texture_transform": {
"offset": [
0,
-1
],
"scale": [
2,
2
]
}
},
"index": 1
},
"metallicFactor": 0,
"metallicRoughnessTexture": {
"extensions": {
"KHR_texture_transform": {
"offset": [
0,
-1
],
"scale": [
2,
2
]
}
},
"index": 2
}
}
}
],
"meshes": [
{
"name": "Sphere.001",
"primitives": [
{
"attributes": {
"POSITION": 0,
"NORMAL": 1,
"TEXCOORD_0": 2
},
"indices": 3,
"material": 0
}
]
}
],
"textures": [
{
"sampler": 0,
"source": 0
},
{
"sampler": 0,
"source": 1
},
{
"sampler": 0,
"source": 2
}
],
"images": [
{
"mimeType": "image/jpeg",
"name": "yellow_plaster_nor_gl_4k",
"uri": "textures/yellow_plaster_nor_gl_4k.jpg"
},
{
"mimeType": "image/jpeg",
"name": "yellow_plaster_diff_4k",
"uri": "textures/yellow_plaster_diff_4k.jpg"
},
{
"mimeType": "image/jpeg",
"name": "yellow_plaster_rough_4k",
"uri": "textures/yellow_plaster_rough_4k.jpg"
}
],
"accessors": [
{
"bufferView": 0,
"componentType": 5126,
"count": 53924,
"max": [
0.997482419013977,
1.004236102104187,
0.9975455403327942
],
"min": [
-0.9974827766418457,
-1.0036455392837524,
-0.9975481629371643
],
"type": "VEC3"
},
{
"bufferView": 1,
"componentType": 5126,
"count": 53924,
"type": "VEC3"
},
{
"bufferView": 2,
"componentType": 5126,
"count": 53924,
"type": "VEC2"
},
{
"bufferView": 3,
"componentType": 5123,
"count": 322170,
"type": "SCALAR"
}
],
"bufferViews": [
{
"buffer": 0,
"byteLength": 647088,
"byteOffset": 0
},
{
"buffer": 0,
"byteLength": 647088,
"byteOffset": 647088
},
{
"buffer": 0,
"byteLength": 431392,
"byteOffset": 1294176
},
{
"buffer": 0,
"byteLength": 644340,
"byteOffset": 1725568
}
],
"samplers": [
{
"magFilter": 9729,
"minFilter": 9987
}
],
"buffers": [
{
"byteLength": 2369908,
"uri": "yellow_plaster.bin"
}
]
}
GLTFLoader.parse(
new TextDecoder().decode(data),
'',
(result) => {
processObject(result);
},
(err) => {
onMessage({ type: 'error', err }); // RangeError: Invalid typed array length: 161772
at new Float32Array
throw Error(err);
}
@Mugen87 , @donmccurdy I’ve created an online example (Angular Threejs Demo Basic GLTF zip - StackBlitz) to check. Still have the same issue . Could you check and help me to get what is wrong here ?