Blog on 54 CHEN
·
如何使用Azure、.NET、TypeScript和TailwindCSS构建3D网页游戏
内容提要
我为儿子Max开发了一个数学游戏，使用C#、.NET Core、React-Three-Fiber和TypeScript等技术。项目包含Azure App Service和SQL数据库，前端采用Vite和TailwindCSS，支持3D世界和路由功能，结构清晰，易于扩展。
关键要点
-
为儿子Max开发数学游戏，使用C#、.NET Core、React-Three-Fiber和TypeScript等技术。
-
项目架构包括Azure App Service和SQL数据库，使用Github Actions进行CI/CD。
-
后端项目使用.NET 8.0 SDK，采用DDD和CQRS架构，集成MediatR、AutoMapper和FluentValidation。
-
使用Docker运行SQL Server，并创建名为MaxMath的数据库。
-
前端项目使用Vite、TailwindCSS、React-Three-Fiber和状态管理库Zustand/Redux。
-
实现3D世界的基本功能，支持鼠标交互和物体点击放大。
-
添加路由功能，支持多页面游戏，用户可以登录并访问不同关卡。
-
项目结构清晰，易于扩展，支持添加更多3D模型和功能。
-
GLB格式用于传输3D模型，提供多种资源网站供下载。
-
计划将项目部署到Azure App Service，但因资源限制决定使用Vercel等静态项目托管。
延伸问答
如何使用Azure CLI初始化项目？
可以通过在终端运行 'brew install azure-cli' 安装Azure CLI，然后使用 'az login' 登录Azure。
这个数学游戏使用了哪些技术栈？
该数学游戏使用了C#、.NET Core、React-Three-Fiber、TypeScript和TailwindCSS等技术。
如何在项目中实现3D世界的基本功能？
可以通过使用React-Three-Fiber库来实现3D世界的基本功能，包括鼠标交互和物体点击放大。
项目的后端架构是怎样的？
后端项目使用.NET 8.0 SDK，采用DDD和CQRS架构，集成了MediatR、AutoMapper和FluentValidation。
如何在项目中添加路由功能？
可以通过安装 'react-router-dom' 并在App.tsx中配置路由来添加多页面游戏的路由功能。
GLB格式在项目中有什么用途？
GLB格式用于传输3D模型，可以在3D网页应用中创建3D模型和动画。
