Merge pull request #101 from musehq/dev

* Refactor Image component + add ktx support (#99)

* Refactor Image component + add ktx support

* Make Texture Component more general

* export index type & clean up syntax

Co-authored-by: Alex Shortt <alexander.shortt@gmail.com>
Co-authored-by: Muse <40903382+spacesvr@users.noreply.github.com>

* Collidable Modifier + Refactors (#100)

* add collidable modifier

* replace bvh logic with geo simplifier

* add optional raycaster prop to interactable modifier

* slight refactors to image idea

* fix up exports

* clean up keyboard layout code, don't run check if in iframe

* v2.1.0

Co-authored-by: stevenpaulhoward <40086690+stevenpaulhoward@users.noreply.github.com>
Co-authored-by: Muse <40903382+spacesvr@users.noreply.github.com>

Author: 3 people

README.md

@@ -233,6 +233,18 @@ An infinite floor styled to the Lost World.
 
 ### /modifiers/
 
+#### Collidable
+
+Enables colliders for its children either by a named collider mesh or using all meshes and capping collective triangle count to triLimit prop.
+
+```tsx
+<Collidable
+  triLimit={1000} // max number of triangles before it uses bvh
+  enabled={true}
+  hideCollisionMeshes={false} // set visible to false on meshes used for collision
+/>
+```
+
 #### FacePlayer
 
 Turns its children into a billboard, always facing the camera.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "spacesvr",
-  "version": "2.0.5",
+  "version": "2.1.0",
   "private": true,
   "description": "A standardized reality for future of the 3D Web",
   "keywords": [

src/ideas/index.ts

@@ -1,16 +1,17 @@
+export * from "./mediated/LostFloor";
+export * from "./modifiers/Collidable";
+export * from "./modifiers/Interactable";
 export * from "./modifiers/FacePlayer";
-export * from "./modifiers/LookAtPlayer";
 export * from "./modifiers/Floating";
-export * from "./modifiers/Interactable";
+export * from "./modifiers/LookAtPlayer";
 export * from "./modifiers/Spinning";
 export * from "./modifiers/Tool";
+export * from "./physical/Image";
 export * from "./physical/Arrow";
 export * from "./physical/Audio";
 export * from "./physical/Background";
 export * from "./physical/Fog";
 export * from "./physical/Frame";
 export * from "./physical/HDRI";
-export * from "./physical/Image";
 export * from "./physical/InfinitePlane";
 export * from "./physical/Video";
-export * from "./mediated/LostFloor";

src/ideas/modifiers/Collidable/components/TrimeshCollider.tsx

@@ -0,0 +1,46 @@
+import { BufferGeometry, Euler, Group, Quaternion, Vector3 } from "three";
+import { useMemo, useRef, useState } from "react";
+import { useLimiter } from "../../../../logic/limiter";
+import { useFrame } from "@react-three/fiber";
+import { useTrimeshCollision } from "../utils/trimesh";
+
+type TrimeshColliderProps = {
+  geo: BufferGeometry;
+};
+
+export default function TrimeshCollider(props: TrimeshColliderProps) {
+  const { geo } = props;
+
+  const group = useRef<Group>(null);
+
+  const dummyPos = useMemo(() => new Vector3(), []);
+  const dummyQuat = useMemo(() => new Quaternion(), []);
+  const dummyEuler = useMemo(() => new Euler(), []);
+  const dummyScale = useMemo(() => new Vector3(1, 1, 1), []);
+  const [scale, setScale] = useState(new Vector3(1, 1, 1));
+
+  const geometry = useMemo(() => {
+    const g = geo.clone().scale(scale.x, scale.y, scale.z);
+    g.computeVertexNormals();
+    return g;
+  }, [geo, scale]);
+
+  const [, api] = useTrimeshCollision(geometry);
+
+  const limiter = useLimiter(5);
+  useFrame(({ clock }) => {
+    if (!limiter.isReady(clock) || !group.current) return;
+
+    group.current.getWorldPosition(dummyPos);
+    group.current.getWorldQuaternion(dummyQuat);
+    group.current.getWorldScale(dummyScale);
+
+    api.position.copy(dummyPos);
+    api.rotation.copy(dummyEuler.setFromQuaternion(dummyQuat));
+    if (!dummyScale.equals(scale)) {
+      setScale(dummyScale.clone());
+    }
+  });
+
+  return <group ref={group} />;
+}

src/ideas/modifiers/Collidable/index.tsx

@@ -0,0 +1,103 @@
+import { ReactNode, useEffect, useRef, useState } from "react";
+import { BufferGeometry, Group, Mesh } from "three";
+import {
+  findColliderMeshes,
+  getGeometryTriCount,
+  getMeshes,
+  getMeshesUUID,
+  getTransformedMeshGeo,
+} from "./utils/mesh";
+import TrimeshCollider from "./components/TrimeshCollider";
+import { generateSimplifiedGeo } from "./utils/simplify";
+
+type CollidableProps = {
+  children: ReactNode | ReactNode[];
+  triLimit?: number;
+  enabled?: boolean;
+  hideCollisionMeshes?: boolean;
+};
+
+export default function Collidable(props: CollidableProps) {
+  const {
+    children,
+    triLimit = 1000,
+    enabled = true,
+    hideCollisionMeshes = false,
+  } = props;
+
+  const group = useRef<Group>(null);
+  const geoUUID = useRef<string>();
+  const [collisionMeshes, setCollisionMeshes] = useState<Mesh[]>();
+  const [collisionGeos, setCollisionGeos] = useState<BufferGeometry[]>();
+
+  // func to create uuid to know when to regenerate
+  const createUUID = (meshes: Mesh[]) => triLimit + "-" + getMeshesUUID(meshes);
+
+  // register collision meshes and collision geos
+  useEffect(() => {
+    if (!group.current || !enabled) {
+      setCollisionGeos(undefined);
+      setCollisionMeshes(undefined);
+      geoUUID.current = undefined;
+      return;
+    }
+
+    // if the user names the meshes themselves, give them full control
+    const colliderMeshes = findColliderMeshes(group.current);
+    if (colliderMeshes) {
+      if (createUUID(colliderMeshes) === geoUUID.current) return;
+      setCollisionMeshes(colliderMeshes);
+      const geos = colliderMeshes.map((m) =>
+        getTransformedMeshGeo(m, group.current as Group)
+      );
+      setCollisionGeos(geos);
+      geoUUID.current = createUUID(colliderMeshes);
+      return;
+    }
+
+    // otherwise, use all the meshes in the model
+    const meshes = getMeshes(group.current);
+    if (createUUID(meshes) === geoUUID.current) return;
+    setCollisionMeshes(meshes);
+    geoUUID.current = createUUID(meshes);
+
+    // aggregate geos in the model
+    const geos = meshes.map((m) =>
+      getTransformedMeshGeo(m, group.current as Group)
+    );
+
+    // either use geo directly or bvh version, depending on tri count
+    const triCount = geos.reduce((c, g) => c + getGeometryTriCount(g), 0);
+    if (triCount < triLimit) {
+      setCollisionGeos(geos);
+    } else {
+      const perc = triLimit / triCount;
+      const simpGeos = geos
+        .map((g) => generateSimplifiedGeo(g, getGeometryTriCount(g) * perc))
+        .filter((g) => g) as BufferGeometry[];
+      setCollisionGeos(simpGeos);
+    }
+  }, [children, triLimit, enabled]);
+
+  // hide or show collision meshes
+  useEffect(() => {
+    if (!collisionMeshes) return;
+    collisionMeshes.map(
+      (collider) => (collider.visible = !hideCollisionMeshes)
+    );
+    return () => {
+      collisionMeshes.map((collider) => (collider.visible = true));
+    };
+  }, [collisionMeshes, hideCollisionMeshes]);
+
+  return (
+    <group name="collidable" ref={group}>
+      {children}
+      {enabled &&
+        collisionGeos &&
+        collisionGeos.map((geo, i) => (
+          <TrimeshCollider key={geo.uuid} geo={geo} />
+        ))}
+    </group>
+  );
+}