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

Answer 1

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
} )