feat: variant selection (#255)

* feat: variant selection * fix: rearranged the ui * feat: added to models with variants * Update ProductItems.js --------- Co-authored-by: Shwet Khatri <[email protected]>
ShwetKhatri2001 · Feb 24, 2024 · de20983 · de20983
1 parent b9e0004
commit de20983
Show file tree

Hide file tree

Showing 9 changed files with 103 additions and 7 deletions.
diff --git a/src/App.css b/src/App.css
@@ -189,6 +189,19 @@
   line-height: 0;
 }
 
+.variant_div select{
+  top:18px;
+  position: absolute;
+  right: 3.3rem;
+  color: rgb(82, 78, 78);
+  background: #e8eaed;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  padding: 4px 8px;
+  border-radius: 4px;
+  width: fit-content;
+}
+
+
 .annotate-btn {
   background-color: rgba(0, 0, 0, 0.284);
   border-radius: 100%;

diff --git a/src/assets/models/OfficeChair.glb b/src/assets/models/OfficeChair.glb
diff --git a/src/assets/models/OfficeChair.usdz b/src/assets/models/OfficeChair.usdz
diff --git a/src/assets/models/bugatti.glb b/src/assets/models/bugatti.glb
diff --git a/src/assets/models/bugatti.usdz b/src/assets/models/bugatti.usdz
diff --git a/src/assets/models/pot.glb b/src/assets/models/pot.glb
diff --git a/src/assets/models/pot.usdz b/src/assets/models/pot.usdz
diff --git a/src/components/ModelViewer/ModelViewer.js b/src/components/ModelViewer/ModelViewer.js
@@ -4,11 +4,13 @@ import LazyLoad from "react-lazyload";
 import QRCode from "qrcode.react";
 import Help from "./Help";
 const ModelViewer = ({ item }) => {
+  const [selectedVariant, setSelectedVariant] = useState('default');
   const [display, setDisplay] = useState(false);
   const [ARSupported, setARSupported] = useState(false);
   const [annotate, setAnnotate] = useState(false);
 
-
+
+
   let modelViewer1 = {
     backgroundColor: " #ecf0f3",
     overflowX: "hidden",
@@ -17,10 +19,13 @@ const ModelViewer = ({ item }) => {
     height: ARSupported ? "85%" : "75%",
     borderRadius: 15,
   };
-
+  
   // Accessing product for full screen start
   const model = useRef();
 
+  // Accessing varient selections element
+  const varient = useRef(null);
+
   console.log(item)
 
   function toggle() {
@@ -51,6 +56,33 @@ const ModelViewer = ({ item }) => {
     }
   }, []);
 
+  useEffect(() => {
+    // set up event listeners
+    const modelViewer = model.current
+    modelViewer &&
+    modelViewer.addEventListener('load', () => {
+      console.log('loaded')
+      const availableVariants = modelViewer?.availableVariants;
+      console.log(availableVariants)
+      for (const variant of availableVariants) {
+        const option = document.createElement('option');
+        option.value = variant;
+        option.textContent = variant;
+        varient?.current?.appendChild(option);
+      }
+
+      // Adding a default option
+      const defaultOption = document.createElement('option');
+      defaultOption.value = 'Default';
+      defaultOption.textContent = 'Default';
+      varient?.current?.appendChild(defaultOption);
+    });
+
+    varient?.current?.addEventListener('input', (event) => {
+      modelViewer.variantName = event.target.value === 'Default' ? null : event.target.value;
+    });
+  }, []);
+
 
 
   return (
@@ -95,7 +127,7 @@ const ModelViewer = ({ item }) => {
             </button>
           </>
         )}
-
+        
         <button className="annotate-btn" onClick={() => setAnnotate((prevState) => !prevState)}>
           i
         </button>
@@ -115,9 +147,13 @@ const ModelViewer = ({ item }) => {
             <div class="HotspotAnnotation">{annotate.title}</div>
           </button>
         ))}
-
+
+        <div class="controls variant_div">
+          <select ref={varient} id="variant"></select>
+        </div>
 
       </model-viewer>
+
       <LazyLoad>
         {/* Card content below the model-viewer */}
         <div className="qr-sec">

diff --git a/src/data/ProductItems.js b/src/data/ProductItems.js
@@ -6,6 +6,10 @@ import car from "../assets/models/car.glb";
 import ioscar from "../assets/models/car.usdz";
 import car1 from "../assets/models/Car1.glb";
 import ioscar1 from "../assets/models/Car1.usdz";
+import OfficeChair from "../assets/models/OfficeChair.glb";
+import OfficeChairUsdz from "../assets/models/OfficeChair.usdz";
+import pot from "../assets/models/pot.glb";
+import potUsdz from "../assets/models/pot.usdz";
 
 const productItems = [
   {
@@ -35,6 +39,49 @@ const productItems = [
   },
   {
     id: 2,
+    name: "Office Chair",
+    modelSrc: OfficeChair,
+    iOSSrc: OfficeChairUsdz,
+    category: "Furniture",
+    color: "black",
+    annotations: [
+      {
+        title: "comfortable-back",
+        slot: "hotspot-1",
+        position: "0.011597651675006926m 0.5744572599492905m -0.1383899854988515m",
+        normal: "0.028332494851243895m 0.2137467602998606m 0.9764781575625839m",
+        orbit: "10.89188deg 119.9775deg 0.03543022m",
+        target: "-0.1053838m 0.01610652m 0.1076345m"
+      }, {
+        title: "comfortable-seat",
+        slot: "hotspot-2",
+        position: "0.008754174027053235m 0.3513235856998005m 0.1658749505478343m",
+        normal: "-0.30988561688489596m 0.9507625837296717m -0.004627507703580716m",
+        orbit: "10.89188deg 119.9775deg 0.03543022m",
+        target: "-0.1053838m 0.01610652m 0.1076345m"
+      },
+    ]
+  },
+  {
+    id: 3,
+    name: "pot",
+    modelSrc: pot,
+    iOSSrc: potUsdz,
+    category: "Environment",
+    color: "Red",
+    annotations: [
+      {
+        title: "pot-structure",
+        slot: "hotspot-1",
+         position: "0.008754174027053235m 0.3513235856998005m 0.1658749505478343m",
+        normal: "-0.30988561688489596m 0.9507625837296717m -0.004627507703580716m",
+        orbit: "10.89188deg 119.9775deg 0.03543022m",
+        target: "-0.1053838m 0.01610652m 0.1076345m"
+      }
+    ]
+  },
+  {
+    id: 4,
     name: "Painting",
     modelSrc: painting,
     iOSSrc: iospainting,
@@ -59,7 +106,7 @@ const productItems = [
     ]
   },
   {
-    id: 3,
+    id: 5,
     name: "Car",
     modelSrc: car,
     iOSSrc: ioscar,
@@ -83,9 +130,8 @@ const productItems = [
       },
     ]
   },
-
   {
-    id: 4,
+    id: 6,
     name: "Sport Car",
     modelSrc: car1,
     iOSSrc: ioscar1,
@@ -109,5 +155,6 @@ const productItems = [
       },
     ]
   },
+
 ];
 export default productItems;