Skip to content

Commit 3f22c9d

Browse files
SaipradyumnagoudSaipradyumnagoud
authored
Added How-To-Create-AR-Website-With-3D-Object-Placement (#535)
* added How to create user info based Resume maker * added How to create user info based Resume maker cover * Made the changes * Added How to create a AR website with 3D Object placement
1 parent 0131de6 commit 3f22c9d

File tree

2 files changed

+199
-0
lines changed

2 files changed

+199
-0
lines changed

‎Web Development/How-To-Create-AR-Website-With-3D-Object-Placement/index.html

Lines changed: 199 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,199 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="description" content="Learn how to create an AR website with 3D object placement, focusing on the implementation of AR technology and interactive 3D models." />
7+
<meta name="keywords" content="AR Website, 3D Object Placement, Web Development, HTML, CSS, JavaScript, AR.js, Three.js" />
8+
<title>AR Website with 3D Object Placement</title>
9+
<meta name="saipradyumnagoud" content="CSEdge" />
10+
<!-- Favicon-->
11+
<link rel="icon" type="image/x-icon" href="https://csedge.courses/Images/CSEDGE-LOGO32X32.png" />
12+
<!-- Core theme CSS (includes Bootstrap)-->
13+
<link rel="stylesheet" href="../main.css">
14+
<link rel="stylesheet" href="../styles.css">
15+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
16+
<script src="https://kit.fontawesome.com/b08b6de27e.js" crossorigin="anonymous"></script>
17+
</head>
18+
19+
<body>
20+
<!-- Responsive navbar-->
21+
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
22+
<div class="container">
23+
<img height="32px" width="32px" src="https://csedge.courses/Images/CSEDGE-LOGO32X32.png" alt="logo" />
24+
<a class="navbar-brand" href="./index.html">CSEdge Learn</a>
25+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
26+
<span class="navbar-toggler-icon"></span>
27+
</button>
28+
29+
<div class="collapse navbar-collapse" id="navbarSupportedContent">
30+
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 flex">
31+
<li class="nav-item me-2">
32+
<a class="nav-link" href="https://csedge.courses"><i class="fa-solid fa-house"></i> Home</a>
33+
</li>
34+
<li class="nav-item me-2">
35+
<a class="nav-link" href="https://csedge.courses/about"> <i class="fa-solid fa-circle-info"></i> About</a>
36+
</li>
37+
<li class="nav-item me-2">
38+
<a class="nav-link" href="https://csedge.courses#contact"><i class="fa-solid fa-phone"></i> Contact</a>
39+
</li>
40+
<li class="nav-item me-2">
41+
<a class="nav-link active" aria-current="page" href="#!"><i class="fa-solid fa-blog"></i> Blog</a>
42+
</li>
43+
</ul>
44+
</div>
45+
</div>
46+
</nav>
47+
48+
<!--Page Content-->
49+
50+
<div class="container mt-5">
51+
<div class="row">
52+
<!-- Blog entries-->
53+
<div class="col-lg-8 py-6">
54+
<h1 class="pt-5">AR Website with 3D Object Placement</h1>
55+
<!-- Featured blog post-->
56+
<div class="card mb-4">
57+
<div class="card-body">
58+
<main class="container">
59+
<section>
60+
<p>Learn how to create an AR website with 3D object placement, focusing on the implementation of AR technology and interactive 3D models. We will use libraries such as AR.js and Three.js to achieve this.</p>
61+
</section>
62+
<section>
63+
<h3>Introduction</h3>
64+
<p>Augmented Reality (AR) websites allow users to interact with 3D objects in a real-world environment through their browser. This tutorial will guide you through the steps to create an AR website that supports 3D object placement.</p>
65+
<h4>Technologies Used</h4>
66+
<ul>
67+
<li>AR.js: A library for adding AR capabilities to web applications.</li>
68+
<li>Three.js: A JavaScript library for creating and displaying 3D graphics in a web browser.</li>
69+
</ul>
70+
</section>
71+
<section>
72+
<h3>Setting Up the Project</h3>
73+
<p>Start by setting up your HTML file and including the necessary libraries.</p>
74+
<pre><code>
75+
// Example of including AR.js and Three.js in HTML
76+
<!DOCTYPE html>
77+
<html lang="en">
78+
<head>
79+
<meta charset="UTF-8">
80+
<title>AR Website with 3D Object Placement</title>
81+
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
82+
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
83+
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
84+
</head>
85+
<body>
86+
<a-scene embedded arjs>
87+
<!-- Your AR content will go here -->
88+
</a-scene>
89+
</body>
90+
</html>
91+
</code></pre>
92+
<h4>Creating the AR Scene</h4>
93+
<p>Set up the AR scene and place a 3D model in the scene.</p>
94+
<pre><code>
95+
// Example of creating an AR scene with a 3D model
96+
<a-scene embedded arjs>
97+
<a-marker preset="hiro">
98+
<a-entity
99+
gltf-model="url(path/to/your/model.gltf)"
100+
scale="0.5 0.5 0.5"
101+
position="0 0 0">
102+
</a-entity>
103+
</a-marker>
104+
<a-entity camera></a-entity>
105+
</a-scene>
106+
</code></pre>
107+
<h4>Interactivity</h4>
108+
<p>Add interactivity to the 3D model, such as allowing users to click on the model to change its color.</p>
109+
<pre><code>
110+
// Example of adding interactivity to the 3D model
111+
<a-marker preset="hiro">
112+
<a-entity
113+
gltf-model="url(path/to/your/model.gltf)"
114+
scale="0.5 0.5 0.5"
115+
position="0 0 0"
116+
event-set__mouseenter="_event: mouseenter; color: red"
117+
event-set__mouseleave="_event: mouseleave; color: blue">
118+
</a-entity>
119+
</a-marker>
120+
</code></pre>
121+
<h4>Testing and Deployment</h4>
122+
<p>Test your AR website on different devices to ensure it works correctly. Once satisfied, deploy your website using a hosting service like Netlify or GitHub Pages.</p>
123+
<pre><code>
124+
// Example of deploying your AR website
125+
// Step 1: Create a repository on GitHub
126+
// Step 2: Push your project files to the repository
127+
// Step 3: Enable GitHub Pages in the repository settings
128+
// Your AR website is now live!
129+
</code></pre>
130+
</section>
131+
</main>
132+
</div>
133+
</div>
134+
</div>
135+
<!-- Side widgets-->
136+
<div class="col-lg-4">
137+
<!-- Search widget-->
138+
<div class="card mb-4">
139+
<div class="card-header">Search</div>
140+
<div class="card-body">
141+
<form action="">
142+
<div class="input-group">
143+
<input class="form-control" type="text" placeholder="Enter search term..." aria-label="Enter search term..." aria-describedby="button-search" />
144+
<button class="btn btn-primary" id="button-search" type="button">Go!</button>
145+
</div>
146+
</form>
147+
</div>
148+
</div>
149+
<!-- Categories widget-->
150+
<div class="card mb-4">
151+
<div class="card-header">Categories</div>
152+
<div class="card-body">
153+
<div class="row">
154+
<div class="col-sm-6">
155+
<ul class="list-unstyled mb-0">
156+
<li><a href="#!">Web Design</a></li>
157+
<li><a href="#!">HTML</a></li>
158+
<li><a href="#!">Freebies</a></li>
159+
</ul>
160+
</div>
161+
<div class="col-sm-6">
162+
<ul class="list-unstyled mb-0">
163+
<li><a href="#!">JavaScript</a></li>
164+
<li><a href="#!">CSS</a></li>
165+
<li><a href="#!">Tutorials</a></li>
166+
</ul>
167+
</div>
168+
</div>
169+
</div>
170+
</div>
171+
<!-- Side widget-->
172+
<div class="card mb-4">
173+
<div class="card-header">Side Widget</div>
174+
<div class="card-body">
175+
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8930077947690409" crossorigin="anonymous"></script>
176+
<ins class="adsbygoogle" style="display: block" data-ad-format="fluid" data-ad-layout-key="-fb+5w+4e-db+86" data-ad-client="ca-pub-8930077947690409" data-ad-slot="9866674087"></ins>
177+
<script>
178+
(adsbygoogle = window.adsbygoogle || []).push({});
179+
</script>
180+
</div>
181+
</div>
182+
</div>
183+
</div>
184+
</div>
185+
<!-- Footer-->
186+
<footer class="py-5 bg-dark">
187+
<div class="container">
188+
<p class="m-0 text-center text-white">
189+
Copyright &copy CSEdge Learn 2024
190+
</p>
191+
</div>
192+
</footer>
193+
<!-- Bootstrap core JS-->
194+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
195+
<!-- Core theme JS-->
196+
</div>
197+
</body>
198+
199+
</html>

‎posts/images/How-To-Create-AR-Website-With-3D-Object-Placement.png

155 KB
Loading

0 commit comments

Comments
 (0)