Coder Social home page Coder Social logo

wegiangb / react-three-renderer Goto Github PK

View Code? Open in Web Editor NEW

This project forked from firtoz/react-three-renderer

0.0 2.0 0.0 4.63 MB

Render into a three.js canvas using React.

Home Page: https://toxicfork.github.com/react-three-renderer-example/

License: MIT License

JavaScript 100.00%

react-three-renderer's Introduction

react-three-renderer

Render into a three.js canvas using React.

Would you like to know more? See the wiki or go straight to the API documentation.

Live examples.

Join the chat at https://gitter.im/toxicFork/react-three-renderer Build Status

npm

Current State

This is still an experimental and work in progress project, use at your own risk!

Currently supported react version: 15.5.3 ( things break fast when you fly this close to the sun )

This project is being maintained and developed relatively slowly.

Currently we're working on restoring compatibility with React 16 - Fiber edition!

See work in progress within https://github.com/toxicFork/react-three-renderer-fiber.

Expected ETA: (Hopefully) Sometime within 2018.

Installation

npm install --save [email protected] [email protected] [email protected]
npm install --save react-three-renderer

Usage

The default export of the module is a react component. When mounted, any children of it will be placed into the three.js environment.

Here's a simple example that implements the getting started scene for three.js.

import React from 'react';
import React3 from 'react-three-renderer';
import * as THREE from 'three';
import ReactDOM from 'react-dom';

class Simple extends React.Component {
  constructor(props, context) {
    super(props, context);

    // construct the position vector here, because if we use 'new' within render,
    // React will think that things have changed when they have not.
    this.cameraPosition = new THREE.Vector3(0, 0, 5);

    this.state = {
      cubeRotation: new THREE.Euler(),
    };

    this._onAnimate = () => {
      // we will get this callback every frame

      // pretend cubeRotation is immutable.
      // this helps with updates and pure rendering.
      // React will be sure that the rotation has now updated.
      this.setState({
        cubeRotation: new THREE.Euler(
          this.state.cubeRotation.x + 0.1,
          this.state.cubeRotation.y + 0.1,
          0
        ),
      });
    };
  }

  render() {
    const width = window.innerWidth; // canvas width
    const height = window.innerHeight; // canvas height

    return (<React3
      mainCamera="camera" // this points to the perspectiveCamera which has the name set to "camera" below
      width={width}
      height={height}

      onAnimate={this._onAnimate}
    >
      <scene>
        <perspectiveCamera
          name="camera"
          fov={75}
          aspect={width / height}
          near={0.1}
          far={1000}

          position={this.cameraPosition}
        />
        <mesh
          rotation={this.state.cubeRotation}
        >
          <boxGeometry
            width={1}
            height={1}
            depth={1}
          />
          <meshBasicMaterial
            color={0x00ff00}
          />
        </mesh>
      </scene>
    </React3>);
  }
}

ReactDOM.render(<Simple/>, document.body);

To go further, follow the white rabbit.

Building

Fork and clone this repository, then do a npm install.

npm run compile produces es5 compatible code in the 'lib' directory.

You can use npm link or local npm install if you would like to play with your fork.

Testing

# make sure that you have run compile first
npm run compile
npm test

Currently it runs tests on Chrome, but other browser support can be added if necessary. More information on testing will be added here.

Influences

I have been heavily inspired by react-three by Izzimach.

After finding out about React 0.14, I have decided to see how someone would approach writing their own custom renderer.

This is the outcome of that curiosity.

Implementation Details

I have looked very deeply into how react-dom works. It is internally referred as ReactMount.

Starting from ReactMount#render, I duplicated the functionality, function by function, line by line.

Wherever the DOM was mentioned, I replaced them with generic equivalents.

I tried to point to existing functions as long as they were not corrupted by the DOM.

Then I wrote my own internal components, these are things like <span/>, <div/>, <table/>. Except, now they are <scene/>, <object3D/>, <mesh/>.

This way, you don't need to import a gazillion different modules.

Another benefit is that it allows me to make things super fast and not depend on composite components at all!

In effect, a <scene/> has the same effort, and similar effects as creating a <div/>.

TODO

  • More Documentation
  • More Testing
  • More examples
  • More Performance optimizations
  • Implement rest of three.js library ( See #2 )
  • Make it generic and allow the world to create their own custom react renderers!
    • It's not that hard, trust me ;)

react-three-renderer's People

Contributors

andrewraycode avatar pepjo avatar colmea avatar baopham avatar epilande avatar martunta avatar robertlong avatar foorjdev avatar carlosbaraza avatar kevzettler avatar billy- avatar danyim avatar jardakotesovec avatar johnmarinelli avatar johnrees avatar nopik avatar ranaqb avatar lukas-linhart avatar moox avatar nathanbosse avatar gitter-badger avatar

Watchers

James Cloos avatar Gordon avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.