THREE.GLTFLoader: JSON content not found

Questions
1

uni.request({
url: ‘GLB model address’,
data: {
text: ‘uni.request’
},
success: (res) => {
const blob = new Blob([res.data], {
type: ‘application/octet-stream’
});
console.log(blob) // size: 3316532
let url = URL.createObjectURL(new Blob([blob]));
console.log(url) //blob:http://localhost:8080/13a61295-7ad1-4637-8db8-4a21e50dc459
const loader = new GLTFLoader();
loader.load(url, function(gltf) {
model.add(gltf.scene);
}, undefined, function(err) {
console.log(err); //THREE.GLTFLoader: JSON content not found.
})
}
});
I want to convert a model into a blob data format and plan to store it in indexDB. The code is as above, and the error THREE.GLTFLoader: JSON content not found. is finally reported. Please tell me how to deal with it correctly

2

I don’t see how that could work, you are executing async callbacks and then access their results synchronously.

Threejs without async/await and or promises makes imo little sense because everything is inherently async, trying to counteract that with callbacks is a mistake. I would first study the aforementioned javascript features, if you can await that blob your issue solves itself.

3

uni.request is to access a glb file, success is the result after success, and then the entire model data is converted into blob data (planned to be stored in indexedDB), new Blob([res.data], {type: ‘application/octet- stream’}) should be an instance of synchronous execution. Print out the corresponding data and find that there are corresponding bytes. At this time, perform URL.createObjectURL(new Blob([blob]));

4

success is an async callback most likely, you can’t access blob after that synchronously.

5

pardon me, the code wasn’t formated and it looked to me as if the loading stuff is outside the scope of the fetch. but either way, don’t use callbacks for async stuff. async await will make your code linear and understandable.

using fetch here, i don’t know what “uni” is, i’m guessing that’s your database.

async function app() {
  const buffer = await fetch(url).then(res => res.arrayBuffer())
  const url = URL.createObjectURL(new Blob([buffer]))
  const loader = new GLTFLoader()
  const { scene } = await new Promise(res => loader.load(url, res))
  model.add(scene)
  ...

ps. gltfloader has .parse, you don’t need the objectURL blob stuff, you can feed it buffers directly.

async function app() {
  const buffer = await fetch(url).then(res => res.arrayBuffer())
  const loader = new GLTFLoader()
  const { scene } = await new Promise(res => loader.parse(buffer, "/", res))
  model.add(scene)
  ...
6

thanks i’ll give it a try