# threejs-demo

**Repository Path**: calmound/threejs-demo

## Basic Information

- **Project Name**: threejs-demo
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 4
- **Created**: 2024-12-15
- **Last Updated**: 2025-04-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# threejs-demo

## 简介

`threejs-demo` 是一个展示 Three.js 各种案例的集合，旨在通过实际效果图和代码示例，帮助开发者快速理解和掌握 Three.js 的多种功能。

每一个目录都是一个独立的案例，包含了案例的效果图、代码示例和说明文档。开发者可以根据自己的需求，选择对应的案例进行学习和参考。

## 项目启动

### 存在 package.json 文件

1. 安装依赖

```bash
npm install
```

2. 启动项目

```bash
npm run dev
```

3. 打开浏览器访问

```
http://localhost:5173
```

### 不存在 package.json 文件

通过 vscode 安装插件`Live Server`，然后在案例目录下右键选择`Open with Live Server`即可。

## 案例列表

#### 360° 看房

文档：https://www.threejs3d.com/examples/360

![360° 看房](https://www.threejs3d.com/_next/static/media/Dec-15-2024%2014-13-31.a6950329.gif)

#### 烟花

文档：https://threejs3d.com/examples/yanhua

![烟花](https://threejs3d.com/_next/static/media/Dec-26-2024%2022-23-17.6d9349f4.gif)

#### 圣诞树

文档：https://threejs3d.com/examples/shengdanshu

![圣诞树](https://threejs3d.com/_next/static/media/Dec-27-2024%2023-26-34.ed38a098.gif)

#### 卡片翻转动画

文档：https://threejs3d.com/examples/card

![卡片翻转动画](https://threejs3d.com/_next/static/media/Dec-28-2024%2014-30-11.dbb070d5.gif)

#### 太阳系网站介绍

文档：https://threejs3d.com/examples/star

![太阳系网站介绍](https://threejs3d.com/_next/static/media/Oct-17-2024%2021-04-31.2b315fb5.gif)

#### 下雨效果

文档：https://threejs3d.com/examples/rain

![下雨效果](https://threejs3d.com/_next/static/media/rain.0b13fa3b.gif)

#### 鼠标联动效果

文档：https://threejs3d.com/examples/connect

![鼠标联动效果](https://threejs3d.com/_next/static/media/Dec-23-2024%2022-46-31.a3fca76a.gif)

## 联系

欢迎关注公众号：三木前端笔记，获取更多前端技术干货。

也欢迎加我微信：sanmu1598，一起交流学习。

![三木前端笔记](https://gitee.com/calmound/threejs-demo/raw/main/vx.jpg)