# 项目简介
## 它是什么
游戏讲述的是一个小女生被恶魔诅咒找不到家了,她听说收集七龙珠可以召唤神龙,神龙可是帮她实现回家的愿望,于是她开启了她的冒险故事
所以此项目是基于这个故事做成的 3D 冒险游戏,可以通过控制人物来寻找龙珠,召唤神龙
## 在线预览
- [地址1](https://jcodelife.gitee.io/online/)
- [地址2](https://jcodelife.github.io/beauty-and-dragonball-js/)
## 技术栈
这个游戏使用了以下技术
1. `vite` + `React`+ `jsx`
2. 基于 `Three.js` 的 `lingo3d`
以及使用了以下工具:
1. `sketchfab`: 3D模型下载
2. `mixamo`:3D人物动作绑定及动画
3. `readyplayer`:3D角色生产工具
4. `gltf.report`:模型压缩
5. `polyhaven`:hdr素材库(环境贴图)
6. `textures`:材质贴图素材
# 快速体验
1. 下载项目:git clone https://github.com/xitu/game-garden.git
2. 安装依赖:在项目的根目录下,运行命令`yarn`
3. 启动项目:运行`yarn dev`
即可进入:http://localhost:3000/
在游戏中可以通过w、s键以及鼠标灵活控制人物的移动来寻找龙珠,当找到一颗龙珠后,可以单击鼠标点亮龙珠,当所有龙珠被找到,神龙就就会出现,点击神龙即可带你回家。详细过程如下:
# 游戏过程
## 1. 通过按键和鼠标控制角色移动
### w键:向前跑
![20.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f52e114a2c934f49b708d172e9b6e156~tplv-k3u1fbpfcp-watermark.image?)
### s键:向后走
![21.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1468bfc5b3aa4eb5a22ae9f88ad011bd~tplv-k3u1fbpfcp-watermark.image?)
### 鼠标:移动鼠标可控制方向
![23.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/794b6080a95b415cb4dc51d2d55911e4~tplv-k3u1fbpfcp-watermark.image?)
### 空格:跳跃
![22.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/64e1858e4c1d4889a10351726c37d7e8~tplv-k3u1fbpfcp-watermark.image?)
## 2. 寻找七龙珠
当看到龙珠时,对准并按下鼠标即可标记此龙珠已经找到,然后继续找下一颗
![24.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fe371e8781914d8ab1e52a4a38224387~tplv-k3u1fbpfcp-watermark.image?)
当所有龙珠被找到时,会提示地图某处会出现龙
![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/987d4504cb0e435a83ec3ef9a6744c67~tplv-k3u1fbpfcp-watermark.image?)
## 3. 寻找龙
当提示地图某处出现龙时,就去寻找龙
此龙如图所示
![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/86f00ce14e75479f80dc40acbdad4894~tplv-k3u1fbpfcp-watermark.image?)
但是到这没有结束,此龙非真的神龙
## 4. 真神龙出现
点击小龙,小龙会消失,真的神龙出现
![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/234c02c1c383489ea8a8ada53b260178~tplv-k3u1fbpfcp-watermark.image?)
![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c51e329da28844089541a25531c28929~tplv-k3u1fbpfcp-watermark.image?)
点击神龙,一会就会实现回家的愿望
## 5. 回到家
到这就会回到家了,如下
![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f1e1718f41ee44e09544bb00d2bcaa0a~tplv-k3u1fbpfcp-watermark.image?)
而且家附近会出现我们找到的龙珠
![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/80cfa538eed343f5b5e5dcd0f6c6bfda~tplv-k3u1fbpfcp-watermark.image?)
## 最后
最后能回到家,肯定开心啦
所以按住d键,开始跳舞吧
# 项目实践细节
具体实践细节见下文:
[别卷了,快来玩 | React+Three.js 实现一个超好玩的3D游戏:美女与龙珠](https://juejin.cn/post/7087730315531141128)
没有合适的资源?快使用搜索试试~ 我知道了~
毕业设计&课设-美女与龙珠,获掘金游戏创意大赛最佳游戏作品奖第一名.zip
共103个文件
fbx:34个
js:22个
png:8个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 181 浏览量
2024-06-22
21:23:12
上传
评论
收藏 205.59MB ZIP 举报
温馨提示
该资源内项目源码是个人的课程设计、毕业设计,代码都测试ok,都是运行成功后才上传资源,答辩评审平均分达到96分,放心下载使用! ## 项目备注 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.md文件(如有),仅供学习参考, 切勿用于商业用途。 该资源内项目源码是个人的课程设计,代码都测试ok,都是运行成功后才上传资源,答辩评审平均分达到96分,放心下载使用! ## 项目备注 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.md文件(如有),仅供学习参考, 切勿用于商业用途。
资源推荐
资源详情
资源评论
收起资源包目录
毕业设计&课设-美女与龙珠,获掘金游戏创意大赛最佳游戏作品奖第一名.zip (103个子文件)
scene.bin 2.46MB
scene.bin 2.46MB
scene.bin 267KB
scene.bin 267KB
App.css 609B
index.css 366B
index.458f9883.css 293B
style.module.4ae71475.css 117B
myhome.fbx 40.38MB
myhome.fbx 40.38MB
sl0.fbx 10.03MB
sl0.fbx 10.03MB
sl.fbx 9.96MB
sl.fbx 9.96MB
girl.fbx 8.56MB
girl.fbx 8.56MB
sl2.fbx 6.42MB
sl2.fbx 6.42MB
scene.fbx 1.29MB
scene.fbx 1.29MB
idle.fbx 711KB
idle.fbx 711KB
Punch To Elbow Combo.fbx 700KB
Punch To Elbow Combo.fbx 700KB
Fist Fight A.fbx 670KB
Fist Fight A.fbx 670KB
dancing.fbx 539KB
dancing.fbx 539KB
jumping.fbx 446KB
Jumping.fbx 446KB
left-turn.fbx 396KB
left-turn.fbx 396KB
right-turn.fbx 392KB
right-turn.fbx 392KB
walking.fbx 374KB
walking.fbx 374KB
walking-backwards.fbx 343KB
walking-backwards.fbx 343KB
running.fbx 332KB
running.fbx 332KB
dragon_ball.fbx 74KB
dragon_ball.fbx 74KB
.gitignore 253B
home.glb 36.7MB
home.glb 36.7MB
untitled.glb 2.31MB
scene.glb 2.31MB
untitled.glb 2.31MB
scene.glb 2.31MB
scene.gltf 42KB
scene.gltf 42KB
scene.gltf 5KB
scene.gltf 5KB
index.html 467B
index.html 364B
skybox.jpeg 86KB
skybox.jpeg 86KB
skybox.jpg 194KB
skybox.jpg 194KB
index.255e6eef.js 1.1MB
RectAreaLightUniformsLib.6b2ed05d.js 241KB
cannon-es.af838222.js 122KB
enableBVHMap.ceae2822.js 35KB
loadSVG.b22d2d72.js 21KB
TransformControls.115c0b60.js 20KB
ReflectorForSSRPass.c007e072.js 6KB
Reticle5.108aaba5.js 3KB
Reticle4.a8847cd8.js 3KB
Reticle0.a407c57d.js 2KB
Reticle6.bb8fedbf.js 2KB
enableMouseControl.c3ad94c0.js 2KB
enableBVHCharacter.6e4e5b96.js 2KB
Reticle1.3af1c6fd.js 2KB
Reticle2.515cf7c5.js 2KB
enableBVHCamera.54bd42c8.js 1KB
Reticle7.c48196db.js 1KB
Reticle3.f693652b.js 1KB
enableCannon.fb1310da.js 1011B
vite.config.js 162B
useBVHMap.4a143400.js 119B
style.module.bf2b8627.js 25B
package-lock.json 116KB
package.json 596B
App.jsx 9KB
main.jsx 230B
yarn.lock 44KB
README.md 4KB
hw_peijing_02_baseColor.png 1.56MB
hw_peijing_02_baseColor.png 1.56MB
hw_peijing_01_baseColor.png 1.36MB
hw_peijing_01_baseColor.png 1.36MB
hw_dixing_02_baseColor.png 1.08MB
hw_dixing_02_baseColor.png 1.08MB
hw_dixing_baseColor.png 1021KB
hw_dixing_baseColor.png 1021KB
deploy_github.sh 209B
logo.svg 3KB
favicon.svg 1KB
favicon.17e50649.svg 1KB
license.txt 710B
共 103 条
- 1
- 2
资源评论
毕业小助手
- 粉丝: 2750
- 资源: 5583
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功