performs/build/demo-without-gui.html at main · upf-gti/performs · GitHub

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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<html>
    <head>
        <title>Performs</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="icon" type="image/x-icon" href="./data/imgs/favicon.png">
        <style>
            html, body { width:100%; height:100%; margin:0; padding:0; overflow:hidden; }
        </style>

        <script async src="https://unpkg.com/es-module-shims@0.10.7/dist/es-module-shims.js"></script>

        <script type="importmap">
			{
				"imports": {
					"three": "../external/three/build/three.module.js",
                    "three/addons/": "../external/three/jsm/"
				}
			}
		</script>
    </head>
    <body>
        <div style="display: flex; flex-direction: column; width: 100%; height: 100%;">
            <div style="width: 100%; height: 100px; color: #4f4f9c">
                <h2 style="padding: 0 10px; text-align: center;">This is a simple demo with a custom GUI</h2>
            </div>
            <div style="display: flex; width: 100%; height: calc(100% - 100px);">
                <div style="display: flex; flex-direction: column; padding: 10px; width: 200px;">
                    <div>
                        <input type="color" id="background-color" name="background" value="#e66465" />
                        <label for="background">Background color</label>
                    </div>
                    <button id="play-btn">Play</button>
                    <button id="trajectories-btn">Show trajectories</button>
                    <div id="trajectories-container" style="display: none;">
                        <div>
                            <input type="range" id="trajectories-start" name="start" min="0" max="11" step="any" />
                            <label for="start">Start of trajectories</label>
                        </div>
                        <div>
                            <input type="range" id="trajectories-end" name="end" min="0" max="11" step="any" />
                            <label for="end">End of trajectories</label>
                        </div>
                    </div>
                </div>
                <div style="width: calc(100% - 200px); padding: 10px;" id="performs"></div>
            </div>
        </div>

        <script type="module">
            // ------------------------ PERFORMS ------------------------ //
            // Import Performs module without default GUI
            import { Performs } from './performs.nogui.module.js';

            const performs = new Performs();

            // Init Performs with configuration options (default animation and onReady function)
            performs.init({color: "#4f4f9c", animations:[{name:"https://animics-lfs.gti.upf.edu/files/evalls/animics/clips/GSL-Omega.bvhe"}], onReady: () => {
                const div = document.getElementById("performs");
                // Append the Performs' render dom element (canvas) to specified HTML element as a child node
                performs.appendCanvasTo(div);
                colorBtn.value = performs.getBackPlaneColor();

                // Load another default avatar
                const avatarName = "Nia"
                const [path, configFile, rotation] = performs.avatars[avatarName];
                performs.loadAvatar(path, configFile, rotation, avatarName, () => {

                    performs.changeAvatar( avatarName );
                })
            }});
            window.global = {app: performs};

            // ------------------------ CUSTOM GUI ------------------------ //

            // Manage background color input
            const colorBtn = document.getElementById("background-color");

            colorBtn.oninput = ( event ) => {
                // Change background color
                performs.setBackPlaneColor( event.target.value );
            }

            // Manage play/stop current animation button
            const playBtn = document.getElementById("play-btn");
            playBtn.onclick = () => {
                if( playBtn.innerText == "Play" ) {
                    playBtn.innerText = "Stop";
                }
                else {
                    playBtn.innerText = "Play";
                }
                // Switch state
                performs.changePlayState();
            }

            // Manage start and end trajectories window inputs
            const startInput = document.getElementById("trajectories-start");
            const endInput = document.getElementById("trajectories-end");

            startInput.oninput = ( event ) => {
                const start = event.target.value;
                const end = performs.keyframeApp.trajectoriesEnd;
                // Update trajectories range
                performs.keyframeApp.updateTrajectories( start, end );
            }
            endInput.oninput = ( event ) => {
                const start = performs.keyframeApp.trajectoriesStart;
                const end = event.target.value;
                // Update trajectories range
                performs.keyframeApp.updateTrajectories( start, end );
            }

            // Manage show/hide trajectories of current animation button
            const trajectoriesBtn = document.getElementById("trajectories-btn");
            const trajectoriesContainer = document.getElementById("trajectories-container");
            trajectoriesBtn.onclick = () => {
                if( trajectoriesBtn.innerText == "Show trajectories" ) {
                    trajectoriesBtn.innerText = "Hide trajectories";
                    performs.keyframeApp.showTrajectories();

                    // Update min/max range buttons based on actual trajectories range (make sure covers animation duration)
                    startInput.max = endInput.value = performs.keyframeApp.trajectoriesEnd;
                    endInput.min = startInput.value = performs.keyframeApp.trajectoriesStart;
                    trajectoriesContainer.style.display = "block";
                }
                else {
                    trajectoriesBtn.innerText = "Show trajectories";
                    performs.keyframeApp.hideTrajectories();
                    trajectoriesContainer.style.display = "none";
                }
            }

        </script>
    </body>
</html>