️👩‍👩‍👧‍👧🍒 ↝ [SGV2-7 GP-16]: Having a go at creating new landmasses

components/Content/Planets/Construction/GlobeClickable.tsx

@@ -0,0 +1,70 @@
+import { useEffect, useRef } from "react";
+import * as THREE from "three";
+import { Sprite, SpriteMaterial, TextureLoader } from "three";
+import { useFrame } from "@react-three/fiber";
+
+interface Landmass {
+  lat: number;
+  lng: number;
+  imageURL: string;
+  onClickFunction: () => void;
+}
+
+interface ClickableImagesProps {
+  landmasses: Landmass[];
+}
+
+function ClickableImages({ landmasses }: ClickableImagesProps) {
+  const groupRef = useRef<THREE.Group | null>(null);
+
+  useEffect(() => {
+    if (groupRef.current) {
+      landmasses.forEach((landmass) => {
+        const { lat, lng, imageURL, onClickFunction } = landmass;
+
+        // Load texture
+        const textureLoader = new TextureLoader();
+        const texture = textureLoader.load(imageURL);
+
+        // Create a sprite with the texture
+        const spriteMaterial = new SpriteMaterial({ map: texture });
+        const sprite = new Sprite(spriteMaterial);
+
+        // Set the size of the sprite
+        const size = 8; // Adjust size as needed (e.g. 8 for Tailwind scale)
+        sprite.scale.set(size, size, 1);
+
+        // Convert lat/lng to 3D coordinates
+        const radius = 100; // Adjust radius as needed
+        const phi = (90 - lat) * (Math.PI / 180);
+        const theta = lng * (Math.PI / 180);
+        sprite.position.set(
+          radius * Math.sin(phi) * Math.cos(theta),
+          radius * Math.cos(phi),
+          radius * Math.sin(phi) * Math.sin(theta)
+        );
+
+        // Create a click handler for the sprite
+        const handleClick = (event: any) => {
+          event.stopPropagation();
+          onClickFunction();
+        };
+
+        // Add event listener to the sprite for the 'click' event
+        sprite.addEventListener('click', handleClick);
+
+        // Add the sprite to the group
+        groupRef.current.add(sprite);
+      });
+    }
+  }, [landmasses]);
+
+  // Use useFrame hook to continuously update the scene if needed
+  useFrame(() => {
+    // Add any animation logic here if required
+  });
+
+  return <group ref={groupRef} />;
+}
+
+export default ClickableImages;

components/Content/Planets/PlanetGlobeTest.tsx

@@ -28,7 +28,7 @@ export function GlobeDemo() {
     maxRings: 9,
     initialPosition: { lat: 22.3193, lng: 114.1694 },
     autoRotate: true,
-    autoRotateSpeed: 0.23,
+    autoRotateSpeed: 0.03,
   };
   const colors = ["#06b6d4", "06b6d4", "#6366f1"];
   const sampleArcs = [
@@ -412,11 +412,9 @@ export function GlobeDemo() {
           className="div"
         >
           <h2 className="text-center text-xl md:text-4xl font-bold text-black dark:text-white">
-            We sell soap worldwide
+
           </h2>
           <p className="text-center text-base md:text-lg font-normal text-neutral-700 dark:text-neutral-200 max-w-md mt-2 mx-auto">
-            This globe is interactive and customizable. Have fun with it, and
-            don&apos;t forget to share it. :)
           </p>
         </motion.div>
         <div className="absolute w-full bottom-0 inset-x-0 h-40 bg-gradient-to-b pointer-events-none select-none from-transparent z-40" />