wip: tweak skyline parameters for proper scaling

packages/app/src/components/three/contribution_tower.tsx

@@ -11,21 +11,18 @@ interface ContributionTowerProps extends MeshProps {
   x: number;
   y: number;
   height: number;
+  size: number;
   day: NonNullable<
     ResultOf<typeof ContributionQuery>["user"]
   >["contributionsCollection"]["contributionCalendar"]["weeks"][number]["contributionDays"][number];
 }
 
 export function ContributionTower(props: ContributionTowerProps) {
-  const { x, y, height, day, ...rest } = props;
-  // This reference will give us direct access to the THREE.Mesh object
-  const ref = useRef<THREE.Mesh>(null!);
-  // Hold state for hovered and clicked events
+  const { x, y, height, day, size, ...rest } = props;
   const [hovered, hover] = useState(false);
   const [clicked, click] = useState(false);
 
   const [position, setPosition] = useState({ x: 0, y: 0 });
-  // Rotate mesh every frame, this is outside of React without overhead
   // useFrame((state, delta) => (ref.current.rotation.x += 0.01))
 
   const color = new THREE.Color(day.color);
@@ -35,7 +32,6 @@ export function ContributionTower(props: ContributionTowerProps) {
     <>
       <mesh
         {...rest}
-        // ref={ref}
         position={[x, height / 2, y]}
         onClick={(event) => {
           event.stopPropagation();
@@ -59,8 +55,7 @@ export function ContributionTower(props: ContributionTowerProps) {
           hover(false);
         }}
       >
-        <boxGeometry args={[0.5, height, 0.5]} />
-        {/* <meshStandardMaterial color={hovered ? '#2e6c80' : '#4287f5'} /> */}
+        <boxGeometry args={[size, height, size]} />
         <meshStandardMaterial color={towerColor} roughness={0.4} />
       </mesh>
       <t.In>

packages/app/src/components/three/skyline.tsx

@@ -1,5 +1,5 @@
 import { useMantineTheme } from "@mantine/core";
-import { OrbitControls, Stage } from "@react-three/drei";
+import { Bounds, OrbitControls, Stage } from "@react-three/drei";
 import { Canvas } from "@react-three/fiber";
 import { ResultOf } from "gql.tada";
 import { ContributionQuery } from "../../api/query";
@@ -16,12 +16,16 @@ export function Skyline(props: SkylineProps) {
   const theme = useMantineTheme();
 
   return (
-    <Canvas style={{ backgroundColor: theme.colors.dark[8] }}>
+    <Canvas
+      style={{ backgroundColor: theme.colors.dark[8] }}
+      shadows
+      camera={{ position: [0, 0, 10], zoom: 2 }}
+    >
       <Stage>
-        {/* <Bounds fit clip observe margin={1.2}> */}
-        <SkylineModel user={user} year={year} weeks={weeks} />
+        <Bounds fit clip observe>
+          <SkylineModel user={user} year={year} weeks={weeks} />
+        </Bounds>
         <directionalLight color="#fff" position={[13, 100, 100]} />
-        {/* </Bounds> */}
       </Stage>
       <OrbitControls makeDefault minPolarAngle={0} maxPolarAngle={Math.PI / 2.5} />
     </Canvas>

packages/app/src/components/three/skyline_model.tsx

@@ -1,11 +1,12 @@
-import { Text3D } from "@react-three/drei";
+import { Center, Stars, Text3D } from "@react-three/drei";
 import { ContributionTower } from "./contribution_tower";
 import { ContributionQuery } from "../../api/query";
 import { ResultOf } from "gql.tada";
-import { useThree } from "@react-three/fiber";
+import { Canvas, useFrame, useThree } from "@react-three/fiber";
 import { STLExporter } from "three/examples/jsm/Addons.js";
 import { useSceneStore } from "../../scene";
-import { useEffect } from "react";
+import { useEffect, useRef, useState } from "react";
+import { Group, Mesh } from "three";
 
 interface SkylineModelProps {
     user: string;
@@ -15,14 +16,24 @@ interface SkylineModelProps {
 
 export function SkylineModel(props: SkylineModelProps) {
     const { user, weeks, year } = props;
-    const length = weeks.length / 2;
-    const width = 7 / 2;
+    const size = 0.5;
+    const length = weeks.length * size;
+    const width = 7 * size;
     const padding = 0.5;
-    const platform_height = 2;
-    const text_depth = 0.25;
+    const font = "/Inter_Bold.json";
+    const platform_height = size * 3;
+    const text_size = platform_height / 2;
+    const text_depth = 0.35;
+    const tower_height = (count: number) => count * size / 10 + size / 10;
+    const color = "#575757";
     const scene = useThree((state) => state.scene);
     const sceneStore = useSceneStore();
 
+    console.log(length, width)
+
+    const [usingControls, setUsingControls] = useState(false);
+    const group = useRef<Group>(null!);
+    useFrame((state, delta) => (group.current.rotation.y += 0.001))
 
     // useEffect(() => {
     //     setInterval(() => {
@@ -38,36 +49,47 @@ export function SkylineModel(props: SkylineModelProps) {
     //         clone.updateMatrixWorld();
     //     }, 1000 * 5);
     // }, [])
-    
+
     return (
-        <>
+        <group ref={group}>
             {weeks.map((week, i) =>
                 week.contributionDays.map((day, j) => (
-                    <ContributionTower key={day.date.toString()} day={day} x={i / 2} y={j / 2} height={day.contributionCount * 0.1 + 0.1} />
-                )),
+                    <ContributionTower
+                        key={day.date.toString()}
+                        size={size}
+                        day={day}
+                        x={i * size - length / 2 + size / 2}
+                        y={j * size - width / 2 + size / 2}
+                        height={day.contributionCount * size / 10 + size / 10}
+                    />
+                ))
             )}
-            <mesh position={[13, 0 - platform_height / 2, 1.5]}>
+            <mesh position={[0, 0 - platform_height / 2, 0]}>
                 <boxGeometry args={[length + padding * 2, platform_height, width + padding * 2]} />
-                <meshStandardMaterial color={"#575757"} />
+                <meshStandardMaterial color={color} />
             </mesh>
             <Text3D
-                font={"/Inter_Bold.json"}
-                position={[0, 0 - platform_height / 2 - 0.5, 3.25 + padding]}
+                font={font}
+                position={[0 - length / 2 + 1, -platform_height + text_size / 2, (width / 2) + padding]}
                 letterSpacing={-0.1}
                 height={text_depth}
+                size={text_size}
             >
                 {user}
-                <meshStandardMaterial color={"#575757"} />
-            </Text3D>
-            <Text3D
-                font={"/Inter_Bold.json"}
-                position={[22, 0 - platform_height / 2 - 0.55, 3.25 + padding]}
-                letterSpacing={-0.1}
-                height={text_depth}
-            >
-                {year}
-                <meshStandardMaterial color={"#575757"} />
+                <meshStandardMaterial color={color} />
             </Text3D>
-        </>
+            <Center disableZ disableY>
+                <Text3D
+                    font={font}
+                    position={[length / 2 - 4, -platform_height + text_size / 2, (width / 2) + padding]}
+                    letterSpacing={-0.1}
+                    height={text_depth}
+                    size={text_size}
+                >
+                    {year}
+                    <meshStandardMaterial color={color} />
+                </Text3D>
+            </Center>
+        </group>
     )
 }