@mesmotronic/react-three-canvas NPM

ThreeCanvas component for React

A React component for integrating Three.js with WebGL rendering and EffectComposer, supporting WebXR for immersive experiences.

Installation

Install the package and peer dependencies:

npm install @mesmotronic/react-three-canvas three react

Usage

The ThreeCanvas component provides a canvas for Three.js rendering with callbacks for animation, mounting, unmounting, and resizing.

Basic Example

import React from "react";
import { ThreeCanvas } from "@mesmotronic/react-three-canvas";
import * as THREE from "three";

const App = () => {
  const mountHandler = ({ scene, camera, userData }) => {
    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);
    camera.position.z = 5;
    userData.cube = cube;
  };

  const animationFrameHandler = ({ userData }) => {
    const { cube } = userData;
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
  };

  return (
    <ThreeCanvas
      style={{ width: "100vw", height: "100vh" }}
      onMount={mountHandler}
      onAnimationFrame={animationFrameHandler}
    />
  );
};

export default App;

Props

onMount: Callback on component mount
onAnimationFrame: Callback for each animation frame
onResize: Callback on canvas resize
onUnmount: Callback on component unmount
Other HTML canvas attributes (e.g., style, className) are passed to the canvas element

Callback props

onMount, onAnimationFrame, onResize and onUnmount receive { canvas: HTMLCanvasElement, renderer: THREE.WebGLRenderer, camera: THREE.PerspectiveCamera, composer: EffectComposer, scene: THREE.Scene, size: THREE.Vector2, userData: Record<string,any> }.