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.

github brianzinn / create-react-app-typescript-babylonjs / src / App.tsx View on Github external
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>
github brianzinn / create-react-app-babylonjs / src / remixMeshMashup / MashupButton.jsx View on Github external
}
    } else {
       console.error('onControlAdded(): no host instance -&gt; mesh -&gt; material', button3d)
    }
}

const MashupButton = (props) =&gt; (
    
        
            <img height="180px" width="180px" name="{`img-${props.text}`}">
            
        
    
)

export default withScene(MashupButton)
github brianzinn / create-react-app-babylonjs / src / withModel.js View on Github external
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)}
  /&gt;
`}
                
              
          
        
      
    )
  }
}

export default withBabylonJS(WithModel)
github brianzinn / create-react-app-babylonjs / src / ScaledModelWithProgress.js View on Github external
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) ] }&gt;
                            
                        
                        
                    
                }
            
        )
    }
}

export default withScene(ScaledModelWithProgress)

react-babylonjs

React for Babylon.js

MIT
Latest version published 5 days ago

Package Health Score

78 / 100
Full package analysis