How to use react-babylonjs - 4 common examples
To help you get started, we’ve selected a few react-babylonjs examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
brianzinn / create-react-app-typescript-babylonjs / src / App.tsx View on Github 
import React, { useCallback } from 'react';
import "@babylonjs/core/Physics/physicsEngineComponent" // side-effect adds scene.enablePhysics function
import { Vector3, PhysicsImpostor, Mesh, Nullable } from '@babylonjs/core';
import { CannonJSPlugin } from '@babylonjs/core/Physics/Plugins'
import { Scene, Engine, withBabylonJS } from 'react-babylonjs';
import './App.css';
import * as CANNON from 'cannon';
window.CANNON = CANNON;
const EngineWithContext = withBabylonJS(Engine);
const gravityVector = new Vector3(0, -9.81, 0);
let sphere: Nullable = null;
const onButtonClicked = () => {
if (sphere !== null) {
sphere.physicsImpostor!.applyImpulse(Vector3.Up().scale(10), sphere.getAbsolutePosition())
}
}
const App: React.FC = () => {
const sphereRef = useCallback(node => {
sphere = node.hostInstance;
}, []);
return (
<div></div>}
} else {
console.error('onControlAdded(): no host instance -> mesh -> material', button3d)
}
}
const MashupButton = (props) => (
<img height="180px" width="180px" name="{`img-${props.text}`}">
)
export default withScene(MashupButton)rootUrl = {\`\${baseUrl}Avocado/glTF/\`}
position = { new Vector3(-0.02, this.state.avocadoYPos, 0) }
scaling={new Vector3(this.state.avocadoScaling,
this.state.avocadoScaling, this.state.avocadoScaling)}
/>
`}
)
}
}
export default withBabylonJS(WithModel)position={new Vector3(this.props.scaleTo / 2, 0, this.props.scaleTo/60)}
setPivotMatrix={ [ Matrix.Translation(-this.props.scaleTo, 0, 0) ] }
setPreTransformMatrix={ [ Matrix.Translation(-this.props.scaleTo / 2, 0, 0) ] }>
}
)
}
}
export default withScene(ScaledModelWithProgress)
