Model-viewer: Why doesn't this load anything?

[corysimmons]

Description

Downloaded your Astronaut.glb and I'm serving it over a CORS-friendly https-friendly proxy (ngrok). I'm trying to load the most basic example I've seen of <model-viewer> within a create-react-app project on CodeSandbox.

It seems to load (I can see its shadow dom elements, etc..)

The network tab indicates the model is successfully being fetched.

But nothing shows up in the viewer...

Live Demo

https://codesandbox.io/s/model-viewer-react-t2u1v?file=/src/App.js (have to download the glb, and follow the comment instructions, then replace the ngrok url to replicate)

Browser Affected

• [x] Chrome 84
• [ ] Edge
• [ ] Firefox
• [ ] Helios
• [ ] IE
• [ ] Safari

OS

• [ ] Android
• [ ] iOS
• [ ] Linux
• [x] MacOS 10.15.4
• [ ] Windows

Versions

• model-viewer: v1.1.0
• three.js: 0.119.0

[elalish]

I see a console error that looks unrelated to model-viewer:

Not sure why it doesn't show up in the sandbox console. If you search our issues you'll find several others related to React. I'm no expert, but it does seem like importing components into React is not entirely trivial.

[corysimmons]

I did search for React in your issues and came across a lot of problems related to just importing the library itself, with the workaround being import "@google/model-viewer/dist/model-viewer" instead of the more intuitive import "@google/model-viewer"

I don't get the error that you are getting (in either the embedded console, or in the standalone app's console):

That Babel note is just a warning (something about source maps).

It seems like the component is loading (so import "@google/model-viewer/dist/model-viewer" is working and the model-viewer library is available):

And the Astronaut.glb is 200:

The only thing is the .glb isn't showing up... What element gets populated with the .glb? <canvas> I'm guessing?

I have noticed that <canvas> element sporadically changes height. Not sure what that's about.

It's possible it has something to do with Webpack loaders? I'll try to investigate a bit, but tbh Google should stop fighting with Facebook and just concede that React exists and is a super popular framework, then provide a really, really basic "Getting Started" example for React.

Hate stumbling upon interesting-looking Google OSS and remembering I can't use half of it because I, and a ton of other devs, use React and Google has 30th class support for it.

[corysimmons]

Went with https://github.com/react-spring/react-three-fiber#ecosystem instead.

[elalish]

@corysimmons Your commentary is fair, but I assure you I don't have anything against React, I just don't know anything about it. I believe I fixed the problem with import "@google/model-viewer", and it's strange that I'm getting different errors than you. It sounds like people have gotten this to work with React, but no one has shared a simple example of it. I'll be happy to put one on our dev pages if anyone would like to contribute.

[corysimmons]

Sorry, I wasn't trying to single you out. It's just been a pattern I've noticed. I wouldn't expect React's OSS team to provide usage for shoehorning components into Angular, or vice versa, but for web components specifically it seems like every project with 1k Stars should try to provide a super simple usage example. Ping me if you notice anyone using it in React and I'll see if I can make a reduced example based off what they did and put it in some /examples folder (NextJS does this and it's really nice).

[elalish]

I'll keep an eye out and ping you if I find something, thanks.

[elalish]

@corysimmons Looks like we just got exactly what you're after: https://github.com/google/model-viewer/issues/690#issuecomment-667063249