Skip to content

Commit aa44da7

Browse files
alex-shorttalex-shortt
authored
Merge pull request #128 from musehq/dev
Upgrade Examples, Improve Site
2 parents 48b6d6e + ebce670 commit aa44da7

19 files changed

+180
-55
lines changed

‎examples/ideas/Analytics.tsx

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import posthog from "posthog-js";
2+
3+
const IS_PROD = process.env.NODE_ENV === "production";
4+
const IS_LOCAL = window.location.href.includes("localhost:");
5+
6+
if (IS_PROD && !IS_LOCAL) {
7+
posthog.init("PCoHEHV8I8etm7-gSY6RT8tcev9M3VWoejzJKjv2Ifw", {
8+
api_host: "https://app.posthog.com",
9+
});
10+
}
11+
12+
export default function Analytics() {
13+
return null;
14+
}

‎examples/ideas/Link.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export default function Link(props: LinkProps) {
1313
<group name={`link-${href}`} {...rest}>
1414
<FacePlayer>
1515
<Anchor href={href}>
16-
<Button>{children}</Button>
16+
<Button maxWidth={0.4}>{children}</Button>
1717
</Anchor>
1818
</FacePlayer>
1919
</group>

‎examples/ideas/Title.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,23 @@
1-
import { FacePlayer } from "spacesvr";
1+
import { FacePlayer, Image } from "spacesvr";
22
import { GroupProps } from "@react-three/fiber";
33
import { Text } from "@react-three/drei";
44

55
type LinkProps = {
66
children: string;
7+
image?: string;
78
} & GroupProps;
89

910
const FONT = "https://d27rt3a60hh1lx.cloudfront.net/fonts/Quicksand_Bold.otf";
1011

1112
export default function Title(props: LinkProps) {
12-
const { children, ...rest } = props;
13+
const { children, image, ...rest } = props;
1314

1415
return (
1516
<group name="title" {...rest}>
1617
<FacePlayer>
18+
{image && (
19+
<Image src={image} position-z={-0.01} scale={3} position-y={0.25} />
20+
)}
1721
<Text color="black" font={FONT} fontSize={0.2}>
1822
{children}
1923
</Text>

‎examples/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
"dependencies": {
1313
"@types/three": "0.139.0",
1414
"next": "12.1.6",
15+
"posthog-js": "^1.33.0",
1516
"react": "18.1.0",
1617
"react-dom": "18.1.0",
1718
"three": "^0.139.2"

‎examples/pages/_app.tsx

Lines changed: 55 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,61 @@
11
import type { AppProps } from "next/app";
2+
import Head from "next/head";
23

34
function MyApp({ Component, pageProps }: AppProps) {
4-
return <Component {...pageProps} />;
5+
return (
6+
<>
7+
<Head>
8+
{/* Basic Info*/}
9+
<meta charSet="utf-8" />
10+
<meta name="language" content="english" />
11+
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
12+
<meta httpEquiv="content-type" content="text/html" />
13+
<title>spacesvr</title>
14+
{/* SEO tags */}
15+
<meta name="author" content="www.muse.place" />
16+
<meta
17+
name="description"
18+
content="An npm library that provides a standardized reality for the future of the 3D Web."
19+
/>
20+
<meta
21+
name="keywords"
22+
content="muse, spacesvr, 3d, webxr, 3d website, framework, npm"
23+
/>
24+
<meta name="distribution" content="web" />
25+
{/* open graph */}
26+
<meta property="og:url" content="https://www.spacesvr.io" />
27+
<meta property="og:type" content="website" />
28+
<meta property="og:title" content="spacesvr" />
29+
<meta
30+
property="og:description"
31+
content="An npm library that provides a standardized reality for the future of the 3D Web."
32+
/>
33+
<meta property="og:image" content="/android-chrome-512x512.png" />
34+
{/* icons */}
35+
<link
36+
rel="apple-touch-icon"
37+
sizes="180x180"
38+
href="/apple-touch-icon.png"
39+
/>
40+
<link
41+
rel="icon"
42+
type="image/png"
43+
sizes="32x32"
44+
href="/favicon-32x32.png"
45+
/>
46+
<link
47+
rel="icon"
48+
type="image/png"
49+
sizes="16x16"
50+
href="/favicon-16x16.png"
51+
/>
52+
<link rel="manifest" href="/site.webmanifest" />
53+
<meta name="msapplication-TileColor" content="#da532c" />
54+
<meta name="theme-color" content="#ffffff" />
55+
</Head>
56+
<Component {...pageProps} />
57+
</>
58+
);
559
}
660

761
export default MyApp;

‎examples/public/android-chrome-192x192.png

23.4 KB
Loading

‎examples/public/android-chrome-512x512.png

92.4 KB
Loading

‎examples/public/apple-touch-icon.png

13.7 KB
Loading

‎examples/public/browserconfig.xml

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<browserconfig>
3+
<msapplication>
4+
<tile>
5+
<square150x150logo src="/mstile-150x150.png"/>
6+
<TileColor>#da532c</TileColor>
7+
</tile>
8+
</msapplication>
9+
</browserconfig>

‎examples/public/favicon-16x16.png

1.45 KB
Loading

‎examples/public/favicon-32x32.png

2.5 KB
Loading

‎examples/public/favicon.ico

14.7 KB
Binary file not shown.

‎examples/public/mstile-150x150.png

13 KB
Loading

‎examples/public/site.webmanifest

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "",
3+
"short_name": "",
4+
"icons": [
5+
{
6+
"src": "/android-chrome-192x192.png",
7+
"sizes": "192x192",
8+
"type": "image/png"
9+
},
10+
{
11+
"src": "/android-chrome-512x512.png",
12+
"sizes": "512x512",
13+
"type": "image/png"
14+
}
15+
],
16+
"theme_color": "#ffffff",
17+
"background_color": "#ffffff",
18+
"display": "standalone"
19+
}

‎examples/worlds/Hub.tsx

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,36 @@
11
import { LostWorld, StandardReality, Image } from "spacesvr";
22
import Link from "../ideas/Link";
33
import Title from "../ideas/Title";
4+
import Analytics from "../ideas/Analytics";
45

56
export default function Hub() {
67
return (
78
<StandardReality
89
environmentProps={{ dev: process.env.NODE_ENV === "development" }}
910
>
11+
<Analytics />
1012
<LostWorld />
1113
<group position-z={-1.5}>
12-
<Title position-y={1.2}>welcome to spacesvr</Title>
14+
<Title
15+
position-y={1.2}
16+
image="https://d27rt3a60hh1lx.cloudfront.net/spacesvr/spacesvr.png"
17+
>
18+
welcome to spacesvr
19+
</Title>
1320
<group position-y={0.8}>
14-
<Link href="/multiplayer" position-x={-1}>
15-
test out multiplayer
21+
<Link href="/multiplayer" position-x={-2}>
22+
visit multiplayer page
23+
</Link>
24+
<Link href="/media" position-x={-1}>
25+
visit media page
1626
</Link>
17-
<Link href="/media">test out media</Link>
1827
<Link href="/workshop" position-x={1}>
19-
visit the workshop
28+
visit workshop page
29+
</Link>
30+
<Link href="https://github.com/musehq/spacesvr" position-x={2}>
31+
visit github
2032
</Link>
2133
</group>
22-
<Image
23-
scale={18}
24-
position-y={0.025}
25-
rotation-x={-Math.PI / 2}
26-
src="https://d27rt3a60hh1lx.cloudfront.net/spacesvr/spacesvr.png"
27-
/>
2834
</group>
2935
</StandardReality>
3036
);

‎examples/worlds/Media.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import Link from "../ideas/Link";
33
import Title from "../ideas/Title";
44
import Test from "../ideas/Text";
55
import { useState } from "react";
6+
import Analytics from "../ideas/Analytics";
67

78
export default function Media() {
89
const MODELS = [
@@ -21,6 +22,7 @@ export default function Media() {
2122

2223
return (
2324
<StandardReality>
25+
<Analytics />
2426
<LostWorld />
2527
<Title position-z={-1.5} position-y={1.2}>
2628
welcome to the media world

‎examples/worlds/Multiplayer/index.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,15 @@ import LightSwitch from "./ideas/LightSwitch";
33
import PingPongMulti from "./ideas/PingPongMulti";
44
import Title from "../../ideas/Title";
55
import Link from "../../ideas/Link";
6+
import Analytics from "../../ideas/Analytics";
67

78
export default function Multiplayer() {
89
return (
910
<StandardReality
1011
playerProps={{ pos: [5, 1, 0], rot: Math.PI }}
1112
networkProps={{ autoconnect: true, voice: true }}
1213
>
14+
<Analytics />
1315
<Title position-z={-1.5} position-y={1.2}>
1416
welcome to the multiplayer world
1517
</Title>

‎examples/worlds/Workshop.tsx

Lines changed: 30 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,15 @@ import { useEffect, useState } from "react";
22
import {
33
StandardReality,
44
Interactable,
5-
Audio,
65
Image,
76
Video,
87
TextInput,
98
Switch,
10-
HDRI,
11-
LostFloor,
9+
LostWorld,
1210
} from "spacesvr";
1311
import Title from "../ideas/Title";
1412
import Link from "../ideas/Link";
13+
import Analytics from "../ideas/Analytics";
1514

1615
export default function Workshop() {
1716
const [value, setValue] = useState("hello world");
@@ -25,18 +24,9 @@ export default function Workshop() {
2524
const [url, setUrl] = useState(
2625
"https://dwvo2npct47gg.cloudfront.net/gallery/bladi/IMG_8334.jpg"
2726
);
28-
const [audio, setAudio] = useState(
29-
"https://d27rt3a60hh1lx.cloudfront.net/audio/LucidMondayMix.mp3"
30-
);
3127

3228
const [size, setSize] = useState(1);
3329

34-
setTimeout(() => {
35-
setAudio(
36-
"https://d27rt3a60hh1lx.cloudfront.net/content/muse.place/whoisabnel/dark.mp3"
37-
);
38-
}, 10000);
39-
4030
useEffect(() => {
4131
setTimeout(
4232
() =>
@@ -51,20 +41,30 @@ export default function Workshop() {
5141

5242
return (
5343
<StandardReality>
54-
<Title position-z={-1.5} position-y={1.2}>
55-
welcome to the workshop
56-
</Title>
57-
<Link href="/" position-z={-1.5} position-y={0.8}>
58-
back to the hub
59-
</Link>
60-
<ambientLight />
61-
<LostFloor />
62-
<mesh position-y={0.5} position-x={-5}>
63-
<boxBufferGeometry args={[1, 1, 1]} />
64-
<meshNormalMaterial />
65-
</mesh>
66-
<Audio url={audio} />
67-
<HDRI src="https://dwvo2npct47gg.cloudfront.net/hdr/SkyMural2.hdr" />
44+
<Analytics />
45+
<LostWorld />
46+
<group position-z={-2} position-x={-1}>
47+
<Title position-y={1.2}>welcome to the workshop</Title>
48+
<Link href="/" position-y={0.8}>
49+
back to the hub
50+
</Link>
51+
</group>
52+
<group position-x={-6} position-z={-3}>
53+
<mesh position-y={0.5}>
54+
<boxBufferGeometry args={[1, 1, 1]} />
55+
<meshNormalMaterial />
56+
</mesh>
57+
<Interactable
58+
onHover={() => setHovering(true)}
59+
onUnHover={() => setHovering(false)}
60+
onClick={() => setSize(Math.random() + 1)}
61+
>
62+
<mesh position={[2, 0.5, 0]}>
63+
<boxBufferGeometry args={[size, size * 0.25, size * 0.1]} />
64+
<meshStandardMaterial color={hovering ? "red" : "blue"} />
65+
</mesh>
66+
</Interactable>
67+
</group>
6868
<Image
6969
src={url}
7070
size={3}
@@ -100,17 +100,7 @@ export default function Workshop() {
100100
rotation={[0, Math.PI, 0]}
101101
framed
102102
/>
103-
<Interactable
104-
onHover={() => setHovering(true)}
105-
onUnHover={() => setHovering(false)}
106-
onClick={() => setSize(Math.random() + 1)}
107-
>
108-
<mesh position={[-3, 0.5, 0]}>
109-
<boxBufferGeometry args={[size, size * 0.25, size * 0.1]} />
110-
<meshStandardMaterial color={hovering ? "red" : "blue"} />
111-
</mesh>
112-
</Interactable>
113-
<group position={[1, 0.9, -0.5]} rotation-y={-Math.PI / 2}>
103+
<group position={[1, 0.9, -5.5]}>
114104
<TextInput
115105
placeholder="First Name"
116106
font="https://d27rt3a60hh1lx.cloudfront.net/fonts/custom-branding/FridgeChisel-Regular_lowerUppercase.otf"
@@ -122,20 +112,20 @@ export default function Workshop() {
122112
onFocus={() => console.log("focus!")}
123113
/>
124114
<TextInput
125-
position-x={1}
115+
position-x={1.1}
126116
type="password"
127117
placeholder="password"
128118
fontSize={0.1}
129119
width={1}
130120
/>
131121
<TextInput
132-
position-x={2}
122+
position-x={2.2}
133123
placeholder="email"
134124
fontSize={0.1}
135125
width={1}
136126
/>
137127
<TextInput
138-
position-x={3}
128+
position-x={3.3}
139129
type="number"
140130
placeholder="number"
141131
fontSize={0.175}

0 commit comments

Comments
 (0)