React multi scene , scene with multiple components

[Bill_Sullivan]

I’m creating a project using the muti scene react method of changing from scene to scene without reloading the page.

I have added a new scene but I’d like to attach two components, but when I try it doesn’t work.

I tried as an array

components={[recenterButtonComponents, treeComponents]}

Didn’t work

I tried just separating them with comma, didn’t work.
components={recenterButtonComponents, treeComponents}

I tried adding a second line repeating components
components={recenterButtonComponents}
components={treeComponents}

Here is what my code looks like, I’d like to add multiple components within this statement.

<AFrameScene
sceneHtml={require(‘./tree.html’)}
components={recenterButtonComponents}
/>

[rama_rambudiarto]

you must use if you want change the the scene or create button to direct to other page

[Bill_Sullivan]

Hi Rama,

I understand I have to use REACT, but my question is how can I add multiple components (the example they give in the tutorial only has one component defined, I would like to add more, but when I add a second component using a comma it doesn’t work.

In my example below I have “recenterButtonComponents” I would like to add a second component called “treeComponents”

[rama_rambudiarto]

components={[
{name:‘example’, val:recenterbuttonComponents},
{name:‘example’, val:treeComponents},
]}

[Bill_Sullivan]

Thanks Rama,

I’m still just getting my head around doing things the original way and migrating it over to use the React scene switching… Nothing like learning on top of learning eh!!

Thanks again.

[rama_rambudiarto]

yess you can use repo on 8thwall github react scene.
so this will be help you, and dont forget learn typescript too for good script haha

[Bill_Sullivan]

BAAAAA I wish I had time for learning another language… maybe once i get this project out the door I’ll look more into it.

Spending a lot of time learning intricacies of exporting blender objects and animations as useful glb files, baking keyframes and textures, learning how to export mesh deformations and materials as well.

It’s starting to take shape and it’s looking great so far, can’t wait for more of this to be baked into my subconscious so I can do more playing then learning.

[Bill_Sullivan]

Hey Ram, thanks for the code, but when I implement it I don’t get any errors but those components don’t seem to get passed, as my recenter disappears where it was working with just components={recenterButtonComponents}

but once I switched to your method of including multiple components it doesn’t crash but I don’t see my recenter button so I’m not sure what I have wrong…

components={[

{name:‘recenter’, val:recenterButtonComponents},

{name:‘hotspot’, val:tapHotspotComponents},

{name:‘closehotspot’, val:tapCloseComponents},

]}

[rama_rambudiarto]

can you share the full code?

[Bill_Sullivan]

import {AFrameScene} from ‘…/lib/aframe-components’
import {FloatingBackButton} from ‘…/lib/material-ui-components’
import {TreeSceneComponents} from ‘…/components/tree-components’

import {recenterButtonComponents} from ‘…/components/recenter’

import {tapHotspotComponents} from ‘…/components/tap-hotspot’
import {tapCloseComponents} from ‘…/components/tap-close’

declare let React: any
declare let ReactRouterDOM: any

const {withRouter} = ReactRouterDOM

const SphereScene = withRouter(({match}) => (
<React.Fragment>

<AFrameScene
sceneHtml={require(‘./kiosk_sphere.html’)}
components={recenterButtonComponents}
/>
</React.Fragment>
))

export {SphereScene}

**when I replace the components line with what you sent it doesn’t work…