Lightweight Position-aware Wrapper For ThreeJS In React – Three Paper

A lightweight (~800 bytes) and position-aware wrapper for Three.js in React.

How to use it:

1. Installation.

# Yarn
$ yarn add react-three-paper

# NPM
$ npm i react-three-paper --save

2. Import the Three Paper component and your Thress.js project.

import { Paper } from "paper";
import { main } from "./main.js";

3. pass your script to the component.

<Paper 
  script={main}
/>

4. Available props.

  • script: ThreeJS script
  • style: CSS styles for the canvas
  • onExit: Fired when canvas exits the viewport
  • onEntry: Fired when canvas exits the viewport
  • onError: Fired when an error occurred

Preview:

Lightweight Position-aware Wrapper For ThreeJS In React

Download Details:

Author: FarazzShaikh

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/FarazzShaikh/react-three-paper

License: MIT

Add Comment