react whs

React-whs

Gehen Sie zu Whitestormjs/Whitestorm.js

Verwendung

Versuchen Sie es mit React auf 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 >
    )
  }
}

Kinder

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

Wie WHS -Komponenten transformiert werden können, um Komponenten zu reagieren

Benutzerdefinierte Komponenten (die in WHS Lib nicht enthalten sind)

Fügen Sie einfach @reactify Decorator ein.

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

Verweisen Sie auf Komponente/App, um mit ihnen in JS zu arbeiten

Für App verwenden refApp .

Für jede Komponente (Netz, Licht, Kamera, ...) verwenden Sie 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 >
    )
  }
}

Eigenschaften/Parametersyntax

Um zu sehen, wie WHS -Komponenten in React funktionieren, siehe vorherige Anmerkung (benutzerdefinierte Komponenten)

WHS:

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

component . addTo ( app ) ;

Reagieren:

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