-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy path3_model.html
More file actions
158 lines (127 loc) · 7.74 KB
/
3_model.html
File metadata and controls
158 lines (127 loc) · 7.74 KB
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
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Required for favicon -->
<link rel="icon" href="./assets/favicon.ico" sizes="any"><!-- 32×32 -->
<link rel="apple-touch-icon" sizes="180x180" href="./assets/apple-touch-icon.png">
<link rel="apple-touch-startup-image" href="./assets/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./assets/favicon-16x16.png">
<link rel="manifest" href="./assets/manifest.webmanifest">
<!-- bootstrap css-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<!-- bootstrap icons-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<!-- required by model viewer -->
<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.0.1/model-viewer.min.js"></script>
</head>
<body class="text-center bg-white">
<!-- whole web container inside body-->
<div class="container w-100">
<!-- menu header section -->
<nav class="navbar navbar-expand-md pt-2">
<a href="" class="navbar-brand">
<img src="./assets/vr4content.512.transparent.bg.png" alt="vr4content icon" width="25" height="25"
class="mb-2">
<h5 class="text-dark d-inline-block px-2">Web AR experience</h5>
</a>
<!--collapsed button -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<i class="bi bi-list"></i>
</button>
<!--menu elements -->
<div class="collapse navbar-collapse small justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link nav-item text-black-50" href="#how_to">how to use?</a></li>
<li class="nav-item"><a class="nav-link nav-item text-black-50" href="#embed">embed code</a></li>
<li class="nav-item"><a class="nav-link nav-item text-black-50" href="#about">about this web</a>
</li>
<li class="nav-item"><a class="nav-link nav-item text-black-50" href="#contact">contact</a></li>
</ul>
</div>
</nav>
<!-- 3d model section -->
<div class="shadow bg-light">
<div class="row px-3 py-2 align-items-center">
<h5 class="text-start"><i class="bi bi-phone pe-2"></i>3D AR for mobile and web</h5>
<!-- left column -->
<div class="col">
<p class="text-center">Here you can see how it looks your 3D model integrated on
the webpage. This is also a web AR experience made for mobiles phones. To bring this 3D model to
your
environment visit this page with your mobile web browser.</p>
<P class="mb-0 small pt-2">follow us for more content:</P>
<div class="btn-group">
<button type="button" class="btn"><a target="_blank" class="text-dark"
href="https://www.instagram.com/vr4content/"><i
class="bi bi-instagram"></i></a></button>
<button type="button" class="btn"><a target="_blank" class="text-dark"
href="https://www.youtube.com/channel/UC8KziANSHhEH-ctOw1bWSWA"><i
class="bi bi-youtube"></i></a></button>
<button type="button" class="btn"><a target="_blank" class="text-dark"
href="https://twitter.com/vr4content"><i class="bi bi-twitter"></i></a></button>
<button type="button" class="btn"><a target="_blank" class="text-dark"
href="https://www.facebook.com/vr4content/"><i class="bi bi-facebook"></i></a></button>
<button type="button" class="btn"><a target="_blank" class="text-dark"
href="https://www.linkedin.com/company/vr4content"><i
class="bi bi-linkedin"></i></a></button>
</div>
</div>
<!-- right column -->
<div class="col">
<model-viewer
style="width: 300px; height: 300px; margin:0 auto; background-color: #ffffff00; outline: none;border: none"
src="./assets/your3dmodel.glb" ios-src="./assets/your3dmodel.usdz" alt="your 3d model"
auto-rotate ar ar-modes="scene-viewer webxr quick-look" camera-orbit="90deg 90deg 0.5m"
min-camera-orbit="auto auto auto" max-camera-orbit="auto auto 0.5m" camera-controls>
</model-viewer>
</div>
</div>
</div>
<!-- how to use section -->
<div id="how_to" class="shadow bg-light mt-4 pb-3 px-3">
<h5 class="text-start py-2 "><i class="bi bi-info-circle pe-2"></i>how to use?</h5>
</div>
<!-- embed section -->
<div id="embed" class="shadow bg-light mt-4 pb-3 px-3">
<h5 class="text-start py-2"><i class="bi bi-code-square pe-2"></i>embed code</h5>
</div>
<!-- about this web section -->
<div id="about" class="shadow bg-light mt-4 pb-3 px-3">
<h5 class="text-start py-2"><i class="bi bi-search pe-2"></i>more about this experience</h5>
</div>
<!-- contact section -->
<div id="contact" class="shadow bg-light mt-4 mt-3 px-3">
<h5 class="text-start py-2"><i class="bi bi-person-circle pe-2"></i>contact</h5>
</div>
<!-- footer section -->
<footer class="text-black-50 mt-5">
<P class="mb-0 small">follow us for more content:</P>
<div class="btn-group">
<button type="button" class="btn"><a class="text-black-50"
href="https://www.instagram.com/vr4content/"><i class="bi bi-instagram"></i></a></button>
<button type="button" class="btn"><a class="text-black-50"
href="https://www.youtube.com/channel/UC8KziANSHhEH-ctOw1bWSWA"><i
class="bi bi-youtube"></i></a></button>
<button type="button" class="btn"><a class="text-black-50" href="https://twitter.com/vr4content"><i
class="bi bi-twitter"></i></a></button>
<button type="button" class="btn"><a class="text-black-50"
href="https://www.facebook.com/vr4content/"><i class="bi bi-facebook"></i></a></button>
<button type="button" class="btn"><a class="text-black-50"
href="https://www.linkedin.com/company/vr4content"><i class="bi bi-linkedin"></i></a></button>
</div>
<p class="small">this is a web design powered by vr4content.com</p>
</footer>
</div>
<!-- bootstrap requirement-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
crossorigin="anonymous"></script>
</body>
</html>