feat: added annotations using MODEL-VIEWER (#244)

* feat: added annotations using MODEL-VIEWER * added requested changes
ShwetKhatri2001 · Feb 10, 2024 · c028b1c · c028b1c
1 parent 3f23a3f
commit c028b1c
Show file tree

Hide file tree

Showing 5 changed files with 256 additions and 75 deletions.
diff --git a/src/App.css b/src/App.css
@@ -18,15 +18,36 @@
   border: 1px solid #dadce0;
   cursor: pointer;
   scroll-behavior: smooth;
-
 }
-.model-view{
+.model-view {
   transition: all 1s;
 }
+.Hotspot {
+  padding: 1em;
+  background-color: white;
+  border-radius: 50px;
+  border: none;
+  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
 
-.model-view:hover{
+  color: rgba(0, 0, 0, 0.8);
+  display: block;
+  font-family: Futura, Helvetica Neue, sans-serif;
+  font-size: 12px;
+  font-weight: 700;
+  max-width: 128px;
+  overflow-wrap: break-word;
+  padding: 0.5em 1em;
+  position: absolute;
+  width: max-content;
+  height: max-content;
+  transform: translate3d(-50%, -50%, 0);
+}
+
+.model-view:hover {
   transform: scale(1.05);
-  box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
+  box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset,
+    rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
+    rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
 }
 
 .arbutton:active {
@@ -154,6 +175,25 @@
   padding: 0.225rem;
   line-height: 0;
 }
+
+.annotate-btn {
+  background-color: rgba(0, 0, 0, 0.284);
+  border-radius: 100%;
+  bottom: 18px;
+  color: #fff;
+  cursor: pointer;
+  font-size: 15px;
+  position: absolute;
+  aspect-ratio: 1/1;
+  right: 7rem;
+  font-weight: 600;
+  font-size: 1.5rem;
+  padding: 0.7em;
+  line-height: 0;
+  border: none;
+  text-align: center;
+}
+
 .fz {
   font-size: 30px;
 }
@@ -167,7 +207,7 @@
   justify-content: center;
   gap: 7px;
   width: 100%;
-padding-top: 10px;
+  padding-top: 10px;
 }
 
 .qr-sec h5 {
@@ -186,6 +226,7 @@ padding-top: 10px;
   width: 450px;
   height: 500px;
   margin: 1rem;
+  position: relative;
 }
 
 .fullscreen-mob {
@@ -238,22 +279,22 @@ padding-top: 10px;
   .help-btn span {
     right: 60%;
   }
-  .list-view{
-  grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
-  width: 100%;
-  height: auto;
-  display: grid;
-  grid-gap: 2rem;
-  margin-bottom: 2rem;
-  place-items: center; 
+  .list-view {
+    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
+    width: 100%;
+    height: auto;
+    display: grid;
+    grid-gap: 2rem;
+    margin-bottom: 2rem;
+    place-items: center;
   }
 }
 @media (max-width: 560px) {
   .help-btn {
     top: 4rem;
     left: 1rem;
   }
-  
+
   .fullscreen-btn {
     top: 1rem;
     left: 1rem;
@@ -277,17 +318,17 @@ padding-top: 10px;
   .help-btn span {
     right: 60%;
   }
-  .model-view{
+  .model-view {
     width: 80vw;
   }
-  .list-view{
-  width: 50vw;
-  height: auto;
-  display: grid;
-  grid-gap: 2rem;
-  margin-bottom: 2rem;
-  place-items: center;
-  justify-content: center;
+  .list-view {
+    width: 50vw;
+    height: auto;
+    display: grid;
+    grid-gap: 2rem;
+    margin-bottom: 2rem;
+    place-items: center;
+    justify-content: center;
   }
 }
 
@@ -313,12 +354,11 @@ padding-top: 10px;
   .help-btn span {
     right: 60%;
   }
-  .model-view{
+  .model-view {
     width: 80vw;
   }
 }
 
-
 @media (max-width: 375px) {
   .model-view {
     width: 96vw;
@@ -342,12 +382,12 @@ padding-top: 10px;
   .help-btn span {
     right: 60%;
   }
-  .model-view{
+  .model-view {
     width: 80vw;
   }
 }
 
-@media (max-width: 280px){
+@media (max-width: 280px) {
   .help-btn {
     top: 4rem;
     left: 0.5rem;
@@ -360,23 +400,23 @@ padding-top: 10px;
   .help-btn span {
     right: 50%;
   }
-  .model-view{
+  .model-view {
     width: 90vw;
   }
-  .list-view{
+  .list-view {
     width: 50vw;
     height: auto;
     display: grid;
     grid-gap: 2rem;
     margin-bottom: 2rem;
     place-items: center;
     justify-content: center;
-    }
+  }
   .qr-sec {
     flex-direction: row;
     align-items: center;
     justify-content: center;
     padding: 0 0;
     margin-top: 5px;
   }
-}
+}
diff --git a/src/components/ModelViewer/.html b/src/components/ModelViewer/.html
@@ -0,0 +1,32 @@
+<model-viewer src="sheenchair.glb" ar ar-modes="webxr scene-viewer quick-look" camera-controls tone-mapping="commerce"
+  poster="poster.webp" shadow-intensity="1">
+  <button class="Hotspot" slot="hotspot-1"
+    data-position="0.048018196251228926m 0.6036223600661794m -0.14826366163244487m"
+    data-normal="0.04351052601136635m 0.3415809677343345m 0.9388446498797817m" data-visibility-attribute="visible">
+    <div class="HotspotAnnotation">comfortable-cushion</div>
+  </button><button class="Hotspot" slot="hotspot-2"
+    data-position="-0.0033771761976861894m 0.3551300235435977m 0.13407209767324835m"
+    data-normal="-0.05104891412409527m 0.9951060545055077m 0.08460466094271978m" data-visibility-attribute="visible">
+    <div class="HotspotAnnotation">cushion-seat</div>
+  </button><button class="Hotspot" slot="hotspot-3"
+    data-position="0.22748574046349934m 0.2459646721794866m -0.007121040934450207m"
+    data-normal="0.12488193738441994m -0.9890914935776142m 0.07811862164374446m" data-visibility-attribute="visible">
+    <div class="HotspotAnnotation">wooden-finish</div>
+  </button>
+  <div class="progress-bar hide" slot="progress-bar">
+    <div class="update-bar"></div>
+  </div>
+  <button slot="ar-button" id="ar-button">
+    View in your space
+  </button>
+  <div id="ar-prompt">
+    <img src="https://modelviewer.dev/shared-assets/icons/hand.png">
+  </div>
+</model-viewer>
+
+
+<button class="Hotspot" slot="hotspot-1" data-position="0.021652429656029135m 1.4643635734200455m 0.4614263460778892m"
+  data-normal="0.9995959491122697m -0.020561903162868395m 0.019625153672313916m"
+  data-orbit="-50.94862deg 84.56856deg 0.06545582m"
+  data-target="0.021652429656029135m 1.4643635734200455m 0.4614263460778892m" data-fov="12.91deg"
+  data-visibility-attribute="visible" data-visible="">