app.js

import React, {Component} from 'react';
import {App, Sphere} from '../src/index';

import {MeshBasicMaterial} from 'three';

import {
  ElementModule,
  SceneModule,
  CameraModule,
  RenderingModule,
  OrbitControlsModule,
  DefineModule,
  PerspectiveCamera,
  ResizeModule,
  DynamicGeometryModule,
  VirtualMouseModule
} from 'whs';

import {BasicSphere} from './components/BasicSphere';
import {ParametricSphere} from './components/ParametricSphere';

import DatGUIModule from 'whs/modules/DatGUIModule';
export const DatGUI = new DatGUIModule();
export const VirtualMouse = new VirtualMouseModule();
import DragModule from 'whs/modules/DragModule';
export const Drag = new DragModule();

export class Application extends Component {
  render() {
    return (
      <App modules={[
        new ElementModule(),
        new SceneModule(),
        new DefineModule('camera', new PerspectiveCamera({
          position: {
            z: 20
          }
        })),
        new RenderingModule(),
        new OrbitControlsModule(),
        new ResizeModule(),
        DatGUI,
        VirtualMouse,
        Drag
      ]}
      refApp={app => {
        console.log(app);
      }}
      >
        <Sphere
          geometry={[3, 32, 32]}
          material={new MeshBasicMaterial({color: 0xffffff})}
          key="1"
        />
        <Sphere
          geometry={[3, 32, 32]}
          material={new MeshBasicMaterial({color: 0x00ff00})}
          position={[-3, 0, 3]}
          key="2"
        />
        <ParametricSphere
          position={[0, 6, 0]}
          key="3"
          refComponent={component => {
            //component.material.color.setRGB(1, 1, 0); // Set yellow
          }}
        />
      </App>
    )
  }
}

ParametricSphere.js

import {
  Mesh,
  IcosahedronGeometry,
  MeshBasicMaterial
} from 'three';

import {
  MeshComponent,
  DynamicGeometryModule,
  Sphere
} from 'whs';
import {reactify} from '../../src/index';

import {
  DatGUI,
  Drag,
  VirtualMouse
} from '../app';

@reactify
export class ParametricSphere extends Sphere {
  constructor(params = {}) {
    params.modules = (params.modules ? params.modules : []).concat([
      new DynamicGeometryModule(),
      DatGUI.Mesh({
        name: 'Sphere',
        geometry: {
          radius: {
            range: [2, 100]
          }
        }
      }),
      Drag.mesh()
    ]);
    super(params);
    VirtualMouse.track(this);
  }
  build() {
    const {material, geometry} = this.applyBridge({
      geometry: new IcosahedronGeometry(3, 5),
      material: new MeshBasicMaterial({color: 0xffffff})
    });
    return this.applyBridge({mesh: new Mesh(geometry, material)}).mesh;
  }
}