react-whs

Go to WhitestormJS/whitestorm.js

Usage

Try with React on Codepen:

importReact,{Component}from'react';import{App,Sphere}from'react-whs';exportclassApplicationextendsComponent{render(){return(<Appmodules={[newWHS.app.SceneModule(),newWHS.app.CameraModule({position: {z: 20}}),newWHS.app.RenderingModule(),newWHS.controls.OrbitModule()]}><Spheregeometry={[3,32,32]}material={newTHREE.MeshBasicMaterial({color: 0xffffff})}/></App>)}}

Children

importReact,{Component}from'react';import{App,Sphere}from'react-whs';exportclassApplicationextendsComponent{render(){return(<Appmodules={[// ...]}><Spheregeometry={[3,32,32]}material={newTHREE.MeshBasicMaterial({color: 0xffffff})}><Boxgeometry={[2,2,2]}material={newTHREE.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.

importReact,{Component}from'react';import*asTHREEfrom'three';import{MeshComponent}from'whs/src/core/MeshComponent';import{reactify}from'react-whs';
@reactifyexportdefaultclassBasicSphereextendsMeshComponent{build(){returnnewTHREE.Mesh(newTHREE.SphereGeometry(3,16,16),newTHREE.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.

importReact,{Component}from'react';import{App,Sphere}from'react-whs';exportclassApplicationextendsComponent{render(){return(<Appmodules={[// ...refApp={app=>{console.log(app);// will log this WHS.App object}}]}><Spheregeometry={[3,32,32]}material={newTHREE.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:

constcomponent=newMyComponent({parameter1: value1,parameter2: value2,position: newTHREE.Vector3(x,y,z)});component.addTo(app);

React:

classMyComponentSyntaxExample{render(){return(<MyComponentparameter1={value1}parameter2={value2}position={[x,y,z]}/>)}}