Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/liaoyio/suburbia-landing-page
使用 Next.js 15、GSAP、Prismic、Three.js、Tailwind 和 TypeScript 构建 3D 滑板官网！
https://github.com/liaoyio/suburbia-landing-page
gsap nextjs threejs
Last synced: 8 days ago
JSON representation
使用 Next.js 15、GSAP、Prismic、Three.js、Tailwind 和 TypeScript 构建 3D 滑板官网！
- Host: GitHub
- URL: https://github.com/liaoyio/suburbia-landing-page
- Owner: liaoyio
- Created: 2025-01-27T16:13:31.000Z (9 days ago)
- Default Branch: main
- Last Pushed: 2025-01-27T17:00:50.000Z (9 days ago)
- Last Synced: 2025-01-27T17:32:15.437Z (9 days ago)
- Topics: gsap, nextjs, threejs
- Language: TypeScript
- Homepage: https://suburbia-skateboards-webpage.netlify.app/
- Size: 50.3 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🛹 Suburbia Skateboards
**使用 Next.js 15、GSAP、Prismic、Three.js、Tailwind 和 TypeScript 构建 3D 滑板官网！**
## 特性
本项目将为虚构滑板品牌 Suburbia Skateboards 搭建精美交互官网。
- [x] 🔌 [Next.js 15 (App Router)](https://nextjs.org)
- [x] 🎰 [React 19](https://react.dev)
- [x] 💡 [TypeScript](https://typescriptlang.org)
- [x] 🎨 [Tailwind CSS](https://tailwindcss.com)
- [x] 🧩 [Prismic (CMS)](https://prismic.io/)
- [x] ✨ [GSAP (animation)](https://gsap.com/docs/)
- [x] 🪅 [matter-js (2D)](http://brm.io/matter-js/)
- [x] 📸 [Three.js (React))](https://github.com/pmndrs/react-three-fiber)
- [x] 📦 [Netlify (deploy)](https://www.netlify.com/)
使用 Next.js 15、Tailwind CSS 和 Prismic，将Three.js集成到React中实现3D交互效果，最终托管在 Netlify 上。
## Notes
> Youtube 视频教程 🔗： https://www.youtube.com/watch?v=LBOhVng5rk8
### 使用 Prismic
### 创建 Hero
#### 1. 切片新增字段：
#### 2. 在页面使用：
🟩 编辑 `src/slices/Hero/index.tsx` 文件：
```tsx
import type { Content } from '@prismicio/client'
import type { JSX } from 'react'
import { PrismicNextLink } from '@prismicio/next'
import { PrismicRichText, type SliceComponentProps } from '@prismicio/react'
/**
* Props for `Hero`.
*/
export type HeroProps = SliceComponentProps
/**
* Component for "Hero" Slices.
*/
export default function Hero({ slice }: HeroProps): JSX.Element {
return (
Click
)
}
```
#### 3. 快速预览 （模拟）
点击右上角 Simulate 按钮，可以快速预览样式
🟩 此时我们将页面 heading 设置为了红色，如果你发现样式并没有被添加，需要在 `tailwind.config.ts` 文件设置 `content` 包含 `./src/slices` 文件
```ts
import type { Config } from 'tailwindcss'
export default {
content: [
'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
'./src/app/**/*.{js,ts,jsx,tsx,mdx}',
'./src/slices/**/*.{js,ts,jsx,tsx,mdx}',
],
// ...
} satisfies Config
```
回到项目，刷新两次或三次页面，数据就能同步到本地项目了。
### 滑板定制页面
#### 部署
