Load GLB file with input

[frail mason]

Hi, I want to import glb file into blank scene with input button.

[slate valve]

you just need to call a function
this is documentation on how to load glb https://threejs.org/docs/#examples/en/loaders/GLTFLoader

[frail mason]

so how can I set the file path?

[slate valve]

if you are using webpack or something similar there should be static folder, if you are using examples in three.js documentation just next to index.js add your model and just provide the path

[frail mason]

I dont want to keep files as local or server. I want to add model from users.

[slate valve]

Gltf loader can handle Data url as well

[frail mason]

can you write sample code? how can I connect html input and three js function?

[torpid otter]

maybe this can get you started https://github.com/donmccurdy/three-gltf-viewer

[frail mason]

https://codepen.io/AdamJames93/pen/rNMKxer

I found this. this is like what I want but this can import only collada files. I will try convert to glb.

[kind hemlock]

const handleFile = async (file: File) => {
    if (file === null) {
      return
    } else {
         //regex to check for file extension
      if (isGlbOrGltf(file.name)) { 
        let reader = new FileReader()
        reader.readAsArrayBuffer(file)
        reader.onload = (gltfGlb: ProgressEvent<ArrayBuffer | any>) => {
          if (gltfGlb.target === null) {
            return
          } else {
            //loader.parse gltfGlb.target)
          }
        }
      }
}```