https://github.com/edwmurph/threejsr

ThreeJS tooling for React projects
https://github.com/edwmurph/threejsr

react

Last synced: 2 months ago
JSON representation

ThreeJS tooling for React projects

• Host: GitHub
• URL: https://github.com/edwmurph/threejsr
• Owner: edwmurph
• Created: 2019-03-17T21:55:08.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2022-01-23T15:23:06.000Z (about 3 years ago)
• Last Synced: 2024-11-06T03:46:05.209Z (3 months ago)
• Topics: react
• Language: JavaScript
• Homepage:
• Size: 47.9 KB
• Stars: 9
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# ThreeJSR

*UNDER DEVELOPMENT*

React based library for [three.js](https://threejs.org/) projects.





# Features

- render three.js scene in dimensions set by parent element

- three.js scene and render loop logic is defined with javascript to ensure consistency with the three.js docs

- add post operation passes like the GlitchPass and UnrealBloomPass

- threejs environment requirement error handling with customizable error boundary

See example usage: https://github.com/edwmurph/threejs

# Installation

```

npm i @edwmurph/threejsr

```

Also install required peer dependencies:

```

npm i three@^0 react@^16

```

# Getting started

1. Extend ThreeJSR to build your own threejs scene:

```

// src/threejs/sphere.js

import * as THREE from 'three';

import { ThreeJSR } from '@edwmurph/threejsr';

import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass.js';

class Sphere extends ThreeJSR {

  constructor (ref, newFrameHook) {

    const bloomPass = new UnrealBloomPass();

    super(ref, newFrameHook, { passes: [bloomPass] });

  }

  renderNextFrame({ spin, timestamp }) {

    if (spin) {

      this.mesh.rotation.x += 0.001;

      this.mesh.rotation.y += 0.001;

    }

    return super.renderNextFrame(timestamp);

  }

  createThreeScene() {

    this.scene = new THREE.Scene();

    this.camera = new THREE.PerspectiveCamera(75, 0, 0.1, 1000);

    this.camera.position.z = 100;

    const geometry = new THREE.SphereGeometry(40, 50, 30);

    const material = new THREE.MeshLambertMaterial({ color: 0xffffff, wireframe: true });

    this.mesh = new THREE.Mesh(geometry, material);

    this.scene.add(this.mesh);

    const spotLight = new THREE.SpotLight(0xffffff);

    spotLight.position.set(100, 10, 100);

    this.scene.add(spotLight);

  }

}

export default new Sphere();

```

2. Add ThreeJSRComponent to one of your components:

```

// src/components/app.js

import React from 'react';

import Sphere from '../threejs/sphere';

import { ThreeJSRComponent } from '@edwmurph/threejsr';

const renderLoopData = {

  spin: true

};

const Component = () => {

  return (

    

  );

};

export default Component;

```