Merge pull request #127 from musehq/dev

v2.5.0

Author: alex-shortt

README.md

@@ -339,12 +339,13 @@ Quickly add an image to your scene
 
 #### Model
 
-Quickly add a GLTF/GLB model to your scene. Will handle Suspense, KTX2, Draco, Meshopt.
+Quickly add a GLTF/GLB model to your scene. Will handle Suspense, KTX2, Draco, Meshopt. Clones the gltf scene so the same file can be re-used.
 
 ```tsx
 <Model
   src="https://link-to-your-model.glb"
-  center={false} // whether to center the model so its bounds are centered on its origin
+  center // whether to center the model so its bounds are centered on its origin, default false
+  normalize // whether to normalize the model to a height/width/depth of 1, default false
 />
 ```
 
@@ -410,6 +411,33 @@ Enables colliders for its children either by a named collider mesh or using all
 />
 ```
 
+#### Interactable
+
+Makes its children react to onclick and on hover methods
+
+```tsx
+<Interactable
+  onClick={() => console.log("Ive been clicked!")}
+  onHovered={() => console.log("Ive been hovered!")}
+  onUnHovered={() => console.log("Ive been unhovered?")}
+>
+  <Stuff />
+</Interactable>
+```
+
+#### Anchor
+
+Makes its children link out to when clicked. handles leaving vr session.
+
+```tsx
+<Anchor
+  href="https://link-to-your-website.com"
+  target="_blank" // optional, default is _self
+>
+  <Stuff />
+</Anchor>
+```
+
 #### FacePlayer
 
 Turns its children into a billboard, always facing the camera.
@@ -426,20 +454,6 @@ Lazily floats its children.
 <Floating height={0.2} speed={1} />
 ```
 
-#### Interactable
-
-Makes its children react to onclick and on hover methods
-
-```tsx
-<Interactable
-  onClick={() => console.log("Ive been clicked!")}
-  onHovered={() => console.log("Ive been hovered!")}
-  onUnHovered={() => console.log("Ive been unhovered?")}
->
-  <Stuff />
-</Interactable>
-```
-
 #### LookAtPlayer
 
 Makes its children face the player, but with easing.
@@ -502,6 +516,25 @@ An arrow icon
 <Arrow dark={false} />
 ```
 
+#### Button
+
+A simple button
+
+```tsx
+<Button
+  onClick={() => console.log("Ive been clicked!")}
+  font="https://link-to-your-font.ttf" // optional font, default is Quicksand
+  fontSize={0.1} // font size, default 0.05
+  maxWidth={1} // max width, default no max width
+  textColor="red" // text color, default black
+  color="green" // button color, default white
+  outline={false} // whether to show an outline, default true
+  outlineColor="#9f9f9f" // outline color, default white
+>
+  Click me!
+</Button>
+```
+
 #### Switch
 
 A boolean switch
@@ -510,7 +543,7 @@ A boolean switch
 const [value, setValue] = useState(false);
 
 <Switch
-  value={value} // value and setValue are optional but obviously recommended
-  setValue={setValue}
+  value={value} // control the switch value
+  onChange={setValue} // optional onChange function
 />;
 ```

examples/ideas/Link.tsx

@@ -0,0 +1,21 @@
+import { FacePlayer, Anchor, Button } from "spacesvr";
+import { GroupProps } from "@react-three/fiber";
+
+type LinkProps = {
+  href: string;
+  children: string;
+} & GroupProps;
+
+export default function Link(props: LinkProps) {
+  const { href, children, ...rest } = props;
+
+  return (
+    <group name={`link-${href}`} {...rest}>
+      <FacePlayer>
+        <Anchor href={href}>
+          <Button>{children}</Button>
+        </Anchor>
+      </FacePlayer>
+    </group>
+  );
+}

examples/ideas/Text.tsx

@@ -0,0 +1,53 @@
+import { ReactNode } from "react";
+import { GroupProps } from "@react-three/fiber";
+import { Text } from "@react-three/drei";
+import { DoubleSide } from "three";
+
+type TestProps = {
+  children: ReactNode | ReactNode[];
+  name: string;
+  sideLength?: number;
+} & GroupProps;
+
+const FONT = "https://d27rt3a60hh1lx.cloudfront.net/fonts/Quicksand_Bold.otf";
+
+export default function Test(props: TestProps) {
+  const { children, name, sideLength = 1.1, ...rest } = props;
+
+  const FONT_SIZE = 0.075;
+
+  return (
+    <group name="test" {...rest}>
+      <group
+        name="content"
+        position={[0, sideLength / 2 + 0.001, -sideLength / 2]}
+      >
+        {children}
+        <mesh>
+          <boxBufferGeometry args={[sideLength, sideLength, sideLength]} />
+          <meshBasicMaterial color="black" wireframe />
+        </mesh>
+      </group>
+      <group
+        name="nameplate"
+        position-y={(FONT_SIZE + 0.1 + 0.1) / 2}
+        position-z={FONT_SIZE / 2}
+        rotation-x={-0.8}
+      >
+        <mesh>
+          <planeBufferGeometry args={[sideLength, FONT_SIZE + 0.1]} />
+          <meshBasicMaterial color="black" side={DoubleSide} />
+        </mesh>
+        <Text
+          color="white"
+          font={FONT}
+          maxWidth={sideLength}
+          fontSize={FONT_SIZE}
+          position-z={0.001}
+        >
+          {name}
+        </Text>
+      </group>
+    </group>
+  );
+}

examples/ideas/Title.tsx

@@ -0,0 +1,23 @@
+import { FacePlayer } from "spacesvr";
+import { GroupProps } from "@react-three/fiber";
+import { Text } from "@react-three/drei";
+
+type LinkProps = {
+  children: string;
+} & GroupProps;
+
+const FONT = "https://d27rt3a60hh1lx.cloudfront.net/fonts/Quicksand_Bold.otf";
+
+export default function Title(props: LinkProps) {
+  const { children, ...rest } = props;
+
+  return (
+    <group name="title" {...rest}>
+      <FacePlayer>
+        <Text color="black" font={FONT} fontSize={0.2}>
+          {children}
+        </Text>
+      </FacePlayer>
+    </group>
+  );
+}

examples/pages/index.tsx

@@ -1,7 +1,7 @@
 import dynamic from "next/dynamic";
 
-const Lost = dynamic(import("../worlds/Lost"), { ssr: false });
+const Hub = dynamic(import("../worlds/Hub"), { ssr: false });
 
 export default function Index() {
-  return <Lost />;
+  return <Hub />;
 }

examples/pages/media.tsx

@@ -0,0 +1,7 @@
+import dynamic from "next/dynamic";
+
+const Media = dynamic(import("../worlds/Media"), { ssr: false });
+
+export default function Index() {
+  return <Media />;
+}

examples/pages/starter.tsx

@@ -0,0 +1,7 @@
+import dynamic from "next/dynamic";
+
+const Workshop = dynamic(import("../worlds/Workshop"), { ssr: false });
+
+export default function Index() {
+  return <Workshop />;
+}

examples/pages/styled.tsx

@@ -0,0 +1,31 @@
+import { LostWorld, StandardReality, Image } from "spacesvr";
+import Link from "../ideas/Link";
+import Title from "../ideas/Title";
+
+export default function Hub() {
+  return (
+    <StandardReality
+      environmentProps={{ dev: process.env.NODE_ENV === "development" }}
+    >
+      <LostWorld />
+      <group position-z={-1.5}>
+        <Title position-y={1.2}>welcome to spacesvr</Title>
+        <group position-y={0.8}>
+          <Link href="/multiplayer" position-x={-1}>
+            test out multiplayer
+          </Link>
+          <Link href="/media">test out media</Link>
+          <Link href="/workshop" position-x={1}>
+            visit the workshop
+          </Link>
+        </group>
+        <Image
+          scale={18}
+          position-y={0.025}
+          rotation-x={-Math.PI / 2}
+          src="https://d27rt3a60hh1lx.cloudfront.net/spacesvr/spacesvr.png"
+        />
+      </group>
+    </StandardReality>
+  );
+}