react whs

react-whs

Allez à WhiteStormjs / WhiteStorm.js

Usage

Essayez avec React sur 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 >
    )
  }
}

Enfants

 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 >
    )
  }
} 

Comment les composants WHS peuvent être transformés en composants réagis

Composants personnalisés (qui ne sont pas inclus dans WHS lib)

Incluez simplement @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
    ) ;
  }
}

Obtenez une référence au composant / application pour travailler avec eux dans JS

Pour l'application Use refApp .

Pour tout composant (maillage, lumière, appareil photo, ...) Utilisez 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 >
    )
  }
}

Propriétés / Params Syntaxe

Pour voir comment faire fonctionner les composants WHS dans React, voir la note précédente (composants personnalisés)

WHS:

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

component . addTo ( app ) ;

Réagir:

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