Giter Club home page Giter Club logo

beauty-and-dragonball's Introduction

项目简介

它是什么

游戏讲述的是一个小女生被恶魔诅咒找不到家了,她听说收集七龙珠可以召唤神龙,神龙可是帮她实现回家的愿望,于是她开启了她的冒险故事

所以此项目是基于这个故事做成的 3D 冒险游戏,可以通过控制人物来寻找龙珠,召唤神龙

在线预览

技术栈

这个游戏使用了以下技术

  1. vite + React+ jsx
  2. 基于 Three.jslingo3d

以及使用了以下工具:

  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

s键:向后走

21.gif

鼠标:移动鼠标可控制方向

23.gif

空格:跳跃

22.gif

2. 寻找七龙珠

当看到龙珠时,对准并按下鼠标即可标记此龙珠已经找到,然后继续找下一颗

24.gif

当所有龙珠被找到时,会提示地图某处会出现龙

image.png

3. 寻找龙

当提示地图某处出现龙时,就去寻找龙

此龙如图所示

image.png

但是到这没有结束,此龙非真的神龙

4. 真神龙出现

点击小龙,小龙会消失,真的神龙出现

image.png

image.png

点击神龙,一会就会实现回家的愿望

5. 回到家

到这就会回到家了,如下

image.png

而且家附近会出现我们找到的龙珠

image.png

最后

最后能回到家,肯定开心啦

所以按住d键,开始跳舞吧

项目实践细节

具体实践细节见下文:

别卷了,快来玩 | React+Three.js 实现一个超好玩的3D游戏:美女与龙珠

beauty-and-dragonball's People

Contributors

jcodelife avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.