Added click detection

.env

@@ -7,9 +7,15 @@ REACT_APP_INWORLD_SCENE_ID=workspaces/innequin_dev/scenes/innequin
 REACT_APP_INWORLD_GENERATE_TOKEN_URI=http://localhost:4000/
 # Innequin Base Asset File Location. It can be a local or external path.
 # Used as the prefix uri for the animation, texture and model file paths et in config.json.
-# Download asset files at=https://storage.googleapis.com/innequin-assets/v3/assets.zip
-REACT_APP_INNEQUIN_BASE_URI=/assets
-# The path to the configuration
-REACT_APP_INNEQUIN_CONFIG_URI=/assets/config.json
+# Download asset files at=https://storage.googleapis.com/innequin-assets/v5/assets.zip
+REACT_APP_INNEQUIN_BASE_URI=/assets/innequin
+# The path to the Innequin configuration
+REACT_APP_INNEQUIN_CONFIG_URI=/assets/innequin/config.json
+# Ready Player Me Base Asset File Location. It can be a local or external path.
+# Used as the prefix uri for the animation, texture and model file paths et in config.json.
+# Download asset files at=https://storage.googleapis.com/innequin-assets/v5/assets.zip
+REACT_APP_RPM_BASE_URI=/assets/rpm
+# The path to the Ready Player Me configuration
+REACT_APP_RPM_CONFIG_URI=/assets/rpm/config.json
 # Draco Compression Library URI
 REACT_APP_DRACO_COMPRESSION_URI=/draco-gltf/

package.json

@@ -6,7 +6,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@inworld/web-sdk": "1.9.1",
+    "@inworld/web-core": "2.0.1",
     "@mui/icons-material": "^5.14.11",
     "@mui/material": "^5.14.11",
     "@react-three/drei": "^9.88.0",

src/app/App.tsx

@@ -1,18 +1,34 @@
 import "./App.css";
-import Container from "@mui/material/Container";
 
-import { SystemProvider } from "./../utils/system";
+import Container from "@mui/material/Container";
 
-import Scene from "./../scene/Scene";
+import { InworldProvider } from "../contexts/InworldProvider";
 import MainMenu from "../menus/MainMenu";
+import Scene from "../scene/Scene";
+import ChatScreen from "../ui/ChatScreen";
+import MainHud from "../ui/MainHud";
+import { ClickableProvider } from "../utils/clickable";
+import { RaysProvider } from "../utils/rays";
+import { RoomsProvider } from "../utils/rooms";
+import { SystemProvider } from "../utils/system";
 
 function App() {
   return (
     <SystemProvider>
-      <Container className="containerMain">
-        <Scene />
-        <MainMenu />
-      </Container>
+      <ClickableProvider>
+        <RaysProvider>
+          <RoomsProvider>
+            <InworldProvider>
+              <Container className="containerMain">
+                <Scene />
+                <ChatScreen />
+                <MainHud />
+                <MainMenu />
+              </Container>
+            </InworldProvider>
+          </RoomsProvider>
+        </RaysProvider>
+      </ClickableProvider>
     </SystemProvider>
   );
 }

src/clickables/ClickableCube.tsx

@@ -0,0 +1,54 @@
+import { useCallback, useEffect, useRef } from "react";
+import { BufferGeometry, Mesh, Vector3 } from "three";
+
+import { useClickable } from "../utils/clickable";
+import { Clickable } from "../utils/types";
+
+interface ClickableCubeProps {
+  length: number;
+  width: number;
+  height: number;
+  position: Vector3;
+  onClick?: Function | undefined;
+}
+
+function ClickableCube(props: ClickableCubeProps) {
+  const refCube = useRef<Mesh>();
+
+  const { addClickable } = useClickable();
+
+  useEffect(() => {
+    if (refCube.current) {
+      if (addClickable) addClickable(refCube.current.uuid, onClick);
+    }
+  }, [refCube, addClickable]);
+
+  const onClick = useCallback(() => {
+    console.log("ClickableCube: onClick");
+    if (props.onClick) {
+      props.onClick();
+    }
+  }, [props.onClick]);
+
+  return (
+    <mesh
+      name={Clickable.Cube}
+      position={props.position}
+      ref={refCube as React.RefObject<Mesh<BufferGeometry>>}
+      onClick={() => onClick()}
+    >
+      <boxGeometry
+        args={[props.length, props.width, props.height]}
+        attach="geometry"
+      />
+      <meshPhongMaterial
+        color={"#ffffff"}
+        opacity={0.1}
+        transparent
+        attach="material"
+      />
+    </mesh>
+  );
+}
+
+export default ClickableCube;