react-whs Build Status NPM Version

Usage

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)

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

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

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

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