How to use model-Viewer in React?

Question

Good afternoon.

I’m unable to use the tag in React. Does anyone know what the problem is? I had followed this tutorial

Using only HTML works normal: https://i.imgur.com/Rgkhkja.png

However, when I try to use React the result is this: https://i.imgur.com/MN09PI2.png

This is the modelviewer documentation site: https://modelviewer.dev/

Excerpt from the code:

NOTE: I put a print because when I was trying to use the code or pre was missing a part of the code

Answer 1

Hello, I tbm was with that same problem!

I followed this tutorial using lib React Helmet.

First of all, you install lib via npm with the command:

npm install --save react-helmet

After that, go to the page on which you want to apply the model-Viewer and import the lib:

import Helmet from 'react-helmet'

Once that’s done, all we need to do is put this guy inside the render method’s Return in the middle of our component by passing an attribute to apply. In our case, it is the Viewer model script:

<Helmet>
   <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
</Helmet>

I hope the post helps you in your projects somehow and any questions you have just contact me.

Instagram: @joaomiiiguel