OrBI/index.html at main · AVRGroup/OrBI · 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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OrBI</title>

    <link rel="stylesheet" href="css/w3.css">

    <style>
        header {
            height: 60vh;
            margin-bottom: 1.5em;
            padding-bottom: 1em;

            background-image: url('img/path259.png');
            background-repeat: no-repeat;
            background-position: center;
            background-size: auto 80%;
            background-color: #eee
        }

        h2 {
            padding-top: 1.15em;
        }

        p {
            font-size: 1.15em;
        }

        a {
            text-decoration: none;
        }

        #title {
            font-size: 3em;
        }
    </style>

    <script src="components/navbar.js"></script>
    <script src="js/translation.js"></script>
</head>

<body>
    <navbar-component></navbar-component>
    <header class="w3-display-container w3-opacity">

        <div class="w3-display-middle w3-wide w3-center">
            <h1 id="title">OrBI</b></h1>
            <span class="w3-hide-small w3-black w3-padding"> Orbit-Based Interface</span>
        </div>

        <span class="w3-hide-medium w3-hide-large w3-black w3-padding w3-display-bottommiddle w3-center">
            Orbit-Based
            Interface</span>
    </header>

    <main>
        <div class="w3-container w3-content w3-padding" style=" width: 80vw; max-width: 1536px;">
            <div class="w3-opacity">
                <h2 id="about"><b>About</b></h2>
                <p id="about-text-1">
                    OrBI is a virtual reality user interface developed with A-FRAME, a virtual reality framework built
                    on top of the
                    THREE.JS 3D library, which means that it can run on Oculus Quest, Rift, WMR, SteamVR, desktop, and
                    mobile,
                    though the latter is the focus of this project.
                </p>

                <p id="about-text-2">
                    OrBI was designed to be used without controllers and with few or no physical buttons, as is common
                    when individuals are introduced to virtual reality via smartphones and inexpensive HMDs such as
                    Google Cardboard.
                </p>

                <h2 id="projects"><b>Projects</b></h2>
                <p id="projects-text-1">OrBI was originally designed for virtual reality apps in AVRGroup's VRTools
                    project; links to some of
                    those apps are provided below to demonstrate OrBI's features.
                </p>
            </div>

            <div class="w3-row-padding">
                <a href="https://avrgroup.github.io/vrtools/projects/platonic-solids.html" rel="external"
                    target="_blank" class="w3-col m3 l3 w3-margin-bottom l3 w3-margin-bottom">
                    <div class="w3-card">
                        <img src="img/projects-main-images/platonic-solids.jpeg" style="width: 100%;">
                        <div class="w3-container w3-center">
                            <p id="ps" class="w3-opacity">Platonic Solids</p>
                        </div>
                    </div>
                </a>

                <a href="https://avrgroup.github.io/vrtools/projects/inclined-plane.html" rel="external" target="_blank"
                    class="w3-col m3 l3 w3-margin-bottom l3 w3-margin-bottom">
                    <div class="w3-card">
                        <img src="img/projects-main-images/inclined-plane.png" style="width: 100%;">
                        <div class="w3-container w3-center">
                            <p id="ip" class="w3-opacity">Inclined Plane</p>
                        </div>
                    </div>
                </a>

                <a href="https://avrgroup.github.io/vrtools/projects/vascular-diseases.html" rel="external"
                    target="_blank" class="w3-col m3 l3 w3-margin-bottom">
                    <div class="w3-card">
                        <img src="img/projects-main-images/vascular-diseases.png" style="width: 100%;">
                        <div class="w3-container w3-center">
                            <p id="vd" class="w3-opacity">Vascular Diseases</p>
                        </div>
                    </div>
                </a>

                <a href="https://avrgroup.github.io/vrtools/projects/virtual-travel.html" rel="external" target="_blank"
                    class="w3-col m3 l3 w3-margin-bottom">
                    <div class="w3-card">
                        <img src="img/projects-main-images/virtual-travel.png" style="width: 100%;">
                        <div class="w3-container w3-center">
                            <p id="vt" class="w3-opacity">Virtual Travel</p>
                        </div>
                    </div>
                </a>
            </div>

            <div>
                <h2 id="howto" class="w3-opacity"><b>How to use</b></h2>
                <p id="howto-text-1" class="w3-opacity">A simple application is provided below to show how OrBI works.  You can learn more how to use <a href="https://avrgroup.github.io/OrBI/learn/?lang=en-US"  target="_blank">clicking <b>here</b>.</a></a>
                </p>
                <div class="w3-row-padding">
                    <div class="w3-col l6">
                        <iframe src="demos/demo.html" class="w3-margin-top"
                            style="height: 32em; width: 100%; overflow: scroll; border: none;"></iframe>
                    </div>
                    <div class="w3-col l6">
                        <pre class="w3-code w3-black notranslate w3-opacity" style="height: 30em; overflow: scroll;">
&lt;html&gt;

&lt;head&gt;
    &lt;script src="https://aframe.io/releases/1.2.0/aframe.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://avrgroup.github.io/vrtools/projects/libs/orbi.js"&gt;&lt;/script&gt;

    &lt;script&gt;
        AFRAME.registerComponent('app', {
            init: function () {
                const orbi = this.el.components['orbi'];
                this.box = document.querySelector('#box').object3D;
                this.isToRotate = false;

                orbi.addButton('myButton', '#myTexture', () =&gt; {
                    this.isToRotate = !this.isToRotate;
                });
            },
            tick: function (time, delta) {
                if (this.isToRotate) {
                    this.box.rotation.y += 0.001 * delta;
                }
            },
        });
    &lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;a-scene background="color: #ECECEC"&gt;
        &lt;a-assets&gt;
            &lt;img id="myTexture" src="https://avrgroup.github.io/vrtools/projects/src/assets/icons/rotation.png"&gt;
        &lt;/a-assets&gt;

        &lt;a-box id="box" position="0 0.5 -3" rotation="0 45 0" color="#4CC3D9"&gt;&lt;/a-box&gt;
        &lt;a-plane position="0 0 -4" rotation="-90 0 0" width="7" height="7" color="#7BC8A4"&gt;&lt;/a-plane&gt;

        &lt;a-entity id="rig" position="0 0 0"&gt;
            &lt;a-entity id="camera" camera position="0 1.6 0" look-controls="pointerLockEnabled: true"&gt;
            &lt;/a-entity&gt;
        &lt;/a-entity&gt;

        &lt;a-entity orbi="dimension: 1 1; orbits: 1 1.25; theta: 35; border: 1 #ABABAB; transparency: true;" app&gt;
        &lt;/a-entity&gt;
    &lt;/a-scene&gt;
&lt;/body&gt;

&lt;/html&gt;
                        </pre>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <footer class="w3-container w3-black w3-margin-top w3-padding-16">
        <img class="w3-col w3-margin-top w3-margin-left" src="img/dev.jpg" alt="picture of the developer"
            style="width: 5em; border-radius: 50%;">
        <span class="w3-col w3-border-left w3-padding w3-margin-left w3-margin-top" style="max-width: 50vw;">
            <b id="about-dev-1">About the developer:</b><br>
            <span id="about-dev-2">Paulo Rozatto is Computer Scicene Student at Universidade Federal de Juiz de
                Fora.</span> <br>
            <a href="https://github.com/Paulo-Rozatto" rel="external" target="_blank"><img
                    src="img/GitHub-Mark-Light-32px.png" alt="github logo" style="width: 24px;"></a>
        </span>
    </footer>

    <script>
        TRANSLATION.add('#about', '<b>About</b>', '<b>Sobre</b>');
        TRANSLATION.add('#projects', '<b>Projects</b>', '<b>Projetos</b>');
        TRANSLATION.add('#howto', '<b>How to Use</b>', '<b>Como Usar</b>');

        TRANSLATION.add(
            '#about-text-1',
            `OrBI is a virtual reality user interface developed with A-FRAME, a virtual reality framework built
              on top of the THREE.js 3D library, which means that it can run on Oculus Quest, Rift, WMR, SteamVR,
              desktop, and mobile, though the latter is the focus of this project.`,
            `OrBI é uma interface gráfica para realidade virtual densenvolvida em A-FRAME, um framework de real
            idade virtual constrúida com base na blibioteca THREE.js, o que significa que ela pode rodar Oculus
             Quest, Rift, WMR, SteamVR, computadores e em dispositivos móveis, sendo a ultima opção o foco desse
              projeto.`
        );

        TRANSLATION.add(
            '#about-text-2',
            `OrBI was designed to be used without controllers and with few or no physical buttons, as is common
             when individuals are introduced to virtual reality via smartphones and inexpensive HMDs such as
             Google Cardboard.`,
            `A OrBI foi pensada para ser usada sem controles e quando há poucos ou nehum botão disponível, o que
            é comum quando as pessoas estão sendo introduzidas à realidade virtual via smartphones e HMDs de baixo
             custo como o Google Cardboard.`
        );

        TRANSLATION.add(
            '#projects-text-1',
            `OrBI was originally designed for virtual reality apps in AVRGroup's VRTools project; links to some
             of those apps are provided below to demonstrate OrBI's features.`,
            `A OrBi foi densevolvida inicialmente para aplicações em realidade virtual do projeto VRTools do AV
            RGroup. Algumas destas aplicações estão linkadas abaixo para demontras os recursos da OrBI.`
        );

        TRANSLATION.add(
            '#howto-text-1',
            `A simple application is provided below to show how OrBI works. You can learn more how to use <a href="https://avrgroup.github.io/OrBI/learn/?lang=en-US"  target="_blank">clicking here.</a>`,
            `Uma aplicação simples é mostrada abaixo para demonstrar o funcionamento OrBI. Você pode aprender mais como usar <a href="https://avrgroup.github.io/OrBI/learn/?lang=en-US"  target="_blank">clicando <b>aqui</b>.</a>`
        );

        TRANSLATION.add(
            '#about-dev-1',
            `About the developer:`,
            `Sobre o desenvolvedor:`
        );

        TRANSLATION.add(
            '#about-dev-2',
            `Paulo Rozatto is Computer Scicene Student at Universidade Federal de Juiz de Fora.`,
            `Paulo Rozatto é um estudante de Ciência da Computação da Universidade Federal de Juiz de Fora.`
        );

        TRANSLATION.add(
            '#vt',
            'Virtual Travel',
            'Viagem Virtual'
        )

        TRANSLATION.add(
            '#ps',
            'Platonic Solids',
            'Sólidos Platônicos'
        )

        TRANSLATION.add(
            '#ip',
            'Inclined Plane',
            'Plano Inclinado'
        )

        TRANSLATION.add(
            '#vd',
            'Vascular Diseases',
            'Doenças Vasculares'
        )
    </script>
</body>

</html>