### Reactylon Scene Component Examples
Source: https://context7.com/simonedevit/reactylon/llms.txt
Demonstrates the setup of a Babylon.js Scene using Reactylon's Scene component. Includes examples for basic scene setup, physics integration with Havok, and WebXR experiences.
```tsx
import { Engine } from 'reactylon/web';
import { Scene } from 'reactylon';
import HavokPhysics from '@babylonjs/havok';
import { HavokPlugin } from '@babylonjs/core/Physics/v2/Plugins/havokPlugin';
import { Vector3 } from '@babylonjs/core';
// Basic scene with camera and light
function BasicScene() {
return (
{
scene.createDefaultLight();
}}>
);
}
// Scene with physics enabled
async function PhysicsScene() {
const havokInstance = await HavokPhysics();
const havokPlugin = new HavokPlugin(true, havokInstance);
return (
{/* Box with physics */}
{/* Ground with static physics */}
);
}
// Scene with WebXR support
function XRScene() {
return (
{
console.log('XR Scene ready');
}}
>
);
}
```
--------------------------------
### Start Live Server (Bash)
Source: https://github.com/simonedevit/reactylon/blob/main/CONTRIBUTING.md
Starts the development live server for the playground project.
```bash
npm start
```
--------------------------------
### Install Dependencies (Bash)
Source: https://github.com/simonedevit/reactylon/blob/main/CONTRIBUTING.md
Command to install all project dependencies for the monorepo.
```bash
npm run init
```
--------------------------------
### Initialize Babylon.js Engine with Reactylon
Source: https://context7.com/simonedevit/reactylon/llms.txt
Demonstrates how to initialize the Reactylon Engine component, which sets up the Babylon.js rendering engine. It covers basic setup, advanced options like custom loading screens and engine configurations, and managing multiple canvases for different scenes.
```tsx
import { Engine } from 'reactylon/web';
import { Scene } from 'reactylon';
// Basic engine setup with default options
function App() {
return (
console.log('Scene ready:', scene)}>
{/* 3D content goes here */}
);
}
// Engine with WebGL options and custom loading screen
function AppWithOptions() {
const LoadingScreen = () => (
Loading 3D Scene...
);
return (
{/* Scene content */}
);
}
// Multiple canvases with multiple scenes
function MultiCanvasApp() {
return (
);
}
```
--------------------------------
### Link Reactylon in Playground (Bash)
Source: https://github.com/simonedevit/reactylon/blob/main/CONTRIBUTING.md
Links the globally installed Reactylon package into the local 'playground' project.
```bash
cd playground && npm link reactylon
```
--------------------------------
### Reactylon Mesh Component Examples
Source: https://context7.com/simonedevit/reactylon/llms.txt
Shows how to create various Babylon.js mesh types (Box, Sphere, Cylinder, Ground, Torus, Plane) declaratively using Reactylon's JSX components. Includes examples for mesh properties, callbacks, and parent-child relationships.
```tsx
import { Vector3, Color3 } from '@babylonjs/core';
// Basic mesh creation with various types
function MeshExamples() {
return (
<>
{/* Box mesh with position */}
{/* Sphere mesh */}
{/* Cylinder mesh */}
{/* Ground plane */}
{/* Torus mesh */}
{/* Plane mesh */}
);
}
// Mesh with onCreate callback
function MeshWithCallback() {
const handleCreate = (mesh) => {
console.log('Mesh created:', mesh.name);
mesh.scaling = new Vector3(1.5, 1.5, 1.5);
};
return (
);
}
// Parent-child mesh relationships
function NestedMeshes() {
return (
);
}
```
--------------------------------
### Create Grid Layouts in Reactylon
Source: https://context7.com/simonedevit/reactylon/llms.txt
Demonstrates the use of grid, row, and column components to create structured layouts. This example places a grid on a 3D plane, demonstrating how to organize UI elements in a tabular format.
```tsx
function GridLayoutGUI() {
return (
<>
);
}
```
--------------------------------
### Reactylon: Babylon.js Camera Integration
Source: https://context7.com/simonedevit/reactylon/llms.txt
Shows how to integrate various Babylon.js camera types as JSX elements in Reactylon. These cameras are automatically attached to the canvas and set as the active camera, simplifying scene setup.
```tsx
import { Vector3, Tools } from '@babylonjs/core';
// ArcRotateCamera - orbits around a target point
function OrbitCameraScene() {
return (
);
}
// FreeCamera - first-person style camera
function FreeCameraScene() {
return (
);
}
// UniversalCamera - supports gamepad and touch
function UniversalCameraScene() {
return (
);
}
// FollowCamera - follows a target mesh
function FollowCameraExample() {
return (
<>
);
}
```
--------------------------------
### Babylon.js Light Components in React
Source: https://context7.com/simonedevit/reactylon/llms.txt
Demonstrates the usage of different Babylon.js light types as React components provided by Reactylon. These include HemisphericLight, DirectionalLight, PointLight, and SpotLight, each configured with specific properties for scene lighting. The snippet also shows a combined lighting setup.
```tsx
import { Vector3, Color3 } from '@babylonjs/core';
// HemisphericLight - ambient light from above
function HemisphericLightExample() {
return (
);
}
// DirectionalLight - parallel light rays (like sun)
function DirectionalLightExample() {
return (
);
}
// PointLight - light from a single point
function PointLightExample() {
return (
);
}
// SpotLight - cone of light
function SpotLightExample() {
return (
);
}
// Combined lighting setup
function LightingSetup() {
return (
<>
);
}
```
--------------------------------
### Commit Changes (Bash)
Source: https://github.com/simonedevit/reactylon/blob/main/CONTRIBUTING.md
Example of committing code changes with a conventional commit message, including type, scope, and issue number.
```bash
git commit -m "fix(reconciler): add radius and position props on camera #0"
```
--------------------------------
### Initialize NativeEngine for React Native
Source: https://context7.com/simonedevit/reactylon/llms.txt
The NativeEngine component integrates Reactylon with Babylon React Native for mobile applications. It manages the engine lifecycle and camera setup for mobile VR/AR environments.
```tsx
import { NativeEngine } from 'reactylon/mobile';
import { Scene } from 'reactylon';
import { useEngine } from '@babylonjs/react-native';
import { Vector3 } from '@babylonjs/core';
function MobileApp() {
const [camera, setCamera] = useState(null);
return (
{
scene.createDefaultCamera(true, true, true);
setCamera(scene.activeCamera);
}}>
);
}
```
--------------------------------
### React Babylon.js Highlight Layer Component
Source: https://context7.com/simonedevit/reactylon/llms.txt
Shows how to use the HighlightLayer component from Reactylon to add a glow effect to meshes in a Babylon.js scene rendered within React. It covers basic setup, applying highlights to multiple objects, and creating interactive highlights based on user events like hover.
```tsx
import { Color3, Vector3 } from '@babylonjs/core';
import { useState } from 'react';
// Basic highlight layer usage
function HighlightExample() {
return (
<>
);
}
// Multiple highlighted meshes
function MultipleHighlights() {
return (
<>
);
}
// Interactive highlight on hover
function InteractiveHighlight() {
const [hoveredMesh, setHoveredMesh] = useState(null);
return (
{['box1', 'box2', 'box3'].map((name, i) => (
setHoveredMesh(name)}
onPointerOut={() => setHoveredMesh(null)}
highlightLayer={hoveredMesh === name ? { color: Color3.Yellow() } : undefined}
/>
))}
);
}
```
--------------------------------
### Create Reactylon App (Bash)
Source: https://github.com/simonedevit/reactylon/blob/main/CONTRIBUTING.md
Command to scaffold a new Reactylon project using the create-reactylon-app utility.
```bash
npx create-reactylon-app playground
```
--------------------------------
### Build Local Package (Bash)
Source: https://github.com/simonedevit/reactylon/blob/main/CONTRIBUTING.md
Command to build the Reactylon library package from the 'packages/library' directory.
```bash
npm run build:local
```
--------------------------------
### Create Reactylon GUI Overlays and Mesh Interfaces
Source: https://context7.com/simonedevit/reactylon/llms.txt
Demonstrates how to implement a fullscreen 2D GUI overlay and a 3D GUI attached to a specific mesh. These components utilize the advancedDynamicTexture provider to render UI elements within the Babylon.js scene.
```tsx
function FullscreenGUI() {
return (
);
}
function MeshGUI() {
return (
<>
);
}
```
--------------------------------
### Applying Materials and Textures to Meshes in Reactylon
Source: https://context7.com/simonedevit/reactylon/llms.txt
Demonstrates how to assign standard and PBR materials to meshes, including nesting textures with specific kinds. It also shows how to share a single material across multiple meshes using the 'assignTo' prop.
```tsx
import { Color3 } from '@babylonjs/core';
// Basic material assignment
function MeshWithMaterial() {
return (
);
}
// Material with textures
function MaterialWithTextures() {
return (
);
}
// Shared material across multiple meshes using assignTo
function SharedMaterial() {
return (
<>
);
}
// PBR Material example
function PBRMaterialExample() {
return (
);
}
```
--------------------------------
### Reactylon: Mesh Cloning and GPU Instancing
Source: https://context7.com/simonedevit/reactylon/llms.txt
Demonstrates how to create independent copies of meshes using cloning and how to render multiple instances of the same mesh efficiently on the GPU using instancing. Cloning creates separate mesh data, while instancing shares geometry for performance gains.
```tsx
import { Vector3 } from '@babylonjs/core';
// Clone a mesh (creates independent copy)
function ClonedMeshes() {
return (
<>
{/* Original mesh */}
{/* Cloned meshes - each is independent */}
);
}
// Instance a mesh (GPU instancing - shares geometry)
function InstancedMeshes() {
return (
<>
{/* Source mesh for instances */}
{/* Instances - share geometry for better performance */}
);
}
// Grid of instanced meshes
function InstanceGrid() {
const instances = [];
for (let x = 0; x < 10; x++) {
for (let z = 0; z < 10; z++) {
instances.push(
);
}
}
return (
<>
{instances}
);
}
```
--------------------------------
### Build Monorepo Packages (Bash)
Source: https://github.com/simonedevit/reactylon/blob/main/CONTRIBUTING.md
Command to build all packages within the monorepo.
```bash
npm run build
```
--------------------------------
### Create Git Branch (Bash)
Source: https://github.com/simonedevit/reactylon/blob/main/CONTRIBUTING.md
Demonstrates how to create a new Git branch for feature development or bug fixes using a specific naming convention.
```bash
git checkout -b fix/add-properties-on-camera
```
--------------------------------
### Reactylon Lighting Components
Source: https://context7.com/simonedevit/reactylon/llms.txt
Overview of available light components including Hemispheric, Directional, Point, and Spot lights.
```APIDOC
## Reactylon Lighting Components
### Description
Reactylon provides declarative JSX elements for standard Babylon.js light types to illuminate 3D scenes.
### Components
- **hemisphericLight**: Ambient light from a specific direction.
- **directionalLight**: Parallel light rays simulating distant sources like the sun.
- **pointLight**: Light emitted from a single point in all directions.
- **spotLight**: A cone-shaped light source with specific direction and angle.
### Parameters
- **name** (string) - Required - Unique identifier for the light.
- **intensity** (number) - Optional - Brightness multiplier.
- **direction** (Vector3) - Optional - Direction vector for light.
- **position** (Vector3) - Optional - World position for point/spot lights.
### Request Example
```
--------------------------------
### Implement Interactive Reactylon GUI with State
Source: https://context7.com/simonedevit/reactylon/llms.txt
Shows how to build an interactive UI using React state hooks. It includes a stack panel containing buttons that update a counter value when clicked.
```tsx
function InteractiveGUI() {
const [count, setCount] = useState(0);
return (
setCount(c => c + 1)}
>
setCount(c => c - 1)}
>
);
}
```
--------------------------------
### Global Link Reactylon Package (Bash)
Source: https://github.com/simonedevit/reactylon/blob/main/CONTRIBUTING.md
Creates a global symbolic link for the Reactylon package after building it locally.
```bash
cd packages/library/build && npm link
```
--------------------------------
### Access Babylon.js Core Components with React Hooks
Source: https://context7.com/simonedevit/reactylon/llms.txt
Demonstrates how to use React hooks (useScene, useEngine, useCanvas, usePhysics, useHavok) to access core Babylon.js objects within React components. These hooks provide direct access to the scene, rendering engine, canvas element, and physics instances, enabling component-level interaction with the 3D environment. Dependencies include 'reactylon' and '@babylonjs/core'.
```tsx
import { useScene, useEngine, useCanvas, usePhysics, useHavok, useXrExperience } from 'reactylon';
import { useEffect } from 'react';
// Access scene to perform operations
function SceneInfo() {
const scene = useScene();
useEffect(() => {
console.log('Scene meshes:', scene.meshes.length);
console.log('Scene materials:', scene.materials.length);
// Register before render callback
scene.registerBeforeRender(() => {
// Animation logic
});
}, [scene]);
return null;
}
// Access engine for rendering control
function EngineControl() {
const engine = useEngine();
const toggleFPS = () => {
if (engine.getFps() > 0) {
console.log('Current FPS:', engine.getFps().toFixed(0));
}
};
return (
);
}
// Access canvas for custom rendering
function CanvasAccess() {
const canvas = useCanvas();
useEffect(() => {
if (canvas) {
console.log('Canvas size:', canvas.width, 'x', canvas.height);
}
}, [canvas]);
return null;
}
// Access physics engine
function PhysicsAccess() {
const physics = usePhysics();
const havok = useHavok();
useEffect(() => {
if (physics) {
console.log('Physics plugin:', physics.getPhysicsPluginName());
}
}, [physics]);
return null;
}
// Use selector for specific property
function CameraPosition() {
const activeCamera = useScene(scene => scene.activeCamera);
useEffect(() => {
if (activeCamera) {
console.log('Camera position:', activeCamera.position);
}
}, [activeCamera]);
return null;
}
```
--------------------------------
### Load 3D Models Asynchronously with useModel Hook
Source: https://context7.com/simonedevit/reactylon/llms.txt
The `useModel` hook from Reactylon facilitates asynchronous loading of 3D models using Babylon.js's `ImportMeshAsync`. It integrates with React Suspense, allowing for graceful handling of loading states with fallback UI elements. The hook supports model paths, import options, an optional `onCreate` callback for post-load manipulation, and a cache invalidation key. Dependencies include 'reactylon', '@babylonjs/core', and 'react'.
```tsx
import { useModel } from 'reactylon';
import { Suspense } from 'react';
import { Vector3, Color3 } from '@babylonjs/core';
// Basic model loading
function LoadedModel() {
const model = useModel('/models/character.glb');
return null; // Model is already in the scene
}
// Model with onCreate callback
function ModelWithCallback() {
const model = useModel(
'/models/robot.glb',
{}, // Import options
(result) => {
// Called when model is loaded
result.meshes.forEach(mesh => {
mesh.scaling = new Vector3(0.5, 0.5, 0.5);
});
console.log('Model loaded with', result.meshes.length, 'meshes');
}
);
return null;
}
// Model with loading fallback using Suspense
function ModelScene() {
return (
}>
);
}
function LoadingIndicator() {
return (
);
}
// Model with cache invalidation key
function DynamicModel({ modelPath, key }) {
const model = useModel(
modelPath,
{ pluginExtension: '.glb' },
(result) => {
console.log('Loaded:', modelPath);
},
key // Changing key invalidates cache and reloads
);
return null;
}
// Complete example with Suspense
function App() {
return (
}>
);
}
```
--------------------------------
### Handling Mesh Events and Interactions in Reactylon
Source: https://context7.com/simonedevit/reactylon/llms.txt
Illustrates how to attach event listeners to meshes for various interactions like clicking, hovering, and pointer events. It also shows how to manage intersection triggers between different meshes.
```tsx
import { ActionEvent, Vector3, Color3 } from '@babylonjs/core';
import { useState } from 'react';
// Basic click event
function ClickableMesh() {
const handlePick = (evt: ActionEvent) => {
console.log('Mesh clicked!', evt.source.name);
};
return (
);
}
// Interactive mesh with state
function InteractiveMesh() {
const [isActive, setIsActive] = useState(false);
return (
setIsActive(!isActive)}
onPointerOver={() => console.log('Hover enter')}
onPointerOut={() => console.log('Hover exit')}
>
);
}
// All available mesh events
function AllMeshEvents() {
return (
console.log('Pick', evt)}
onDoublePick={(evt) => console.log('Double pick', evt)}
onPickDown={(evt) => console.log('Pick down', evt)}
onPickUp={(evt) => console.log('Pick up', evt)}
onPickOut={(evt) => console.log('Pick out', evt)}
onLeftPick={(evt) => console.log('Left click', evt)}
onRightPick={(evt) => console.log('Right click', evt)}
onCenterPick={(evt) => console.log('Center click', evt)}
onLongPress={(evt) => console.log('Long press', evt)}
onPointerOver={(evt) => console.log('Pointer over', evt)}
onPointerOut={(evt) => console.log('Pointer out', evt)}
/>
);
}
// Intersection triggers between meshes
function IntersectionExample() {
return (
<>
console.log('Entered intersection')}
onIntersectionExit={(evt) => console.log('Exited intersection')}
intersectionMeshId="triggerBox"
/>
);
}
```
--------------------------------
### Highlight Layer API
Source: https://context7.com/simonedevit/reactylon/llms.txt
API for applying glow effects to meshes using the highlightLayer component.
```APIDOC
## Highlight Layer
### Description
The highlightLayer component creates a glow effect around specified meshes. Meshes are registered by passing a highlightLayer prop.
### Component
- **highlightLayer**: Container component for managing glow settings.
### Parameters
- **name** (string) - Required - Unique identifier.
- **blurHorizontalSize** (number) - Optional - Horizontal blur intensity.
- **blurVerticalSize** (number) - Optional - Vertical blur intensity.
### Mesh Prop
- **highlightLayer** (object) - Optional - Configuration object containing { color: Color3, glowEmissiveOnly: boolean }.
### Request Example
```
--------------------------------
### Register Babylon.js Classes for Tree-Shaking
Source: https://context7.com/simonedevit/reactylon/llms.txt
The register function allows manual registration of Babylon.js classes. This optimizes bundle size by ensuring only necessary components are included in the final build.
```tsx
import { register, BabylonPackages } from 'reactylon';
import { Box } from '@babylonjs/core/Meshes/Builders/boxBuilder';
register({
box: [Box, BabylonPackages.CORE, false]
});
function OptimizedApp() {
return (
);
}
```
--------------------------------
### Engine Component
Source: https://context7.com/simonedevit/reactylon/llms.txt
The Engine component initializes the Babylon.js rendering engine and manages the WebGL/WebGPU context. It handles canvas creation, window resize events, and render loop management.
```APIDOC
## Engine Component
### Description
Initializes the Babylon.js rendering engine and manages the WebGL/WebGPU context. It automatically handles canvas creation, window resize events, and render loop management.
### Method
Component (React)
### Endpoint
N/A
### Parameters
#### Props
- **canvasId** (string) - Optional - The ID of the canvas element to use.
- **engineOptions** (object) - Optional - Options for the Babylon.js engine (e.g., antialias, adaptToDeviceRatio).
- **loadingScreenOptions** (object) - Optional - Options for a custom loading screen.
- **component** (React.Component) - The loading screen component.
- **animationStyle** (object) - CSS animations for the loading screen.
- **forceWebGL** (boolean) - Optional - Force WebGL rendering (defaults to false, uses WebGPU if available).
- **isMultipleCanvas** (boolean) - Optional - Set to true to support multiple canvases.
### Request Example
```tsx
{/* Scene content */}
```
### Response
#### Success Response (200)
N/A (This is a component)
#### Response Example
N/A
```
--------------------------------
### Push Branch (Bash)
Source: https://github.com/simonedevit/reactylon/blob/main/CONTRIBUTING.md
Pushes the current feature branch to the remote forked repository.
```bash
git push fix/add-properties-on-camera
```
--------------------------------
### Implement XR Microgestures for VR/AR Navigation
Source: https://context7.com/simonedevit/reactylon/llms.txt
The Microgestures component provides event callbacks for XR hand controller gestures. It allows developers to map swipes and taps to application logic like scene navigation.
```tsx
import { Microgestures } from 'reactylon';
function XRControls() {
return (
console.log('Swiped left')}
onSwipeRight={() => console.log('Swiped right')}
onSwipeForward={() => console.log('Swiped forward')}
onSwipeBackward={() => console.log('Swiped backward')}
onTapThumb={() => console.log('Thumb tapped')}
onMenu={() => console.log('Menu pressed')}
/>
);
}
```
--------------------------------
### Configure Webpack Resolve (TypeScript)
Source: https://github.com/simonedevit/reactylon/blob/main/CONTRIBUTING.md
Modifies the webpack configuration to include 'node_modules' in the module resolution path, necessary for symlinked packages.
```typescript
modules: [path.resolve(__dirname, 'node_modules'), 'node_modules']
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.