konsumer
commented
6 years ago Ah, looking through source, it would seem that Scene doesn't setup a react context. Is there interest in this? It might be cool for cases like this to be able to get access to engine and current parent scene from context. I wonder if it would also make sense to have a parent engine provider, so people can do multiple scenes, for quick-swapping & multiple scenes at once (like here):
import Scene1 from './scenes/Scene1'
import Scene2 from './scenes/Scene2'
import Scene3 from './scenes/Scene3'
<Engine>
<Scene1 visible />
<Scene2 />
<Scene3 />
</Engine>If Engine is a Provider[engine], and Scene is a Consumer[engine] and Provider[scene] I think it would allow users to drill into anything with just JSX, and structure the tree however they like (as long as <Engine> is at top, and their stuff is in a <Scene>.)
I think it might help with other things, too, like making it easier to make custom components, for example I want a camera that uses different controls, so I can just do scene.activeCamera. attachControl(engine.canvas, myCustomControl) in some custom component, and it will basically work anywhere.
As a interim solution, I tried getting around it by passing it directly down:
App
import React, { Fragment } from 'react'
import { Scene, FreeCamera, HemisphericLight } from 'react-babylonjs'
import { Vector3 } from 'babylonjs'
import PlayerFire from './player/PlayerFire'
const App = () => (
<Scene id='character-choose'>
<FreeCamera name='camera1' position={new Vector3(0, 5, -10)} target={Vector3.Zero()} />
<HemisphericLight name='light1' intensity={0.7} direction={Vector3.Up()} />
{scene => (
<Fragment>
<PlayerFire position={Vector3(0, 1, 0)} scene={scene} />
</Fragment>
)}
</Scene>
)
export default AppPlayerFire
import React from 'react'
import { Sphere, StandardMaterial } from 'react-babylonjs'
import { Color3 } from 'babylonjs'
const PlayerFire = ({ scene, ...props }) => (
<Sphere name='PlayerFire' diameter={2} segments={16} scene={scene} {...props}>
<StandardMaterial diffuseColor={Color3.Red()} specularColor={Color3.Black()} />
</Sphere>
)
export default PlayerFireBut I got the same error, not sure why.
brianzinn
I'm trying to make a simple character-chooser screen, with 3 characters (colored spheres, for now) and I can't seem to load them from imported definitions. I am trying to have all the characters/models in their own files, so I can just load the entities I need for a scene. I imagine that each component should track it's own position and visual state (like which animation to play, etc) via props, and the environment will set positions, lighting, terrain, etc. Here is an example, with just one:
App.js
PlayerFire.js
I get this error and a blank screen:
If I just do all the code inline like this, it works fine:
Is
contextnot working how I expect, or am I doing something else wrong?