Embedding scene in react application does not work

[tgeis02]

Hey guys,

I am having trouble getting a simple aframe scene into my react application. I simply want to depict .gltf files in my app to preview them and click on Full Screen to walk around in it. I used a simple example from aframe-react to insert a basic scene:

<Scene embedded={true}>
        <Entity geometry={{primitive: 'box'}} material={{color: 'red'}} position={{x: 0, y: 0, z: -5}}/>
        <Entity particle-system={{preset: 'snow'}}/>
        <Entity light={{type: 'point'}}/>
        <Entity gltf-model={{src: 'virtualcity.gltf'}}/>
        <Entity text={{value: 'Hello, WebVR!'}}/>
</Scene>

(The gltf-model part is pointing to a file I do not own. I can comment this part out and it still works.)
Without the embedded tag, I see the Scene on my page. It is in front of the other elements and I can only click the scene to interact with. That is why I want to embed it in a smaller window. But as soon as I include the embedded tag, the scene is not displaying anymore and I get some errors which I can't solve:

THREE.WebGLShader: Shader couldn't compile.
THREE.WebGLProgram: shader error:  0 35715 false gl.getProgramInfoLog
WebGL: INVALID_OPERATION: useProgram: program not valid
THREE.WebGLRenderer: Context Lost.
The development server has disconnected.
Refresh the page if necessary.

Can someone help with this? Maybe has a different idea to get a preview of a scene? Like I mentioned before, I want to depict .gltf files instead of plain code.

Thank you!

[UltimateForm]

having the same issue

[antoninklopp]

Hi,

This is a pretty old issue but I came across a solution.
The problem is that when the scene is embedded, it uses the height from the parent component. But if this height is a div with a percentage for example, it will not get a proper set height and will set its own height to zero, which explains that you can't see it.

Setting a parent div with a height and width in px will display the scene.

Hope it fixes your problem