JavaScript HTML
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
app
build
src
test
.babelrc
.gitignore
.npmignore
.travis.yml
README.md
app.webpack.config.babel.js
package-lock.json
package.json
webpack.config.babel.js

README.md

react-whs Build Status NPM Version

Go to WhitestormJS/whitestorm.js

Usage

Try with React on Codepen:

import React, {Component} from 'react';
import {App, Sphere} from 'react-whs';

export class Application extends Component {
  render() {
    return (
      <App modules={[
        new WHS.app.SceneModule(),
        new WHS.app.CameraModule({
          position: {
            z: 20
          }
        }),
        new WHS.app.RenderingModule(),
        new WHS.controls.OrbitModule()
      ]}>
        <Sphere
          geometry={[3, 32, 32]}
          material={new THREE.MeshBasicMaterial({color: 0xffffff})}
        />
      </App>
    )
  }
}

Children

import React, {Component} from 'react';
import {App, Sphere} from 'react-whs';

export class Application extends Component {
  render() {
    return (
      <App modules={[
        // ...
      ]}>
        <Sphere
          geometry={[3, 32, 32]}
          material={new THREE.MeshBasicMaterial({color: 0xffffff})}
        >
          <Box
            geometry={[2, 2, 2]}
            material={new THREE.MeshBasicMaterial({color: 0xff0000})}
            position={[5, 5, 2]}
          >
        </Sphere>
      </App>
    )
  }
}

How whs components can be transformed to react components

Custom components (that are not included in whs lib)

Simply include @reactify decorator.

import React, {Component} from 'react';
import * as THREE from 'three';
import {MeshComponent} from 'whs/src/core/MeshComponent';

import {reactify} from 'react-whs';

@reactify
export default class BasicSphere extends MeshComponent {
  build() {
    return new THREE.Mesh(
      new THREE.SphereGeometry(3, 16, 16),
      new THREE.MeshBasicMaterial({color: 0xff0000}) // red
    );
  }
}

Get reference to Component/App to work with them in js

For App use refApp.

For any component (Mesh, Light, Camera, ...) use refComponent.

import React, {Component} from 'react';
import {App, Sphere} from 'react-whs';

export class Application extends Component {
  render() {
    return (
      <App modules={[
        // ...
        refApp={app => {
          console.log(app); // will log this WHS.App object
        }}
      ]}>
        <Sphere
          geometry={[3, 32, 32]}
          material={new THREE.MeshBasicMaterial({color: 0xffffff})}
          refComponent={component => {
            console.log(component); // will log this WHS.Sphere object
          }}
        />
      </App>
    )
  }
}

Properties/params syntax

To see how to make whs components work in react see previous note (Custom components)

WHS:

const component = new MyComponent({
  parameter1: value1,
  parameter2: value2,
  position: new THREE.Vector3(x, y, z)
});

component.addTo(app);

React:

class MyComponentSyntaxExample {
  render() {
    return (
      <MyComponent
        parameter1={value1}
        parameter2={value2}
        position={[x, y, z]}
      />
    )
  }
}