
## The Possibilities

Using 'webview' it is possible to run the Babylon.js Engine inside React Native on Windows and iOS with Android still under test.

However currently there are difficulties, especially on Windows, but with determination it is possible. Some issues are:

- Debugging with webview can be very problematic however logging is possible.
- Performance inside the webview is acceptable on Windows but it can be improved on iOS with a small twist
- To load models you need to serve your files through a web server
- The babylon RN “engine” is basically a website
- Some packages for RN are custom and not yet merged inside their respective repos, so you need care with package.json
- Getting it to work on React Native Windows is an art form at times

The experiment that provided the proof of concept and details of how to do it are in the [Cubeslam Blog](http://cubeslam.net/2017/11/16/babylonjs-inside-react-native-inception-style/) so to give it a go give it a read.



![VRM top header](/img/resources/babylonjs_and_vrm/vrm_topheader.png)

## What is VRM?

> “VRM” is **a file format for handling 3D humanoid avatar (3D model) data for VR applications**. It is based on glTF2.0. Anyone is free to use it.
>
> In addition, a standard implementation ([UniVRM](https://github.com/vrm-c/UniVRM)) in c## that can import and export VRM file in [Unity](https://unity3d.com/) is released as open source.

Additional information can be viewed at [vrm.dev](https://vrm.dev/en/).

## How to load VRM file inBabylon.js?

You can load VRM file inBabylon.js that uses [babylon-vrm-loader](https://github.com/virtual-cast/babylon-vrm-loader), which is community-madeBabylon.js glTF Loader Extension for `VRM`.

It supports `.vrm` and `.vci` file loading.

## A brief example

PG: <Playground id="#K5W35Y" title="VRM" description="Example of loading a VRM file."/>

## What can do?

For example, once write some animation code, all VRM models can animate it!

![VRM Same Code Animation](/img/resources/babylonjs_and_vrm/vrm-samecode-animation.gif)

```javascript
// example code
vrmManager.humanoidBone.leftShoulder.rotationQuaternion = Quaternion.FromEulerAngles(Math.sin((Math.PI / 4) * (elapsedTime / 200)), 0, Math.PI / 3.5);
vrmManager.humanoidBone.rightShoulder.rotationQuaternion = Quaternion.FromEulerAngles(Math.sin(Math.PI + (Math.PI / 4) * (elapsedTime / 200)), 0, -Math.PI / 3.5);
vrmManager.humanoidBone.leftUpperLeg.rotationQuaternion = Quaternion.FromEulerAngles(Math.sin((Math.PI / 4) * (elapsedTime / 200)), 0, 0);
vrmManager.humanoidBone.rightUpperLeg.rotationQuaternion = Quaternion.FromEulerAngles(Math.sin(Math.PI + (Math.PI / 4) * (elapsedTime / 200)), 0, 0);
vrmManager.humanoidBone.leftLowerLeg.rotationQuaternion = Quaternion.FromEulerAngles(-Math.PI / 6, 0, 0);
vrmManager.humanoidBone.rightLowerLeg.rotationQuaternion = Quaternion.FromEulerAngles(-Math.PI / 6, 0, 0);
```

BabylonJS [standard animation mechanism](/divingDeeper/animation/animation_introduction) also can be used.

For instance, you can make pose to any VRM.

PG: <Playground id="#K5W35Y#8" title="VRM" description="Posing the VRM"/>

## How to use?

On browser example is [here](https://codepen.io/anon/pen/zQXyxL?editors=1010).

Example PG: <Playground id="#K5W35Y" title="VRM" description="Example VRM"/>

On npm/yarn with webpack...

```bash
$ npm install --save @babylonjs/core @babylonjs/loaders babylon-vrm-loader
## or
$ yarn add @babylonjs/core @babylonjs/loaders babylon-vrm-loader
```

```javascript
import * as BABYLON from "@babylonjs/core";

// has side-effect
// ref. https://webpack.js.org/guides/tree-shaking#mark-the-file-as-side-effect-free
import "babylon-vrm-loader";

// vrmFile is File object retrieved by <input type="file">.
const scene = await BABYLON.SceneLoader.LoadAsync("file:", vrmFile, engine);
const vrmManager = scene.metadata.vrmManagers[0];

// Update secondary animation
scene.onBeforeRenderObservable.add(() => {
  vrmManager.update(scene.getEngine().getDeltaTime());
});

// Model Transformation
vrmManager.rootMesh.translate(new BABYLON.Vector3(1, 0, 0), 1);

// Work with HumanoidBone
vrmManager.humanoidBone.leftUpperArm.addRotation(0, 1, 0);

// Work with BlendShape(MorphTarget)
vrmManager.morphing("Joy", 1.0);
```

## External

- [vrm.dev](https://vrm.dev/en/)
- [virtual-cast/babylon-vrm-loader: GitHub](https://github.com/virtual-cast/babylon-vrm-loader)
- [vrm-c/UniVRM: GitHub](https://github.com/vrm-c/UniVRM)
- [Loading VRM Humanoid-based model - Demos and projects - Babylon.js Forums](https://forum.babylonjs.com/t/loading-vrm-humanoid-based-model/4980/8)



## How to useBabylon.js with React

For anyone interested, it is not difficult to integrateBabylon.js into a React application.

## What you need

It's up to you if you choose Create React App or a custom project; only how to loadBabylon.js in a component will be discussed here. This example uses the newer `@babylonjs/core` ES6 NPM, but can also be modified to work with the `babylonjs` NPM.

## Component

We are going to build a reusable React component that takes care of starting upBabylon.js for us!

In a working React project you first need to install the package `@babylonjs/core` using npm or yarn:

```bash
npm install @babylonjs/core
```

```bash
yarn add @babylonjs/core
```

Create a file called `SceneComponent.jsx` and add this:

```jsx
import { Engine, Scene } from "@babylonjs/core";
import React, { useEffect, useRef } from "react";

export default (props) => {
  const reactCanvas = useRef(null);
  const { antialias, engineOptions, adaptToDeviceRatio, sceneOptions, onRender, onSceneReady, ...rest } = props;

  useEffect(() => {
    if (reactCanvas.current) {
      const engine = new Engine(reactCanvas.current, antialias, engineOptions, adaptToDeviceRatio);
      const scene = new Scene(engine, sceneOptions);
      if (scene.isReady()) {
        props.onSceneReady(scene);
      } else {
        scene.onReadyObservable.addOnce((scene) => props.onSceneReady(scene));
      }

      engine.runRenderLoop(() => {
        if (typeof onRender === "function") {
          onRender(scene);
        }
        scene.render();
      });

      const resize = () => {
        scene.getEngine().resize();
      };

      if (window) {
        window.addEventListener("resize", resize);
      }

      return () => {
        scene.getEngine().dispose();

        if (window) {
          window.removeEventListener("resize", resize);
        }
      };
    }
  }, [reactCanvas]);

  return <canvas ref={reactCanvas} {...rest} />;
};
```

> In 45 lines we have:
>
> - Reusable React Component forBabylon.js.
> - Will resize the engine when window is resized.
> - Cleans up resources automatically when unmounted.
> - Any extra props you add to this component will flow to the canvas (ie: style/className).
> - We only need to add this component to a page and specify a method to run when the scene is ready. A `<canvas />` element is created and aBabylon.js engine and scene are created and started.
> - If you want more control of the runRenderLoop, just remove it from here and add it in your `onSceneReady` prop.
> - TypeScript source can be copied from [here](https://raw.githubusercontent.com/brianzinn/babylonjs-hook/master/src/babylonjs-hook.tsx).

The above component is available in NPM, if you prefer:

```bash
npm add babylonjs-hook
yarn add babylonjs-hook
```

Here is a page using our component:

```jsx
import React from "react";
import { FreeCamera, Vector3, HemisphericLight, MeshBuilder } from "@babylonjs/core";
import SceneComponent from "./SceneComponent"; // uses above component in same directory
// import SceneComponent from 'babylonjs-hook'; // if you install 'babylonjs-hook' NPM.
import "./App.css";

let box;

const onSceneReady = (scene) => {
  // This creates and positions a free camera (non-mesh)
  var camera = new FreeCamera("camera1", new Vector3(0, 5, -10), scene);

  // This targets the camera to scene origin
  camera.setTarget(Vector3.Zero());

  const canvas = scene.getEngine().getRenderingCanvas();

  // This attaches the camera to the canvas
  camera.attachControl(canvas, true);

  // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
  var light = new HemisphericLight("light", new Vector3(0, 1, 0), scene);

  // Default intensity is 1. Let's dim the light a small amount
  light.intensity = 0.7;

  // Our built-in 'box' shape.
  box = MeshBuilder.CreateBox("box", { size: 2 }, scene);

  // Move the box upward 1/2 its height
  box.position.y = 1;

  // Our built-in 'ground' shape.
  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);
  }
};

export default () => (
  <div>
    <SceneComponent antialias onSceneReady={onSceneReady} onRender={onRender} id="my-canvas" />
  </div>
);
```

## A few notes on the code

This will show the basic playground in your website! A rotation has been added in the render loop (and the sphere changed to a box, so you would notice).

If you would like to see this in action, there is a boilerplate project using the original NPM `babylonjs`, which you can clone from

- [Reactjs +Babylon.js + Electron](https://github.com/blurymind/babylon-react-electron-app)

There is a boilerplate using above component with ES6 NPM `@babylonjs/core` here

- [Reactjs +Babylon.js](https://github.com/brianzinn/babylonjs-cra-vanilla-ts)

## Adding otherBabylon.js NPMs

If you start with the `@babylonjs` [ES6 NPMs](/divingDeeper/developWithBjs/treeShaking) (as we have done) then add those ones only.

> For GUI use `@babylonjs/gui` instead of the NPMs that don't start with `@`.

## Conclusion

IntegratingBabylon.js into a React site turns out to be not so tough. SinceBabylon.js 3.1 we can use ES6 imports not only forBabylon.js, but also for supported libraries (GUI/loaders/etc).

If the above component we created does everything you need then that's all you will need and you are all set! If you want to take it a step further you may want to take the `react-babylonjs` renderer for a spin.

## react-babylonjs renderer

A renderer is a next-level React integration that lets you use JSX to build your scenes and GUI. State changes will flow automatically to yourBabylon.js components (and persist through HMR) and you can maintain your scene graph in a declarative syntax and through components.

There is an NPM project called `react-babylonjs` that is a react renderer forBabylon.js.

What you are able to easily do is powerful, because inside the Scene component you can declareBabylon.js objects like Cameras/Meshes/Lights/Materials/Textures/3D Models/etc, using familiar JSX. Meanwhile there are escape hatches that allow you to work imperatively as well.

>Babylon.js ES6 + CRA (Create React App) project examples:
>
> - JavaScript (examples for 3D models, GUI, VR, behaviors, props/state management)
>   - [source](https://github.com/brianzinn/create-react-app-babylonjs)
>   - [demo](https://brianzinn.github.io/create-react-app-babylonjs/)
> - TypeScript (GUI + physics + shadows)
>   - [source](https://github.com/brianzinn/create-react-app-typescript-babylonjs)
>   - [demo](https://brianzinn.github.io/create-react-app-typescript-babylonjs/)
> - [Electron](https://github.com/brianzinn/react-babylonjs-electron) (Electron added to above TypeScript project)
> - [PWA](https://github.com/brianzinn/create-react-app-babylonjs-pwa) (Progressive Web App)

`react-babylonjs` (https://github.com/brianzinn/react-babylonjs) links to many live storybook code examples (skybox, CSG, dynamic terrain, behaviors, GUI, react hooks, integrations (PIXI, react-spring, gsap, chroma-js), 3D models, physics, shadows, layers (glow/highlight), textures, fresnel parameters, PBR, etc.


Babylon.js inside React Native

The Possibilities