All files / pag3DModel Pag3DModel.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
 
 
 
 
 
 
 
 
 
 
1x
 
1x
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
1x
 
 
1x
 
 
 
1x
 
 
 
1x
 
 
 
1x
 
 
 
1x
 
 
 
1x
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
//todo: sonido inicial
//todo: reportar bug en aframe-extras repo
 
import React from 'react';
import 'aframe-extras/dist/aframe-extras.loaders.min'; // for json loader
import Loader from "../components/loader/LoaderCmp";
import SideMenu from "../components/sideMenu/SideMenuCmp";
import TopMenu from "../components/topMenu/TopMenuCmp";
import {SIDE_MENU_ITEMS} from "../components/sideMenu/SideMenuItems";
 
enum BotStatus {IDLE = 'idle', RUN = 'run', WALK = 'walk', JUMP = 'jump'}
 
export class Pag3DModel extends React.Component<{}, {botStatus: BotStatus}> {
 
  public state = {botStatus: BotStatus.IDLE};
  public refs: {sideMenu: SideMenu, loader: Loader, bot: AFrame.Entity};
 
  // Delay between bot animation transitions in seconds. For example: walk -> run
  private crossFadeDuration = 0.5;
 
  private orbitControls = {
    autoRotate: true,
    target: '#bot',
    enableDamping: true,
    dampingFactor: 0.1,
    rotateSpeed: 0.1,
    autoRotateSpeed: 0.15,
    zoomSpeed: 0.5,
    minDistance: 0,
    maxDistance: 100,
    invertZoom: true
  };
 
  public componentDidMount() {
    this.refs.loader && this.refs.loader.hideWhen(this.refs.bot, 'model-loaded');
  }
 
  private onClickBtnRun = () => {
    this.setState({botStatus: BotStatus.RUN});
  };
 
  private onClickBtnIdle = () => {
    this.setState({botStatus: BotStatus.IDLE})
  };
 
  private onClickBtnWalk = () => {
    this.setState({botStatus: BotStatus.WALK})
  };
 
  private onClickBtnJump = () => {
    this.setState({botStatus: BotStatus.JUMP})
  };
 
  private openSideMenu = () => {
    this.refs.sideMenu.show();
  };
 
  public render() {
    return (
      <div>
 
        <Loader ref="loader">Loading</Loader>
 
        <SideMenu ref="sideMenu" title="3D Model Animation" items={ SIDE_MENU_ITEMS } itemActive="3" />
 
        <TopMenu onClickMenuBtn={ this.openSideMenu }>
          <a id="btnIdle" onClick={ this.onClickBtnWalk } className="top-menu-item">Walk</a>
          <a id="btnRun" onClick={ this.onClickBtnRun } className="top-menu-item">Run</a>
          <a id="btnIdle" onClick={ this.onClickBtnJump } className="top-menu-item">Jump</a>
          <a id="btnIdle" onClick={ this.onClickBtnIdle } className="top-menu-item">Stop</a>
        </TopMenu>
 
        <a-scene>
 
          <a-assets>
            <img id="sky" src="img/square.jpg"/>
            <a-asset-item id="botmodel" src="models/bot4.json"></a-asset-item>
          </a-assets>
 
          <a-sky src="#sky" rotation="0 -90 0"/>
 
          <a-entity position="0 1 0">
            <a-entity position="0 -0.5 1.25" camera="userHeight: 0; near: 0.5; fov: 100"
            orbit-controls={ AFRAME.utils.styleParser.stringify(this.orbitControls) }/>
          </a-entity>
 
          <a-entity id="bot" ref={ (bot: AFrame.Entity) => this.refs.bot = bot }
            scale="1 1 1"
            position="0 0 0"
            animation-mixer={ `clip: ${this.state.botStatus}; crossFadeDuration: ${this.crossFadeDuration}` }
            json-model="src: #botmodel">
          </a-entity>
 
          <a-plane height="100" width="33" color="#4d672b" rotation="-90 0 0"></a-plane>
 
        </a-scene>
      </div>
    )
  }
}