Working 'three' library syntax (5 Sep 2019)

3dmodel.js

import React, { Component } from "react";
import * as THREE from "three";
import * as FBXLoader from 'three-fbxloader-offical';
// eslint-disable-next-line
import * as Dat from "dat.gui"
import {TimelineMax, Expo, Power0} from 'gsap/all';

import img from '../../textures/ship01RebuildGeo_lambert2_Diffuse.jpg';
import bump from '../../textures/ship01RebuildGeo_lambert2_Glossiness.jpg';
import fbx from '../../source/Trader.fbx';

const OrbitControls = require("three-orbit-controls")(THREE);

class Spaceship extends Component {
    constructor(props) {
        super(props);
        this.initializeOrbits = this.initializeOrbits.bind(this);
    }
    componentDidMount() {
        this.THREE = THREE;
        const width = this.mount.clientWidth;
        const height = this.mount.clientHeight;

        this.scene = new this.THREE.Scene();
        this.camera = new this.THREE.PerspectiveCamera(50, width / height, 0.1, 1000);
        this.renderer = new this.THREE.WebGLRenderer({ antialias: true, alpha:true });

        this.controls = new OrbitControls(this.camera, this.renderer.domElement);
        this.initializeOrbits();

        this.renderer.setSize(width, height);
        this.renderer.setClearColor(0x000000, 0);
        this.mount.appendChild(this.renderer.domElement);
        this.camera.position.z = 1;

        window.addEventListener('resize', () => {
            this.renderer.setSize(window.innerWidth, window.innerHeight);
            this.camera.aspect = window.innerWidth/window.innerHeight;

            this.camera.updateProjectionMatrix()
        });

        const light = new this.THREE.AmbientLight(0xffffff);
        this.scene.add(light);

        const light2 = new this.THREE.SpotLight(0xFFFFFF, 1, 500, 2);
        this.scene.add(light2);

        const manager = new this.THREE.LoadingManager();
        const loader = new this.THREE.ImageLoader(manager);

        const textureBody = new this.THREE.Texture();

        loader.load(img, (image) => {
            textureBody.image = image;
            textureBody.needsUpdate = true;
        });

        const meshes = [];

        const fbxLoader = new FBXLoader();

        fbxLoader.load(fbx, (object) => {
            this.scene.add(object);
            object.rotation.x = .5;
            object.rotation.y = .5;

            object.traverse(function (child) {
                if (child instanceof THREE.Mesh) {
                    meshes.push(child)
                }
            });

            this.scene.add(object);

            const specularMap = new this.THREE.TextureLoader().load(bump);

            meshes.forEach((el, i)=>{
                if (i < 14) {
                    el.material = new this.THREE.MeshPhongMaterial({
                        map: textureBody,
                        bumpScale:0.5,
                        specularMap,
                        specular: 0x2d2d2d,
                        shininess: 100
                    });
                } else if(i === 15 || i === 17){
                    const scaleEngine = new TimelineMax({repeat:-1});
                    scaleEngine.to(el.scale, 2, {z:0.97, ease: Expo.easeInOut});
                    scaleEngine.to(el.scale, 2, {z:1, ease: Expo.easeInOut});

                    el.scale.z = 1;
                    el.material = new  this.THREE.MeshLambertMaterial({color: 0xffffff, transparent: true});
                } else {
                    const scaleEngine = new TimelineMax({repeat:-1});
                    scaleEngine.to(el.scale, 3, {z:0.95, ease: Expo.easeInOut});
                    scaleEngine.to(el.scale, 2, {z:1, ease: Expo.easeInOut});

                    el.position.y = -4;
                    el.scale.z = 1;
                    el.material = new  this.THREE.MeshLambertMaterial({color: 0x4259ff, transparent: true, opacity: 0.9});
                }
            });

            const rotateShip = new TimelineMax({repeat:-1});
            rotateShip.to(object.rotation, 3, {z: Math.PI*.04, ease: Expo.linear});
            rotateShip.to(object.rotation, 2, {z: 0, ease: Expo.linear});

            const radar = meshes[1];
            const rotateRadar = new TimelineMax({repeat:-1});
            rotateRadar.to(radar.rotation, 4, {y:Math.PI*2, ease: Power0.easeNone});

            radar.geometry.translate( 5.5, 5, 0 );
            radar.position.x = 0;
            radar.position.y = -21;
            radar.position.z = 0;

            const circle = meshes[2];
            const rotateCircle = new TimelineMax({repeat:-1});
            rotateCircle.to(circle.rotation, 4, {x:Math.PI*2, ease: Power0.easeNone});

            circle.geometry.center();
            circle.position.x = 0;
            circle.position.y = 0;
            circle.position.z = 0;

            const gunBody = meshes[3];
            const rotateGunBody = new TimelineMax({repeat:-1});
            rotateGunBody.to(gunBody.rotation, 2, {x:0.05, ease: Expo.linear});
            rotateGunBody.to(gunBody.rotation, 2, {y:-Math.PI*0.5, ease: Expo.linear});
            rotateGunBody.to(gunBody.rotation, 2, {y:0, ease: Expo.linear});
            rotateGunBody.to(gunBody.rotation, 2, {x:-0.1, ease: Expo.linear});

            gunBody.geometry.center();
            gunBody.position.x = 0;
            gunBody.position.y = -1;
            gunBody.position.z = 0;

            const gun = meshes[4];
            const rotateGun = new TimelineMax({repeat:-1});
            rotateGun.to(gun.rotation, 2, {x:0.1, ease: Expo.linear});
            rotateGun.to(gun.rotation, 2, {y:-Math.PI*0.5, ease: Expo.linear});
            rotateGun.to(gun.rotation, 2, {y:0, ease: Expo.linear});
            rotateGun.to(gun.rotation, 2, {x:0, ease: Expo.linear});

            gun.geometry.center();
            gun.geometry.translate(0, 0, -9);
            gun.position.x = 0;
            gun.position.y = 1;
            gun.position.z = 0;

            const robot = meshes[9];
            const rotateRobot = new TimelineMax({repeat:-1});
            rotateRobot.to(robot.rotation, 2, {y:Math.PI*.5, ease: Expo.easeInOut});
            rotateRobot.to(robot.rotation, 2, {y:Math.PI, ease: Expo.easeInOut});
            rotateRobot.to(robot.rotation, 4, {y:0, ease: Expo.easeInOut});

            robot.geometry.center();
            robot.position.x = 0;
            robot.position.y = 1;
            robot.position.z = 0;

            this.scene.remove(meshes[10]);

            const antena = meshes[11];
            const rotateAntena = new TimelineMax({repeat:-1});
            rotateAntena.to(antena.rotation, 4, {y:Math.PI*2, ease: Power0.easeNone});

            antena.geometry.center();
            antena.position.x = 0;
            antena.position.y = 0;
            antena.position.z = 0;

            const antena2 = meshes[12];
            const rotateAntena2 = new TimelineMax({repeat:-1});
            rotateAntena2.to(antena2.rotation, 4, {y:Math.PI*2, ease: Power0.easeNone});

            antena2.geometry.center();
            antena2.position.x = 0;
            antena2.position.y = 0;
            antena2.position.z = 0;

            const circle2 = meshes[13];
            const rotateCircle2 = new TimelineMax({repeat:-1});
            rotateCircle2.to(circle2.rotation, 5, {z:Math.PI*2, ease: Power0.easeNone});

            circle2.geometry.center();
            circle2.position.x = 0;
            circle2.position.y = 0;
            circle2.position.z = 0;
        });
        
        const loop = () => {
            this.renderer.render(this.scene, this.camera);
            requestAnimationFrame(()=>{
                loop()
            })
        };
        loop();
    }

    componentWillUnmount() {
        cancelAnimationFrame(this.frameId);
        this.mount.removeChild(this.renderer.domElement);
    }

    initializeOrbits() {
        this.controls.rotateSpeed = 1.0;
        this.controls.zoomSpeed = 1.2;
        this.controls.panSpeed = 0.8;
        this.controls.enableZoom = false;
    }

    render() {
        return (
            <div>
                <div
                    id="boardCanvas"
                    ref={mount => this.mount = mount}
                />
            </div>
        );
    }
}
export default Spaceship;