-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
106 lines (106 loc) · 4.38 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Spatial Planning with WebXR</title>
<link rel="stylesheet" href="./style.css" />
</head>
<script type="module" src="index.js"></script>
<body>
<div id="background-pentagon-net"></div>
<div class="menu-wrapper">
<div class="menu-wrapper-links">
<div id="menu-wrapper-links-aboutProject" class="menu-wrapper-links-link">
About Project
</div>
<div id="menu-wrapper-links-WebVR" class="menu-wrapper-links-link">
Virtual Reality
</div>
<div id="menu-wrapper-links-WebAR" class="menu-wrapper-links-link">
Augmented Reality
</div>
</div>
<div id="menu-wrapper-contact" class="menu-wrapper-copyrights">
<span>mateuszorylski@gmail.com</span>
<p id="app-version"></p>
</div>
</div>
<div id="about-component">
<h1 id="about-header">About Project</h1>
<h2 id="about-component-webxr" class="component-panel">
What is WebXR?
<p class="component-panel-p">
  According to <ins>Mozilla Corporation</ins>, one of the main
creators of virtual reality API for the internet. "<ins>WebXR</ins> is a group
of standards which are used together to support rendering 3D scenes to hardware
designed for presenting virtual worlds (virtual reality, or VR), or for adding
graphical imagery or objects to the real world, (augmented reality, or AR).
<br />  <ins>The WebXR API</ins> is used for features, such as
managing the selection of output devices, render the 3D scene to the chosen
device at the appropriate frame rate, and manage motion vectors created using
input controllers." <br /><br />
<a
href="https://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API"
style="color: whitesmoke; float: right"
>
MDN Web Docs WebXR Device API</a
>
</p>
</h2>
<h2 id="about-component-sp" class="component-panel">
What is spatial planning?
<p class="component-panel-p">
  <ins>Spatial planning</ins> systems refer to the methods and
approaches used by the public and private sector to influence the distribution
of people and activities in spaces of various scales. <br />
  <ins>Spatial planning</ins> can be defined as the coordination of
practices and policies affecting spatial organization. Discrete professional
disciplines which involve spatial planning include land use, urban, regional,
transport and environmental planning. Other related areas are also important,
including economic and community planning.<br />
  <ins>Spatial planning</ins> takes place on local, regional, national
and inter-national levels and often results in the creation of a spatial plan.
</p>
<br />
<a
href="https://en.wikipedia.org/wiki/Spatial_planning"
style="color: whitesmoke; float: right"
>
Spatial planning definition</a
>
</h2>
<h2 id="about-component-using" class="component-panel">
About this project
<p class="component-panel-p">
  The project aims to test the possibilities of
<ins>WebXR technology in spatial planning</ins>. This application is a
collection of prototype examples of the use of WebXR in spatial planning,
relating to both virtual and augmented reality. The project is financed under
the
<a
href="https://amu.edu.pl/uczelnia-badawcza/id-ub-uam"
style="color: whitesmoke"
>
<ins>„Inicjatywa doskonałości – Uczelnia badawcza”</ins></a
>
at the University of Adam Mikiewicz in Poznań. <br />
  The application was created based on the
<a href="https://threejs.org/" style="color: whitesmoke">
<ins>three.js API</ins></a
>
that allows to create a 3d content in a web browser and the
<ins>WebXR API</ins>.
<a href="https://www.blender.org/" style="color: whitesmoke">
<ins>Blender</ins></a
>
software was used to create 3D models for the project.<br />
  For examples regarding <ins>virtual reality</ins>, it is recommended
to use virtual reality devices such as Oculus Quest or HTC Vive. For examples
based on <ins>augmented reality</ins>, it is recommended to use a smartphone
with strong components
</p>
</h2>
</div>
</body>
</html>