clean up sketch

setsun · Jun 29, 2023 · 486bb7f · 486bb7f · vercel · Jun 29, 2023
1 parent 4315212
commit 486bb7f
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 22 deletions.
diff --git a/components/Layout.tsx b/components/Layout.tsx
@@ -14,13 +14,15 @@ const Layout: React.FC<Props> = (props) => (
       <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🌅</text></svg>" />
     </Head>
 
-    <div className="flex">
-      <Navigation className="h-screen" />
+    <div className="flex h-screen overflow-hidden">
+      <Navigation />
 
-      <div className="w-full">
-        {props.children}
+      <div className="w-full overflow-scroll">
+        <div>
+          {props.children}
 
-        <Footer />
+          <Footer />
+        </div>
       </div>
     </div>
   </>

diff --git a/components/Navigation.tsx b/components/Navigation.tsx
@@ -7,7 +7,7 @@ interface Props {
 }
 
 const SideNavigation: React.FC<Props> = ({ className }) => (
-  <nav className={classNames('p-4 border-r-2 border-r-zinc-200 min-w-max', className)}>
+  <nav className={classNames('p-6 border-r-2 border-r-zinc-200 min-w-max', className)}>
     {/* <HamburgerMenuIcon className='h-8 w-8' /> */}
 
     {/* <Cross1Icon className='h-8 w-8' /> */}

diff --git a/components/hero-scenes/WireframePlanet.tsx b/components/hero-scenes/WireframePlanet.tsx
@@ -1,33 +1,43 @@
-import { PerspectiveCamera } from '@react-three/drei';
 import { DoubleSide } from 'three';
 import { useTurntable } from '../../hooks/useTurntable';
 
 const WireframePlanet = () => {
-  const ringOneTurntable = useTurntable({ speed: 0.0001 });
-  const ringTwoTurntable = useTurntable({ speed: 0.0001 });
-  const planetTurntable = useTurntable({ speed: 0.0001, reverse: true });
+  const ringOneTurntable = useTurntable({ speed: 0.001, axis: 'x' });
+  const ringTwoTurntable = useTurntable({ speed: 0.001, axis: 'x', reverse: true });
+  const ringThreeTurntable = useTurntable({ speed: 0.001, axis: 'y' });
+  const ringFourTurntable = useTurntable({ speed: 0.001, axis: 'y', reverse: true });
+  const planetTurntable = useTurntable({ speed: 0.0025, axis: 'x', reverse: true });
 
   return (
     <>
-      {/* <PerspectiveCamera
-        makeDefault
-        args={[75, window.innerWidth / window.innerHeight, 0.01, 5000]}
-        position={[550, 325, -500]}
-      /> */}
-
-      <mesh rotation={[0, Math.PI / 2, 0]} ref={ringOneTurntable}>
-        <ringGeometry args={[15.5, 16, 100, 100]} />
+      <mesh rotation={[Math.PI / 2, 0, 0]} ref={ringOneTurntable}>
+        <ringGeometry args={[15.95, 16, 100, 100]} />
         <meshBasicMaterial attach="material" color="white" side={DoubleSide} />
       </mesh>
 
-      <mesh ref={ringTwoTurntable}>
-        <ringGeometry args={[15.5, 16, 100, 100]} />
+      <mesh rotation={[-Math.PI / 2, 0, 0]} ref={ringTwoTurntable}>
+        <ringGeometry args={[15.95, 16, 100, 100]} />
+        <meshBasicMaterial attach="material" color="white" side={DoubleSide} />
+      </mesh>
+
+      <mesh rotation={[0, -Math.PI / 2, 0]} ref={ringThreeTurntable}>
+        <ringGeometry args={[15.95, 16, 100, 100]} />
+        <meshBasicMaterial attach="material" color="white" side={DoubleSide} />
+      </mesh>
+
+      <mesh rotation={[0, Math.PI / 2, 0]} ref={ringFourTurntable}>
+        <ringGeometry args={[15.95, 16, 100, 100]} />
+        <meshBasicMaterial attach="material" color="white" side={DoubleSide} />
+      </mesh>
+
+      <mesh rotation={[0, 0, Math.PI / 2]}>
+        <ringGeometry args={[15.95, 16, 100, 100]} />
         <meshBasicMaterial attach="material" color="white" side={DoubleSide} />
       </mesh>
 
       <mesh ref={planetTurntable}>
         <dodecahedronGeometry args={[10, 10]} />
-        <meshBasicMaterial attach="material" color="#fff" wireframe />
+        <meshNormalMaterial attach="material" wireframe />
       </mesh>
     </>
   )

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -31,7 +31,12 @@ const Blog: React.FC<Props> = (props) => {
   return (
     <Layout>
       <main>
-        <Canvas className="w-full aspect-video">
+        <Canvas
+          className="w-full aspect-video"
+          camera={{
+            position: [0, 0, -30]
+          }}
+        >
           <WireframePlanet />
         </Canvas>