feat: add 3d render Canvas

SSOCK · Sep 17, 2024 · 6c54a01 · 6c54a01
1 parent 760a079
commit 6c54a01
Show file tree

Hide file tree

Showing 9 changed files with 115 additions and 68 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,12 +1,20 @@
 module.exports = {
-  extends: ['next', 'next/core-web-vitals', 'eslint:recommended', 'plugin:react/recommended', 'plugin:@typescript-eslint/recommended', 'prettier', 'plugin:storybook/recommended'],
+  extends: [
+    'next',
+    'next/core-web-vitals',
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:@typescript-eslint/recommended',
+    'prettier',
+    'plugin:storybook/recommended',
+  ],
   plugins: ['react', '@typescript-eslint'],
   parserOptions: {
     ecmaVersion: 2021,
     sourceType: 'module',
   },
   rules: {
-    "react/react-in-jsx-scope": "off",
+    'react/react-in-jsx-scope': 'off',
+    'react/no-unknown-property': 'off',
   },
 };
-
diff --git a/app/(landing)/page.tsx b/app/(landing)/page.tsx
@@ -1,5 +1,11 @@
+import SnowGlobeCanvas from '@/shared/components/canvas/SnowGlobeCanvas';
+
 const Home = () => {
-  return <>SBIM START</>;
+  return (
+    <>
+      <SnowGlobeCanvas />
+    </>
+  );
 };
 
 export default Home;
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,12 +1,14 @@
-import type { Metadata } from "next";
-import { Inter } from "next/font/google";
-import "./globals.css";
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+import './globals.css';
 
-const inter = Inter({ subsets: ["latin"] });
+import { cn } from '@/lib/utils';
+
+const inter = Inter({ subsets: ['latin'] });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: 'Create Next App',
+  description: 'Generated by create next app',
 };
 
 export default function RootLayout({
@@ -16,7 +18,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={cn(inter.className, 'bg-primary')}>{children}</body>
     </html>
   );
 }
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
diff --git a/shared/components/3dModels/Bottom.tsx b/shared/components/3dModels/Bottom.tsx
@@ -0,0 +1,8 @@
+import { useGLTF } from '@react-three/drei';
+
+const Bottom = () => {
+  const bottom = useGLTF('/assets/bottoms/bottom.glb').scene.clone();
+  return <primitive object={(object = { bottom })} />;
+};
+
+export default Bottom;
diff --git a/shared/components/canvas/SnowGlobeCanvas.tsx b/shared/components/canvas/SnowGlobeCanvas.tsx
@@ -0,0 +1,23 @@
+'use client';
+
+import { Canvas } from '@react-three/fiber';
+import Bottom from '../3dModels/Bottom';
+import { OrbitControls } from '@react-three/drei';
+
+const SnowGlobeCanvas = () => {
+  return (
+    <Canvas camera={{ position: [15, 2, 0], fov: 100 }} shadows={true}>
+      <OrbitControls target={[0, 0, 2]} enablePan={false} />
+      <ambientLight intensity={1} color={'#ffffff'} />
+      <directionalLight
+        position={[5, 7, 3]}
+        intensity={2}
+        color={'#ffffff'}
+        castShadow
+      />
+      <Bottom />
+    </Canvas>
+  );
+};
+
+export default SnowGlobeCanvas;
diff --git a/components/providers/ThemeProvider.tsx → ...ed/components/providers/ThemeProvider.tsx b/components/providers/ThemeProvider.tsx → ...ed/components/providers/ThemeProvider.tsx
diff --git a/shared/components/ui/button.tsx b/shared/components/ui/button.tsx
@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/lib/utils';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };
diff --git a/stories/Buttons/Button.stories.tsx b/stories/Buttons/Button.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { fn } from '@storybook/test';
-import { Button } from '@/components/ui/button';
+import { Button } from '@/shared/components/ui/button';
 
 const meta = {
   title: 'Button',