Couldn't load texture with Three.js

[alessio-zamparelli]

What example does this report relate to?

with-three-js

What version of Next.js are you using?

12.0.9

What version of Node.js are you using?

16.13.2

What browser are you using?

Firefox

What operating system are you using?

macOS

How are you deploying your application?

next start

Describe the Bug

When trying to load a GLB model, containing a jpg image, the image is not showing

Error on the console:
THREE.GLTFLoader: Couldn't load texture blob:http://localhost:3000/b13bda71-c4d2-4b80-ae74-ff05408a400b

Expected Behavior

The image to appear

To Reproduce

using https://github.com/vercel/next.js/tree/canary/examples/with-three-js as codebase load a model with a jpg image inside

[jawndiego]

did you ever figure this out?

[alessio-zamparelli]

No way, moved from next to react for this model...

[nzambello]

Same error here

[alessio-zamparelli]

The solution was to remove ambientation from the canvas
The ambient somehow break the lights.
Just switch from ambient to light (dot and ambient light)

[jonrrivera]

sorry, what does this mean exactly? can you please provide an example

[nzambello]

I removed the environment but I think my problem was fixed by:

• fixing a mismatch between versions (rtf version 7.x and drei 8.x for react 17 are the correct ones)
• using next-transpile-modules (https://docs.pmnd.rs/react-three-fiber/getting-started/installation#next.js)

I missed the second thing and it's important indeed, otherwise it wasn't able to get the loader to work