musehq · alex-shortt · Oct 19, 2022 · Oct 19, 2022 · Oct 19, 2022 · Oct 19, 2022
diff --git a/examples/ideas/Analytics.tsx b/examples/ideas/Analytics.tsx
@@ -0,0 +1,14 @@
+import posthog from "posthog-js";
+
+const IS_PROD = process.env.NODE_ENV === "production";
+const IS_LOCAL = window.location.href.includes("localhost:");
+
+if (IS_PROD && !IS_LOCAL) {
+  posthog.init("PCoHEHV8I8etm7-gSY6RT8tcev9M3VWoejzJKjv2Ifw", {
+    api_host: "https://app.posthog.com",
+  });
+}
+
+export default function Analytics() {
+  return null;
+}
diff --git a/examples/ideas/Link.tsx b/examples/ideas/Link.tsx
@@ -13,7 +13,7 @@ export default function Link(props: LinkProps) {
     <group name={`link-${href}`} {...rest}>
       <FacePlayer>
         <Anchor href={href}>
-          <Button>{children}</Button>
+          <Button maxWidth={0.4}>{children}</Button>
         </Anchor>
       </FacePlayer>
     </group>

diff --git a/examples/ideas/Title.tsx b/examples/ideas/Title.tsx
@@ -1,19 +1,23 @@
-import { FacePlayer } from "spacesvr";
+import { FacePlayer, Image } from "spacesvr";
 import { GroupProps } from "@react-three/fiber";
 import { Text } from "@react-three/drei";
 
 type LinkProps = {
   children: string;
+  image?: string;
 } & GroupProps;
 
 const FONT = "https://d27rt3a60hh1lx.cloudfront.net/fonts/Quicksand_Bold.otf";
 
 export default function Title(props: LinkProps) {
-  const { children, ...rest } = props;
+  const { children, image, ...rest } = props;
 
   return (
     <group name="title" {...rest}>
       <FacePlayer>
+        {image && (
+          <Image src={image} position-z={-0.01} scale={3} position-y={0.25} />
+        )}
         <Text color="black" font={FONT} fontSize={0.2}>
           {children}
         </Text>

diff --git a/examples/package.json b/examples/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "@types/three": "0.139.0",
     "next": "12.1.6",
+    "posthog-js": "^1.33.0",
     "react": "18.1.0",
     "react-dom": "18.1.0",
     "three": "^0.139.2"

diff --git a/examples/pages/_app.tsx b/examples/pages/_app.tsx
@@ -1,7 +1,61 @@
 import type { AppProps } from "next/app";
+import Head from "next/head";
 
 function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />;
+  return (
+    <>
+      <Head>
+        {/* Basic Info*/}
+        <meta charSet="utf-8" />
+        <meta name="language" content="english" />
+        <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
+        <meta httpEquiv="content-type" content="text/html" />
+        <title>spacesvr</title>
+        {/* SEO tags */}
+        <meta name="author" content="www.muse.place" />
+        <meta
+          name="description"
+          content="An npm library that provides a standardized reality for the future of the 3D Web."
+        />
+        <meta
+          name="keywords"
+          content="muse, spacesvr, 3d, webxr, 3d website, framework, npm"
+        />
+        <meta name="distribution" content="web" />
+        {/* open graph */}
+        <meta property="og:url" content="https://www.spacesvr.io" />
+        <meta property="og:type" content="website" />
+        <meta property="og:title" content="spacesvr" />
+        <meta
+          property="og:description"
+          content="An npm library that provides a standardized reality for the future of the 3D Web."
+        />
+        <meta property="og:image" content="/android-chrome-512x512.png" />
+        {/* icons */}
+        <link
+          rel="apple-touch-icon"
+          sizes="180x180"
+          href="/apple-touch-icon.png"
+        />
+        <link
+          rel="icon"
+          type="image/png"
+          sizes="32x32"
+          href="/favicon-32x32.png"
+        />
+        <link
+          rel="icon"
+          type="image/png"
+          sizes="16x16"
+          href="/favicon-16x16.png"
+        />
+        <link rel="manifest" href="/site.webmanifest" />
+        <meta name="msapplication-TileColor" content="#da532c" />
+        <meta name="theme-color" content="#ffffff" />
+      </Head>
+      <Component {...pageProps} />
+    </>
+  );
 }
 
 export default MyApp;
diff --git a/examples/public/android-chrome-192x192.png b/examples/public/android-chrome-192x192.png
diff --git a/examples/public/android-chrome-512x512.png b/examples/public/android-chrome-512x512.png
diff --git a/examples/public/apple-touch-icon.png b/examples/public/apple-touch-icon.png
diff --git a/examples/public/browserconfig.xml b/examples/public/browserconfig.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
diff --git a/examples/public/favicon-16x16.png b/examples/public/favicon-16x16.png
diff --git a/examples/public/favicon-32x32.png b/examples/public/favicon-32x32.png
diff --git a/examples/public/favicon.ico b/examples/public/favicon.ico
diff --git a/examples/public/mstile-150x150.png b/examples/public/mstile-150x150.png
diff --git a/examples/public/site.webmanifest b/examples/public/site.webmanifest
@@ -0,0 +1,19 @@
+{
+  "name": "",
+  "short_name": "",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}
diff --git a/examples/worlds/Hub.tsx b/examples/worlds/Hub.tsx
@@ -1,30 +1,36 @@
 import { LostWorld, StandardReality, Image } from "spacesvr";
 import Link from "../ideas/Link";
 import Title from "../ideas/Title";
+import Analytics from "../ideas/Analytics";
 
 export default function Hub() {
   return (
     <StandardReality
       environmentProps={{ dev: process.env.NODE_ENV === "development" }}
     >
+      <Analytics />
       <LostWorld />
       <group position-z={-1.5}>
-        <Title position-y={1.2}>welcome to spacesvr</Title>
+        <Title
+          position-y={1.2}
+          image="https://d27rt3a60hh1lx.cloudfront.net/spacesvr/spacesvr.png"
+        >
+          welcome to spacesvr
+        </Title>
         <group position-y={0.8}>
-          <Link href="/multiplayer" position-x={-1}>
-            test out multiplayer
+          <Link href="/multiplayer" position-x={-2}>
+            visit multiplayer page
+          </Link>
+          <Link href="/media" position-x={-1}>
+            visit media page
           </Link>
-          <Link href="/media">test out media</Link>
           <Link href="/workshop" position-x={1}>
-            visit the workshop
+            visit workshop page
+          </Link>
+          <Link href="https://github.com/musehq/spacesvr" position-x={2}>
+            visit github
           </Link>
         </group>
-        <Image
-          scale={18}
-          position-y={0.025}
-          rotation-x={-Math.PI / 2}
-          src="https://d27rt3a60hh1lx.cloudfront.net/spacesvr/spacesvr.png"
-        />
       </group>
     </StandardReality>
   );

diff --git a/examples/worlds/Media.tsx b/examples/worlds/Media.tsx
@@ -3,6 +3,7 @@ import Link from "../ideas/Link";
 import Title from "../ideas/Title";
 import Test from "../ideas/Text";
 import { useState } from "react";
+import Analytics from "../ideas/Analytics";
 
 export default function Media() {
   const MODELS = [
@@ -21,6 +22,7 @@ export default function Media() {
 
   return (
     <StandardReality>
+      <Analytics />
       <LostWorld />
       <Title position-z={-1.5} position-y={1.2}>
         welcome to the media world

diff --git a/examples/worlds/Multiplayer/index.tsx b/examples/worlds/Multiplayer/index.tsx
@@ -3,13 +3,15 @@ import LightSwitch from "./ideas/LightSwitch";
 import PingPongMulti from "./ideas/PingPongMulti";
 import Title from "../../ideas/Title";
 import Link from "../../ideas/Link";
+import Analytics from "../../ideas/Analytics";
 
 export default function Multiplayer() {
   return (
     <StandardReality
       playerProps={{ pos: [5, 1, 0], rot: Math.PI }}
       networkProps={{ autoconnect: true, voice: true }}
     >
+      <Analytics />
       <Title position-z={-1.5} position-y={1.2}>
         welcome to the multiplayer world
       </Title>

diff --git a/examples/worlds/Workshop.tsx b/examples/worlds/Workshop.tsx
@@ -2,16 +2,15 @@ import { useEffect, useState } from "react";
 import {
   StandardReality,
   Interactable,
-  Audio,
   Image,
   Video,
   TextInput,
   Switch,
-  HDRI,
-  LostFloor,
+  LostWorld,
 } from "spacesvr";
 import Title from "../ideas/Title";
 import Link from "../ideas/Link";
+import Analytics from "../ideas/Analytics";
 
 export default function Workshop() {
   const [value, setValue] = useState("hello world");
@@ -25,18 +24,9 @@ export default function Workshop() {
   const [url, setUrl] = useState(
     "https://dwvo2npct47gg.cloudfront.net/gallery/bladi/IMG_8334.jpg"
   );
-  const [audio, setAudio] = useState(
-    "https://d27rt3a60hh1lx.cloudfront.net/audio/LucidMondayMix.mp3"
-  );
 
   const [size, setSize] = useState(1);
 
-  setTimeout(() => {
-    setAudio(
-      "https://d27rt3a60hh1lx.cloudfront.net/content/muse.place/whoisabnel/dark.mp3"
-    );
-  }, 10000);
-
   useEffect(() => {
     setTimeout(
       () =>
@@ -51,20 +41,30 @@ export default function Workshop() {
 
   return (
     <StandardReality>
-      <Title position-z={-1.5} position-y={1.2}>
-        welcome to the workshop
-      </Title>
-      <Link href="/" position-z={-1.5} position-y={0.8}>
-        back to the hub
-      </Link>
-      <ambientLight />
-      <LostFloor />
-      <mesh position-y={0.5} position-x={-5}>
-        <boxBufferGeometry args={[1, 1, 1]} />
-        <meshNormalMaterial />
-      </mesh>
-      <Audio url={audio} />
-      <HDRI src="https://dwvo2npct47gg.cloudfront.net/hdr/SkyMural2.hdr" />
+      <Analytics />
+      <LostWorld />
+      <group position-z={-2} position-x={-1}>
+        <Title position-y={1.2}>welcome to the workshop</Title>
+        <Link href="/" position-y={0.8}>
+          back to the hub
+        </Link>
+      </group>
+      <group position-x={-6} position-z={-3}>
+        <mesh position-y={0.5}>
+          <boxBufferGeometry args={[1, 1, 1]} />
+          <meshNormalMaterial />
+        </mesh>
+        <Interactable
+          onHover={() => setHovering(true)}
+          onUnHover={() => setHovering(false)}
+          onClick={() => setSize(Math.random() + 1)}
+        >
+          <mesh position={[2, 0.5, 0]}>
+            <boxBufferGeometry args={[size, size * 0.25, size * 0.1]} />
+            <meshStandardMaterial color={hovering ? "red" : "blue"} />
+          </mesh>
+        </Interactable>
+      </group>
       <Image
         src={url}
         size={3}
@@ -100,17 +100,7 @@ export default function Workshop() {
         rotation={[0, Math.PI, 0]}
         framed
       />
-      <Interactable
-        onHover={() => setHovering(true)}
-        onUnHover={() => setHovering(false)}
-        onClick={() => setSize(Math.random() + 1)}
-      >
-        <mesh position={[-3, 0.5, 0]}>
-          <boxBufferGeometry args={[size, size * 0.25, size * 0.1]} />
-          <meshStandardMaterial color={hovering ? "red" : "blue"} />
-        </mesh>
-      </Interactable>
-      <group position={[1, 0.9, -0.5]} rotation-y={-Math.PI / 2}>
+      <group position={[1, 0.9, -5.5]}>
         <TextInput
           placeholder="First Name"
           font="https://d27rt3a60hh1lx.cloudfront.net/fonts/custom-branding/FridgeChisel-Regular_lowerUppercase.otf"
@@ -122,20 +112,20 @@ export default function Workshop() {
           onFocus={() => console.log("focus!")}
         />
         <TextInput
-          position-x={1}
+          position-x={1.1}
           type="password"
           placeholder="password"
           fontSize={0.1}
           width={1}
         />
         <TextInput
-          position-x={2}
+          position-x={2.2}
           placeholder="email"
           fontSize={0.1}
           width={1}
         />
         <TextInput
-          position-x={3}
+          position-x={3.3}
           type="number"
           placeholder="number"
           fontSize={0.175}