add some ui

sniok · Mar 13, 2021 · 68950d9 · 68950d9 · vercel · Mar 13, 2021
1 parent 3110dae
commit 68950d9
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 35 deletions.
diff --git a/public/index.html b/public/index.html
@@ -1,17 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
-	<meta charset="utf-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-	<meta name="theme-color" content="#000000">
-	<!--
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <meta name="theme-color" content="#000000" />
+    <!--
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
     -->
-	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-	<!--
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -20,15 +19,15 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-	<title>React App</title>
-</head>
+    <title>WebXR Particles</title>
+  </head>
 
-<body>
-	<noscript>
-		You need to enable JavaScript to run this app.
-	</noscript>
-	<div id="root"></div>
-	<!--
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+    <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -38,6 +37,5 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-</body>
-
-</html>
+  </body>
+</html>
diff --git a/src/App.tsx b/src/App.tsx
@@ -5,7 +5,7 @@ import React, { useMemo, useRef } from 'react'
 import { useFrame } from 'react-three-fiber'
 import { BufferGeometry, InterleavedBuffer, InterleavedBufferAttribute, Vector3 } from 'three'
 
-const count = 50_000
+const count = 40_000
 const stride = 10
 const total = count * stride
 const dots = new Float32Array(total)
@@ -141,17 +141,23 @@ function Dots() {
 
 export function App() {
   return (
-    <VRCanvas>
-      <DefaultXRControllers />
-      <Plane args={[55, 55, 25, 25]} rotation={[-Math.PI / 2, 0, 0]}>
-        <meshPhongMaterial color="#222" attach="material" wireframe />
-      </Plane>
-      <OrbitControls />
-      <Dots />
-      <ambientLight />
-      <DotsRender />
-      <pointLight position={[10, 10, 10]} />
-      <color args={[0x000000] as any} attach="background" />
-    </VRCanvas>
+    <>
+      <div id="intro">
+        <h1>WebXR Particles</h1>
+        <p>Hold trigger to pull particles</p>
+      </div>
+      <VRCanvas>
+        <DefaultXRControllers />
+        <Plane args={[55, 55, 25, 25]} rotation={[-Math.PI / 2, 0, 0]}>
+          <meshPhongMaterial color="#222" attach="material" wireframe />
+        </Plane>
+        <OrbitControls />
+        <Dots />
+        <ambientLight />
+        <DotsRender />
+        <pointLight position={[10, 10, 10]} />
+        <color args={[0x000000] as any} attach="background" />
+      </VRCanvas>
+    </>
   )
 }
diff --git a/src/styles.css b/src/styles.css
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@900&display=swap');
+
 * {
   box-sizing: border-box;
 }
@@ -9,8 +11,19 @@ body,
   height: 100%;
   margin: 0;
   padding: 0;
+  font-family: 'Inter', sans-serif;
+  font-weight: 900;
+}
+
+#intro {
+  position: fixed;
+  bottom: 130px;
+  width: 100%;
+  z-index: 1;
+  color: #fff;
+  text-align: center;
 }
 
-body {
-  /* background: aquamarine; */
+h1 {
+  font-size: 48px;
 }