Tresjs / tres

Declarative ThreeJS using Vue Components
https://tresjs.org
MIT License
2.27k stars 107 forks source link

Using .glb suffix files causes the project to become unresponsive? #576

Closed estoi closed 8 months ago

estoi commented 8 months ago

Describe the bug

I have a link to a .glb suffix file which when I pass to useGLTF causes the project to not run properly for a long time. When I revert to the code in the example it returns to normal

package.json

image

Reproduction

https://stackblitz.com/edit/tresjs-basic-cxjaef?file=package.json,src%2Fcomponents%2FTheExperience.vue

Steps to reproduce

No response

System Info

System:
    OS: macOS 12.7.3
    CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
    Memory: 110.54 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 21.6.2 - ~/.nvm/versions/node/v21.6.2/bin/node
    npm: 10.2.4 - ~/.nvm/versions/node/v21.6.2/bin/npm
    bun: 1.0.29 - ~/.bun/bin/bun
  Browsers:
    Chrome: 122.0.6261.94
    Safari: 17.3.1
  npmPackages:
    @tresjs/cientos: ^3.8.0 => 3.8.0 
    @tresjs/nuxt: ^2.1.1 => 2.1.1

Used Package Manager

npm

Code of Conduct

alvarosabu commented 8 months ago

Hi @estoi, remove the import inside of the useGLTF

const { scene: model, animations } = await useGLTF(
  import('https://models.readyplayer.me/65e68d86374014375e47f33a.glb')
);

You need to pass the URL, not an import. https://stackblitz.com/edit/tresjs-basic-r5sszy?file=src%2Fcomponents%2FTheExperience.vue