supermedium / aframe-react

:atom: Build virtual reality experiences with A-Frame and React.
https://ngokevin.github.io/aframe-react-boilerplate/
MIT License
1.42k stars 151 forks source link

Unable to render gltf model #137

Open nirajupadhyay11 opened 4 years ago

nirajupadhyay11 commented 4 years ago

Hi,

I am using following versions of aframe and aframe-react

"aframe": "^1.0.3",
"aframe-react": "^4.4.0",

I am trying to render a gltf model -

    <main>
      <Container className={classes.cardGrid} maxWidth="lg">          

        <Scene embedded>
          <a-assets>
            <a-asset-item id="earth" src="https://cdn.glitch.com/36cb8393-65c6-408d-a538-055ada20431b/Astronaut.glb?1542147958948"></a-asset-item>       
          </a-assets>

          <a-box color="red" depth="2" height="4" width="0.5" position="0 0 -2"></a-box>

          <Entity gltf-model={{src:'#earth'}}></Entity>

        </Scene>
      </Container>
    </main>

but while the box is rendered, the gltf model does not get rendered. Could you please help?

nirajupadhyay11 commented 4 years ago

Here is a sandbox to recreate this issue -

https://codesandbox.io/s/aframe-react-porh5

nries1 commented 4 years ago

I am having the same issue.

paolis92 commented 4 years ago

Hi, the issue is that you are using gltf-model like this: gltf-model={{src:'#earth'}} when it should be: gltf-model={"#earth"}

The same goes for your example gltf-model={{src:'#model'}} becomes gltf-model={"#model"}

image

(I moved a bit the sphere because the astronaut was inside of it)