react-babylonjs aims to be an unopinionated module for integrating React and BabylonJS. This is a sample project to help people get started.
If you are cloning this repo, you just need:
$ yarn install # Install project dependencies $ yarn start # Compile and launch (same as `npm start`)or
npm install # Install project dependencies npm start # Compile and launch (same as `yarn start`)If you are starting a fresh Create React App, then you should only need these dependencies.
yarn add babylonjs yarn add react-babylonjs npm install babylonjs npm install react-babylonjsIf you are using the 3D GUI components then you will need 'babylonjs-gui' and if you are loading 3D models 'babylonjs-loaders'.
A BabylonJS scene to your webpage in either a declarative manner or code manner (or combination).
Can be done purely with React Components and zero code.
<Scene id="sample-canvas"> <FreeCamera name="camera1" position={new Vector3(0, 5, -10)} target={Vector3.Zero()} /> <HemisphericLight name="light1" intensity={0.7} direction={Vector3.Up()} /> <Sphere name="sphere1" diameter={2} segments={16} position={new Vector3(0, 1, 0)} /> <Box name="box" size={1.7} position={new Vector3(0, 1, 0)}> <RotateMeshBehavior radians={0.01} axis={Axis.Y} /> </Box> <Ground name="ground1" width={6} height={6} subdivisions={2} /> </Scene>You can easily control BabylonJS models as well. This sample loads 3D models and controls them with buttons. live demo: with model live demo: with props
class WithModel extends React.Component { ... render() { return ( <Scene id="sample-canvas"> <ArcRotateCamera name="camera1" alpha={Math.PI / 2} beta={Math.PI / 2} radius={0.075} target={Vector3.Zero()} minZ={0.001} /> <HemisphericLight name="light1" intensity={0.7} direction={Vector3.Up()} /> <Model position={ new Vector3(0.02, 0, 0)} rootUrl = {`${baseUrl}BoomBox/glTF/`} sceneFilename="BoomBox.gltf" /> </Scene> ) } }class WithVR extends React.Component { render() { return ( <Scene id="sample-canvas" onMeshPicked={this.onMeshPicked}> <ArcRotateCamera name="arc" target={ new Vector3(0, 1, 0) } alpha={-Math.PI / 2} beta={(0.5 + (Math.PI / 4))} radius={2} minZ={0.001} /> <DirectionalLight name="dl" direction={new Vector3(0, -0.5, 0.5)} position = {new Vector3(0, 2, 0.5)}> <ShadowGenerator mapSize={1024} useBlurExponentialShadowMap={true} blurKernel={32} shadowCasters={["counterClockwise", "clockwise", "BoomBox"]} /> </DirectionalLight> <IcoSphere name="counterClockwise" position={new Vector3(-0.5, 1, 0)} radius={0.2} flat={true} subdivisions={1}> <StandardMaterial diffuseColor={Color3.Yellow()} specularColor={Color3.Black()} /> <RotateMeshBehavior radians={0.01} axis={Axis.Y} /> </IcoSphere> <Model rotation= {new Vector3(0, this.state.modelRotationY, 0)} position={ new Vector3(0, 1, 0)} rootUrl = {`${baseUrl}BoomBox/glTF/`} sceneFilename="BoomBox.gltf" scaling={ new Vector3(20, 20, 20) } /> <IcoSphere name="clockwise" position={new Vector3(0.5, 1, 0)} radius={0.2} flat={true} subdivisions={1}> <StandardMaterial diffuseColor={Color3.FromInts(255, 165, 0)} specularColor={Color3.Black()} /> <RotateMeshBehavior radians={-0.01} axis={Axis.Y} /> </IcoSphere> <VRExperience createDeviceOrientationCamera={false} teleportEnvironmentGround={true} /> <Environment enableGroundShadow= {true} groundYBias={1} mainColor={Color3.FromHexString("#74b9ff")} /> </Scene> ) } }<Scene id="sample-canvas" onSceneMount={this.loadScene} />- Add full example for code only as well as a code/declarative combination and new createCamera() usage example.
- Add Gizmo example with redo/undo - synced with React + BabylonJS.
This project was bootstrapped with Create React App. You can find out about bootstrapping and ejecting on that site. This project has not been ejected.