add proximity link

src/ideas/decorations/ProximityPicture/idea.json

@@ -32,4 +32,4 @@
   "npm_dependencies": {
     "react-spring": "9.1.2"
   }
-}
+}

src/ideas/inputs/ProximityLink/idea.json

@@ -0,0 +1,44 @@
+{
+    "id": "07354d78-1833-4a3a-9c54-58ad3ff3c2cd",
+    "predecessor": "4383294b-2b44-4fed-a0b6-3e591c179904",
+    "name": "Proximity Link",
+    "purpose": "exist. Links end visitors when they walk in given radius. fixes.",
+    "schema": [
+      {
+        "name": "media",
+        "type": "image"
+      },
+      {
+        "name": "position",
+        "type": "position"
+      },
+      {
+        "name": "scale",
+        "type": "scale"
+      },
+      {
+        "name": "rotation",
+        "type": "rotation"
+      },
+      {
+        "name": "radius",
+        "type": "number"
+      },
+      {
+        "name": "framed",
+        "type": "boolean"
+      },
+      {
+          "name": "active",
+          "type": "boolean"
+      },
+      {
+          "name":"url",
+          "type":"string"
+      }
+    ],
+    "npm_dependencies": {
+      "react-spring": "9.1.2"
+    }
+  }
+

src/ideas/inputs/ProximityLink/index.tsx

@@ -0,0 +1,84 @@
+import { Image, useLimiter, Video } from "spacesvr";
+import * as THREE from "three";
+import { Group, Mesh, Vector3 } from "three";
+import { useMemo, useRef, useState } from "react";
+import { animated, useSpring } from "react-spring/three";
+import { GroupProps, useFrame } from "@react-three/fiber";
+
+export type ProximityLinkProps = {
+  url?: string;
+  framed?: boolean;
+  frameColor?: string;
+  radius?: number;
+  media?: string;
+  active?: boolean;
+} & GroupProps;
+
+export default function ProximityLink(props: ProximityLinkProps) {
+  const {
+    url = "https://muse.place",
+    framed = false,
+    frameColor = "#111111",
+    radius = 2,
+    active = false,
+    media = "https://d27rt3a60hh1lx.cloudfront.net/images/turtle.jpg",
+    ...rest
+  } = props;
+
+  const RADIUS = Math.max(radius, 0.5);
+
+  const ref = useRef<Group>(null);
+  const circleRef = useRef<Mesh>(null);
+  const dummy = useMemo(() => new Vector3(), []);
+  const [enterToggle, setEnterToggle] = useState(true);
+
+  const modUrl = media.toLowerCase();
+  const IS_IMAGE =
+    modUrl.endsWith(".jpg") ||
+    modUrl.endsWith(".jpeg") ||
+    modUrl.endsWith(".png");
+
+  const frameMat = new THREE.MeshBasicMaterial({ color: frameColor });
+
+  const limiter = useLimiter(20);
+  useFrame(({ camera, clock }) => {
+    if (!limiter.isReady(clock) || !ref.current) return;
+
+    if (circleRef.current) {
+      circleRef.current.scale.setScalar(1 / ref.current.scale.x);
+    }
+
+    ref.current.getWorldPosition(dummy);
+    const dist = Math.max(dummy.distanceTo(camera.position), 0.25);
+
+    if (dist <= RADIUS && active && enterToggle) {
+      console.log("______ NEW ENTRY ______");
+      console.log("Dist: " + dist + "  Radius: " + RADIUS);
+      console.log("Set toggle to false");
+      setEnterToggle(false);
+
+      window.alert("OPEN URL");
+      // window.open(url, "_self");
+    }
+    if (dist >= RADIUS) {
+      setEnterToggle(true);
+    }
+  });
+
+  if (!IS_IMAGE) {
+    console.error(
+      "Framed Media :: Invalid source url, must be .mp4, .jpg, .jpeg, or .png"
+    );
+    return null;
+  }
+
+  return (
+    <group name="proximity-media" ref={ref} {...rest}>
+      <animated.group>
+        {IS_IMAGE && (
+          <Image src={media} framed={framed} frameMaterial={frameMat} />
+        )}
+      </animated.group>
+    </group>
+  );
+}

src/pages/inputs/ProximityLink.tsx

@@ -0,0 +1,10 @@
+import dynamic from "next/dynamic";
+const DeveloperReality = dynamic(import("realities/DeveloperReality"), {
+  ssr: false,
+});
+const Idea = dynamic(import("ideas/inputs/ProximityLink"), { ssr: false });
+export default () => (
+  <DeveloperReality>
+    <Idea />
+  </DeveloperReality>
+);