react whs

반응-

Whitestormjs/Whitestorm.js로 이동하십시오

용법

Codepen 에서 React를 사용해보십시오.

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

어린이들

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

WHS 구성 요소를 구성하여 구성 요소를 반응하기 위해 변환 할 수있는 방법

사용자 정의 구성 요소 (WHS Lib에 포함되지 않은)

@reactify 데코레이터를 포함시키기 만하면됩니다.

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

JS에서 작업하려면 구성 요소/앱에 대한 참조를 얻으십시오.

앱 사용 refApp .

모든 구성 요소 (메쉬, 조명, 카메라, ...) 의 경우 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 >
    )
  }
}

속성/파라스 구문

WHS 구성 요소를 React에서 작동시키는 방법을 보려면 이전 음 (사용자 정의 구성 요소)을 참조하십시오.

WHS :

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