react-babylonjs

Quickstart Guides Creating a Creact React App (CRA) Project Imperative React + Babylon.js Declarative 'react-babylonjs'Declarative Animation Adding More Interaction and Color Adding Shadows Examples Basic Animations Moving Boxes Context Bridge Custom Mesh Dynamic Terrain Edges Rendering Engine View assignTo fromInstance Gizmo Gizmo Manager Pause Renderer InstancedMesh Hex Create Portal Extrude (+CSG)Sound Snippet Material Toggle Mesh Toggle Scene Transform Node Viewport Behaviors Drag n Drop Pointer Drag GUI Skybox 3D 2D GUI Grid Html GUI Demo Extending (materials)Models Asset Manager Look At Props Sprites Physics Hooks Context Scene/Engine useAssetManager useClick useHover Post Process Image Processing Pipeline Special FX (layer)Glow Layer Glow Layer (Multi)Highlight Layer Textures Fire Procedural Fresnel Parameters Image Textures PBR PBR Configuration VR

Star

Quickstart Guides Creating a Creact React App (CRA) Project Imperative React + Babylon.js Declarative 'react-babylonjs'Declarative Animation Adding More Interaction and Color Adding Shadows Examples Basic Animations Moving Boxes Context Bridge Custom Mesh Dynamic Terrain Edges Rendering Engine View assignTo fromInstance Gizmo Gizmo Manager Pause Renderer InstancedMesh Hex Create Portal Extrude (+CSG)Sound Snippet Material Toggle Mesh Toggle Scene Transform Node Viewport Behaviors Drag n Drop Pointer Drag GUI Skybox 3D 2D GUI Grid Html GUI Demo Extending (materials)Models Asset Manager Look At Props Sprites Physics Hooks Context Scene/Engine useAssetManager useClick useHover Post Process Image Processing Pipeline Special FX (layer)Glow Layer Glow Layer (Multi)Highlight Layer Textures Fire Procedural Fresnel Parameters Image Textures PBR PBR Configuration VR

Viewport

Each ArcRotateCamera has it's own viewport:

// left half of the screen
<arcRotateCamera ...>
  <viewport x={0} y={0} height={1} width={0.5} />
</arcRotateCamera>

Output
Code