# modal-show-platform
**Repository Path**: malguy/modal-show-platform
## Basic Information
- **Project Name**: modal-show-platform
- **Description**: nextjs项目 类似模之屋的3d模型展示平台
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-01-12
- **Last Updated**: 2025-01-12
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 创建项目
```shell
pnpm dlx create-next-app@14 modal-show-platform
```
添加R3f和threejs依赖
```json5
{
"dependencies": {
"react": "^18",
"react-dom": "^18",
"next": "14.2.23",
"three": "^0.146.0",
"r3f-perf": "6.6",
"leva": "0.9.34",
"maath": "^0.10.8"
},
"devDependencies": {
"typescript": "^5",
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"postcss": "^8",
"tailwindcss": "^3.4.1",
"@types/three": "^0.167.1",
"@react-spring/three": "~9.7.4",
"@react-three/drei": "9.79",
"@react-three/fiber": "8.8"
}
}
```
由于shadcn-ui被ban了, 容易安装失败, 所以改成mantine
```shell
pnpm install @mantine/core @mantine/hooks @mantine/notifications
pnpm install --save-dev postcss postcss-preset-mantine postcss-simple-vars
```
postcss.config.mjs
```javascript
/** @type {import('postcss-load-config').Config} */
const config = {
plugins: {
tailwindcss: {},
'postcss-preset-mantine': {},
'postcss-simple-vars': {
variables: {
'mantine-breakpoint-xs': '36em',
'mantine-breakpoint-sm': '48em',
'mantine-breakpoint-md': '62em',
'mantine-breakpoint-lg': '75em',
'mantine-breakpoint-xl': '88em',
},
},
},
};
export default config;
```
提供mantine-provider
```typescript jsx
import type {Metadata} from "next";
import localFont from "next/font/local";
import "./globals.css";
// Import styles of packages that you've installed.
// All packages except `@mantine/hooks` require styles imports
import '@mantine/core/styles.css';
import {ColorSchemeScript, MantineProvider} from "@mantine/core";
import Head from "next/head";
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
{children}
);
}
```
测试
```typescript jsx
'use client';
import {AppShell, Burger} from '@mantine/core';
import {useDisclosure} from '@mantine/hooks';
// test
function Page() {
const [opened, {toggle}] = useDisclosure();
return (
Logo
Navbar
Main
);
}
export default Page
```