How to load raw gltf file with THREE.js

Question

I have a raw gltf file like this How can I load this in THREE? I can't load it by file path due to circumstances.

const rawGltf = '{
    "asset" : {
        "generator" : "Khronos glTF Blender I/O v3.2.43",
        "version" : "2.0"
    },
    "scene" : 0,
    "scenes" : [
...
'

I want to do something like loader.load in the documentation for raw files. https://threejs.org/docs/#api/en/loaders/managers/LoadingManager

when I do like

  const dataURL =
    "data:model/gltf+json;base64," + Buffer.from(rawGltf, "base64").toString("base64");
  const gltf = useLoader(GLTFLoader, dataURL);

error occurs

index.js?49e6:21 Uncaught Could not load data:model/gltf+json;base64,assetgeneratorKhronosglTFBlenderI/Ov3243version20scene0scenesnameScenenodes0nodesmesh0nameCubematerialsdoubleSidedtruenameMaterialpbrMetallicRoughnessbaseColorFactor0800000011920929080000001192092908000000119209291metallicFactor0roughnessFactor04000000059604645meshesnameCubeprimitivesattributesPOSITION0NORMAL1TEXCOORD/02indices3material0accessorsbufferView0componentType5126count24max111min+1+1+1typeVEC3bufferView1componentType5126count24typeVEC3bufferView2componentType5126count24typeVEC2bufferView3componentType5123count36typeSCALARbufferViewsbuffer0byteLength288byteOffset0buffer0byteLength288byteOffset288buffer0byteLength192byteOffset576buffer0byteLength72byteOffset768buffersbyteLength840uridataapplication/octet+streambase64AACAPwAAgD8AAIC/AACAPwAAgD8AAIC/AACAPwAAgD8AAIC/AACAPwAAgL8AAIC/AACAPwAAgL8AAIC/AACAPwAAgL8AAIC/AACAPwAAgD8AAIA/AACAPwAAgD8AAIA/AACAPwAAgD8AAIA/AACAPwAAgL8AAIA/AACAPwAAgL8AAIA/AACAPwAAgL8AAIA/AACAvwAAgD8AAIC/AACAvwAAgD8AAIC/AACAvwAAgD8AAIC/AACAvwAAgL8AAIC/AACAvwAAgL8AAIC/AACAvwAAgL8AAIC/AACAvwAAgD8AAIA/AACAvwAAgD8AAIA/AACAvwAAgD8AAIA/AACAvwAAgL8AAIA/AACAvwAAgL8AAIA/AACAvwAAgL8AAIA/AAAAAAAAAAAAAIC/AAAAAAAAgD8AAACAAACAPwAAAAAAAACAAAAAAAAAgL8AAACAAAAAAAAAAAAAAIC/AACAPwAAAAAAAACAAAAAAAAAAAAAAIA/AAAAAAAAgD8AAACAAACAPwAAAAAAAACAAAAAAAAAgL8AAACAAAAAAAAAAAAAAIA/AACAPwAAAAAAAACAAACAvwAAAAAAAACAAAAAAAAAAAAAAIC/AAAAAAAAgD8AAACAAACAvwAAAAAAAACAAAAAAAAAgL8AAACAAAAAAAAAAAAAAIC/AACAvwAAAAAAAACAAAAAAAAAAAAAAIA/AAAAAAAAgD8AAACAAACAvwAAAAAAAACAAAAAAAAAgL8AAACAAAAAAAAAAAAAAIA/AAAgPwAAAD8AACA/AAAAPwAAID8AAAA/AADAPgAAAD8AAMAAAAAPwAAwD4AAAA/AAAgPwAAgD4AACA/AACAPgAAID8AAIAAADAPgAAgD4AAMAAACAPgAAwD4AAIAAAAgPwAAQD8AACA/AABAPwAAYD8AAAA/AADAPgAAQD8AAAAAAAAPwAAwD4AAEA/AAAgPwAAgD8AACA/AAAAAAAAYD8AAIAAADAPgAAgD8AAAAAACAPgAAwD4AAAAAAQAOABQAAQAUAAcACgAGABMACgATABcAFQASAAwAFQAMAA8AEAADAAkAEAAJABYABQACAAgABQAIAAsAEQANAAAAEQAAAAQA=: Unexpected token 'j', "j���z���"... is not valid JSON

when i do

  const dataURL =
    "data:model/gltf+json;base64," + rawGltf);
  const gltf = useLoader(GLTFLoader, dataURL);

error occurs

Uncaught Could not load data:model/gltf+json;base64,{"asset":{"generator":"Khronos glTF Blender I/O 
......
ABYABQACAAgABQAIAAsAEQANAAAAEQAAAAQA"}]}: Failed to fetch

when i do

const GeneratePrimitiveObj = (obj: any) => {
  const dataURL = "data:model/gltf+json;base64," + btoa(obj);
  const gltf = useLoader(GLTFLoader, dataURL);
  return gltf;
};

              <primitive
                object={GeneratePrimitiveObj(JSON.stringify(objects[0]["obj_json"])).scene}
                scale={0.8}
              />

occurs

Failed to load buffer "data:application/octet-stream;base64,AACAPwAAgD8AAIC/AACAPwAAgD8AAIC/AAC

Welcome to Stack Overflow. Please take a moment to [take the tour](https://stackoverflow.com/tour) and visit the [Help Center](https://stackoverflow.com/help), especially [`How do I ask a good question?`](https://stackoverflow.com/help/how-to-ask) and [`How to create a Minimal, Reproducible Example`](https://stackoverflow.com/help/minimal-reproducible-example). — TheJim01, Oct 25 '22 at 12:36
For three.js-specific information, be sure to reference the [docs](https://threejs.org/docs) and the [examples](https://threejs.org/examples)--you can learn a lot by looking at the code for the examples, and cross-referencing the docs. Also, see [Docs: Creating a scene](https://threejs.org/docs/#manual/en/introduction/Creating-a-scene) for an intro with descriptions on the what/how of how the scene is created and rendered. — TheJim01, Oct 25 '22 at 12:36
For your specific question, you should have found [`GLTFLoader` in the docs](https://threejs.org/docs/#examples/en/loaders/GLTFLoader). — TheJim01, Oct 25 '22 at 12:37
As I said above, I'm writing the gltf directly in the code and not in the resource URL and want to load it — k K, Oct 26 '22 at 06:02

score 0 · Accepted Answer · answered Oct 26 '22 at 14:00

0

You can still use the loader. Convert your GLTF code into a DataURL, then pass that URL into the loader.

const rawGltf = '...'
const b64 = btoa( rawGltf )
const dataURL = 'data:model/gltf+json;base64,' + b64

const loader = new GLTFLoader()
loader.load( dataURL, data => {
  // handle the GLTF data
} )

answered Oct 26 '22 at 14:00

TheJim01

8,411
1
30
54

Thanks for the great help.I have my issues, but I've made progress.I editted my question.Further answers would be very helpful. – k K Oct 29 '22 at 08:45
@kK You're missing the `btoa` on line 2 of my example. The dataURL "payload" needs to be encoded. – TheJim01 Oct 31 '22 at 16:19
Thanks for your help. Even when i add btoa, i get follwing errorsUncaught Could not load data:model/gltf+json;base64,ewogICAiYXNzZXQiOiB7CiAgICA....THREE.GLTFLoader: Failed to load buffer "data:application/octet-stream;base64,AACAPwAAgD8 – k K Nov 07 '22 at 00:46
@kK I'm not sure why it's not working for you. I just tried this [this sample](https://github.com/KhronosGroup/glTF-Sample-Models/tree/master/2.0/Box/glTF) from the Khronos Group, and it worked fine. I even base64-encoded the `.bin` file, and it still loaded as expected. – TheJim01 Nov 08 '22 at 04:57
The one with gltf directly in the code as you described worked, thanks! Sorry for the lack of explanation. I'm struggling to display the data I put as JSON in Prisma. I've added a question. Any answers would be a big help. – k K Nov 10 '22 at 04:11
@kK It sounds like you need to validate that the data coming from Prisma is correct and in the format you expect. JavaScript will try to coerce variables into an expected type, so something like `btoa( { try: 'sometihng' } )` will actually produce a base64-encoded string, but running the result though `atob` will show the value was really coerced into the string `"[ Object object ]"`. – TheJim01 Nov 10 '22 at 15:15
Thanks, can't thank you enough. Looking at the JSON, the original buffers uri had a blank space where it should have been a +. Replacing the blanks with + in the uri of buffers worked. – k K Nov 14 '22 at 04:55
@kK If this answer has answered your question, please accept it so future readers can see the problem was resolved successfully. – TheJim01 Nov 14 '22 at 16:05

How to load raw gltf file with THREE.js

1 Answers1