EngineThree.tsx

import * as React from 'react';
import * as BABYLON from 'babylonjs';
import * as React3 from 'react-three-renderer';
import * as THREE from 'three';
import TrackballControls from './engine3D/lib/TrackballControls';
import OrbitControls from './engine3D/lib/OrbitControls';
import EditorControls from './engine3D/lib/EditorControls';
import { Engine3D } from './../core/engine3D/Engine3D';
import ProjectStore from '../stores/ProjectStore';
import Timber from './engine3D/components/Timber';
import TimberMaterial from './engine3D/resources/materials/TimberMaterial';


export class EngineThree extends React.Component<{}, {}>
{
    controls: any;
    
    getState() {
        return {
            project: ProjectStore.getProject(),
            selectedComponent: ProjectStore.getSelectedComponent(),
            engine: {
                cameraPosition: new THREE.Vector3(0, 0, 5),
                cameraRotation: new THREE.Euler(),
                mouseInput: null,
                hovering: false,
                dragging: false,
            }
        };
    }

    getInitialState() {
        return this.getState();
    }

    componentDidMount() {
        ProjectStore.listen(this.onChange);

        const {camera} = this.refs;
        const controls = new EditorControls(camera);

        this.controls = controls;
        this.controls.addEventListener('change', this._onTrackballChange);

    }

    componentWillUnmount() {
        ProjectStore.unlisten(this.onChange);
    }

    onChange = (state) => {
        this.setState(this.getState());

        if (this.getState().selectedComponent) {
            this.controls.focus(this.refs['component-0'].getMesh());
        }
    }

    _onTrackballChange = () => {
        var newState = this.getState();

        newState.engine.cameraPosition = this.refs.camera.position.clone();
        newState.engine.cameraRotation =  this.refs.camera.rotation.clone();

        this.setState(newState);
    };


    render() {
        const width = 1350; // canvas width
        const height = 930; // canvas height

        return (<React3
            mainCamera="camera"
            width={width}
            height={height}
            clearColor={0xf0f0f0}
            gammaInput
            gammaOutput
            shadowMapEnabled
            antialias
        >
            <scene fog={this.fog}>
                <perspectiveCamera
                    name="camera"
                    ref="camera"
                    fov={75}
                    aspect={width / height}
                    near={0.1}
                    far={1000}
                    position={this.state.engine.cameraPosition}
                >
                    <pointLight
                        color={0xffffff}
                        intensity={0.5}
                        position={this.lightPosition}
                    />
                </perspectiveCamera>
                <ambientLight
                    color={0x505050}
                />
                <TimberMaterial />
                <axisHelper name="axisHelper" />

                {this.state.project.components.map(function(component, i) {
                    return (
                        <Timber component={component} ref={'component-' + i} />
                    );
                })}
            </scene>
        </React3>);
    }
}