import { FreeCamera , HemisphericLight , Mesh , MeshBuilder , Scene , Vector3 } from '@babylonjs/core' ; import SceneComponent from 'babylonjs-hook' ; import { FC } from 'react' ; type OnSceneReadyHandler = ( scene : Scene ) => void ; type OnRenderHandler = ( scene : Scene ) => void ; let box ; const onSceneReady = ( scene ) => { var camera = new FreeCamera ( 'camera1' , new Vector3 ( 0 , 5 , - 10 ) , scene ) ; camera . setTarget ( Vector3 . Zero ( ) ) ; const canvas = scene . getEngine ( ) . getRenderingCanvas ( ) ; camera . attachControl ( canvas , true ) ; var light = new HemisphericLight ( 'light' , new Vector3 ( 0 , 1 , 0 ) , scene ) ; light . intensity = 0.7 ; box = MeshBuilder . CreateBox ( 'box' , { size : 2 } , scene ) ; box . position . y = 1 ; MeshBuilder . CreateGround ( 'ground' , { width : 6 , height : 6 } , scene ) ; } ; /**
 * Will run on every frame render.  We are spinning the box on y-axis.
 */ const onRender = ( scene ) => { if ( box !== undefined ) { var deltaTimeInMillis = scene . getEngine ( ) . getDeltaTime ( ) ; const rpm = 10 ; box . rotation . y += ( rpm / 60 ) * Math . PI * 2 * ( deltaTimeInMillis / 1000 ) ; } } ; const App = ( ) => ( < div > < SceneComponent antialias onSceneReady = { onSceneReady } onRender = { onRender } / > < /div>); export default App ;