--- theme: cyanosis --- 我正在参加掘金社区游戏创意投稿大赛个人赛，详情请看：[游戏创意投稿大赛](https://juejin.cn/post/7077529509724946445 "https://juejin.cn/post/7077529509724946445") 这两天我想写了个小游戏，参加这个征文活动 👆 **在线预览** - [地址 1](https://jcodelife.github.io/beauty-and-dragonball-js/) - [地址 2](https://jcodelife.gitee.io/online/) 说明： - w键：前进 - w+e键：快跑 - s键：后退 - 空格：跳跃 - 鼠标：控制视角 - w+e+空格：飞玩法：寻找散落各处的龙珠。当人物碰到龙珠时，龙珠发生变化，表示此龙珠被找到。当找完七颗时，寻找地图中出现的龙，按提示找出神龙，即可完成游戏！ **游戏故事** 游戏讲述的是一个小女生被恶魔诅咒找不到家了，她听说收集七龙珠可以召唤神龙，神龙可是帮她实现回家的愿望，于是她开启了她的冒险故事 **使用技术** 这个游戏使用了以下技术 1. `Vite` + `React` 2. 基于 `Three.js` 的 [Lingo3D](https://github.com/lingo3d/lingo3d ) 以及使用了以下工具： 1. `sketchfab`： 3D模型下载 2. `mixamo`：3D人物动作绑定及动画 3. `readyplayer`：3D角色生产工具 4. `gltf.report`：模型压缩 5. `polyhaven`：hdr素材库(环境贴图) 6. `textures`：材质贴图素材 **部分效果实现如下 👇** ![20.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f52e114a2c934f49b708d172e9b6e156~tplv-k3u1fbpfcp-watermark.image?) ![22.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/64e1858e4c1d4889a10351726c37d7e8~tplv-k3u1fbpfcp-watermark.image?) ![24.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fe371e8781914d8ab1e52a4a38224387~tplv-k3u1fbpfcp-watermark.image?) ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/86f00ce14e75479f80dc40acbdad4894~tplv-k3u1fbpfcp-watermark.image?) ![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/f1e1718f41ee44e09544bb00d2bcaa0a~tplv-k3u1fbpfcp-watermark.image?) ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/80cfa538eed343f5b5e5dcd0f6c6bfda~tplv-k3u1fbpfcp-watermark.image?) ![25.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1ab2eb7e5505470f801f4af921537d6e~tplv-k3u1fbpfcp-watermark.image?) # 开始其实我也不知道从哪里开始，也不知道写什么好？但我好像需要一个角色，那就从创建角色开始 # 创建一个角色 ## 下载角色首先到 [sketchfab](https://sketchfab.com/search?type=models) 中下载一个角色模型当然如果你是首次使用 `sketchfab` ，记得先注册和登录注册好之后，就会看到以下界面 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/258deb8a2d64413fa1abb30749c9ccf7~tplv-k3u1fbpfcp-watermark.image?) 箭头指的输入框输入关键字，即可筛选出相关的模型，然后我们从中进行挑选注意，挑选人物模型时，最好选择 [T-pose](https://baike.baidu.com/item/T%E5%9E%8B%E5%A7%BF%E5%8A%BF/55221953?fr=aladdin) 类型，比如这样可以方便之后绑定骨骼我这里选择了这下面这个小妹妹，我觉得还不错 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1e20b245b494443cb7e045c11446b954~tplv-k3u1fbpfcp-watermark.image?) 然后点击右上角的下载按钮，进入下载界面 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/96ba48ee121e426bbd31d0bfffa2b491~tplv-k3u1fbpfcp-watermark.image?) 一般fbx使用的比较多，但是有的时候不是fbx的格式，我们需要使用其他工具转格式，或者处理模型为了方便，我们这里选择第二个：glTF 格式，点击 `DOWNLOAD` 下载好之后是个压缩包，我们进行解压，解压后目录如下 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1a2ad69e758b45ef9765c905c5321737~tplv-k3u1fbpfcp-watermark.image?) ## 处理角色模型接着我们选择使用模型处理软件来处理我们的模型，比如我这里选择 `blender` 当然得先下载软件，我们进入[官网](https://www.blender.org/)，然后点击如下按钮进行下载 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/116c1c461ccb43f6bc60a5b03dc7e38c~tplv-k3u1fbpfcp-watermark.image?) 安装就直接点击下一步下一步就行，之后打开软件，看到以下界面 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d44b242efb9a42f594aca8109f27cc50~tplv-k3u1fbpfcp-watermark.image?) 开始进来中间是有一个立方体的，我们需要移除。步骤是鼠标选中，按x删除之后按如下步骤导入我们刚刚下载的模型 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/69d1a3a538fa4449b13a5539cfd98dcd~tplv-k3u1fbpfcp-watermark.image?) ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/74165e3d6a1841d5bedf2add5dd67222~tplv-k3u1fbpfcp-watermark.image?) 结果如下，表示导入成功 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1d32e52fc52f4355967321fdcba62185~tplv-k3u1fbpfcp-watermark.image?) 但看不到人，可以按x或者Delete将绑定的骨骼删除，即可展示人物 ![1.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/284e50f91e424332aa0b0583d4abd5bb~tplv-k3u1fbpfcp-watermark.image?) 但是人物怎么没有颜色，这时因为这时展现的是实体，我们可以按z 甩狙，选择渲染即可 ![2.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/23469326990545cb9b0cfde5263806cd~tplv-k3u1fbpfcp-watermark.image?) 选择的模型比较正常，所以不用太多的处理，接着我们将它转成fbx格式，但是在转之前需要将灯光和相机移除，以防止模型导入页面时光线等问题 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1338392047bb441aa5c430884c5d320d~tplv-k3u1fbpfcp-watermark.image?) 可以跟之前一样选择中，按x即可删除下面开始将它转成fbx格式，直接按以下步骤导出即可 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8884bee736674b7f8720f5e294add3fe~tplv-k3u1fbpfcp-watermark.image?) 需要注意，导出时需要将路径模式改成复制，并打开内嵌纹理。否则导出的模型将没有颜色 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f3f27fdd13104c7a8c637a605ce3c849~tplv-k3u1fbpfcp-watermark.image?) ## 制作动画模型有了之后，我们我们的让模型动起来，这是我们需要使用动画库相关的软件，这里选择使用我选择 `Mixamo`，他是Adobe公司出品的免费动画库，它提供了大量的人物动画进入https://www.mixamo.com/#/ 然后上传刚刚我们自己的3d模型，步骤如下 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1ac6cb21a913427fa33918840f04a240~tplv-k3u1fbpfcp-watermark.image?) 之后等待上传上传成功会显示如下界面 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1397be33c79843f1b07535f0f9be0f24~tplv-k3u1fbpfcp-watermark.image?) 然后点击 NEXT，绑定骨骼 ![3.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/eb363292dbdf40ba99567207e2194906~tplv-k3u1fbpfcp-watermark.image?) 成功之后点击 NEXT，成功之后将看到如下界面 ![4.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d3a49738bcc2408193f1da6edaff6583~tplv-k3u1fbpfcp-watermark.image?) 这时，我们先将T-pose下载下来 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9ccda9040ff349089e3fb7468f7bcee9~tplv-k3u1fbpfcp-watermark.image?) 之后，我们可以在左边选择我们需要的动画，比如选个跳舞 ![5.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a16c84453d2d4e8bb4b59475bb6f551b~tplv-k3u1fbpfcp-watermark.image?) 没错就是这么简单之后可以点击 DOWNLOAD 开始下载动画 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/640a1a526bbf45f38e41e6162d61dbe0~tplv-k3u1fbpfcp-watermark.image?) 类似步骤，我们可以下载很多我们需要的动画准备好动画等素材之后，开始准备搭建项目，然后将相关模型渲染到我们的页面中 # 搭建项目这是选择使用vite来搭建一个react项目： ``` yarn create vite ``` 创建项目之后，进入项目、安装依赖 ``` cd [项目名称] yarn yarn dev ``` 然后安装一个lingo3d-react ``` yarn add lingo3d-react ``` 接着我们修改src\App.jsx文件，将多余的东西都去掉，同时添加``场景标签。代码变成如下样子： ```jsx import { World } from "lingo3d-react" function App() { return ( ) } export default App ``` 接着启动项目 ``` yarn dev ``` 成功之后，显示如下 ``` vite v2.9.5 dev server running at: > Local: http://localhost:3000/ > Network: use `--host` to expose ready in 359ms. ``` 接着就可以进入http://localhost:3000/ 进去就可以看到一个默认的一个黑的场景，如下： ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/315ab15f79dc4e1ea2796f9d27ce19a4~tplv-k3u1fbpfcp-watermark.image?) 到这，说明项目已经构建成功！下面就是要加载我们的角色模型和场景模型 # 加载模型 ## 加载角色首先需要创建一个public文件夹，并将我们下载好的模型放进去接着使用 `` 加载我们的模型 ```jsx import { Model, World } from "lingo3d-react" function App() { return ( ) } export default App ``` 属性说明： - src 是我们的T-pose - animations 是所要用的动画 - animation 是当前动画 - scale 是缩放这里有个坑，就是src中一定得是T-pose，所以在最开始时一定要导出T-pose，否则动画加载不出来。到这，我们的角色动画就出来了 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/be05fdb4bcfa4d31a05a4bfbaca00395~tplv-k3u1fbpfcp-watermark.image?) 有了小妹妹，接下来就是给她一个家 ## 加载房子更上述类似的步骤，我们添加一个房子 ```jsx import { Model, World } from "lingo3d-react" function App() { return ( ) } export default App ``` 结果如下 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4098094bfc9c418ebe33d1767c298525~tplv-k3u1fbpfcp-watermark.image?) 但大小需要调整，另外视角需要调整，可以使用第一人称或者第三人称相机来切换视角 # 使用第三人称相机 ThirdPersonCamera 使用ThirdPersonCamera表示已第三人称的角度看到人物，代码如下 ```jsx import { Model, ThirdPersonCamera, World } from "lingo3d-react" function App() { return ( ) } export default App ``` 其中 - active 属性表示激活 - mouseControl 表示鼠标的控制效果如下： ![6.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7b6bf907cdff4caebc1bff56027c9072~tplv-k3u1fbpfcp-watermark.image?) 但是此时小妹妹和房子捏在一起了，这是可以设置模型的物理属性 # 物理属性 physics 物理属性physics的值有很多，这里设置角色physics="character"，设置房子physics="map" - character 表示主角 - map 表示地图代码如下： ```js import { Model, ThirdPersonCamera, World } from "lingo3d-react" function App() { return ( ) } export default App ``` 效果如下 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2bec4a733ba1478eb0d298ce21b36d36~tplv-k3u1fbpfcp-watermark.image?) 可以看到人物就和房子分离开了，但还有一个问题是：天空是黑色的设置天空我们需要用到天空盒 Skybox # 添加 Skybox ## 查找天空背景查找天空背景可以google或者百度输关键字：equirectangular sky / skybox background ## 添加Skybox 然后再``中添加``，比如： ```html ``` 这样就有天空啦，效果如下： ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f2262891798b47d3ba2aaec1f32924a5~tplv-k3u1fbpfcp-watermark.image?) ![7.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fdb72e8d25f2411a8aef9dc3d6c4d820~tplv-k3u1fbpfcp-watermark.image?) 但我发现人物有点浮在空中，应该是模型的物理碰撞结构的原因我们将map换成map-debug检查一下 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a3d30bfd61404dcea9efbd0e0e23b85e~tplv-k3u1fbpfcp-watermark.image?) ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/016e9fbea67b4c78a225cc3b1cfbd383~tplv-k3u1fbpfcp-watermark.image?) 发现，这个模型里好多小雪花，被计算成碰撞体积了。所以得调好人物的初始位置调好之后再来换个场景，比如我看到下面这个场景感觉不错 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/42db059f82af41a0a2ae515478e2878b~tplv-k3u1fbpfcp-watermark.image?) 接着我们将场景下载并导入 ```jsx import { Model, Skybox, ThirdPersonCamera, World } from "lingo3d-react" function App() { return ( ) } export default App ``` 显示结果如下： ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b7a76a861ecd4449a23efd08daaf2ff5~tplv-k3u1fbpfcp-watermark.image?) ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0d397d91186e4210822b257dbb6ee343~tplv-k3u1fbpfcp-watermark.image?) 接着我想让角色可以用键盘wsad控制上、下、左、右的移动 # 角色移动首先得在`mixamo`准备好移动相关的动画，比如走路、跑步等将人物模型的animation设置成对应的动画，比如animation="walking"，这是就会用走路的动画了 ![8.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a202a9e561c044e4b21ec59cc61778f4~tplv-k3u1fbpfcp-watermark.image?) 其他相关的动画也是这样设置下面整理一下如何让角色移动的思路 1. 初始是站立状态 2. 当我们按下键盘wsad键时，触发走路动画，角色分别向前、后、左、右的移动；如果短时间连续按两下，触发跑步动画 3. 当松开按键时，角色进入初始站立状态 ## 实现前后移动当按下w时，切换向前移动动画，并向前移动；当按下s键时，切换倒退动画，人物向后移动；代码如下 ```jsx import { Model, Skybox, ThirdPersonCamera, useKeyboard, useLoop, World } from "lingo3d-react" import { createRef, useRef } from "react" function App() { // useKeyboard用于监控当前按键 const key = useKeyboard() const characterRef = createRef() //声明motion，用于表示当前角色应该对应的动画，默认为站立idle let motion = "idle"; // 前 if (key === "w") { motion = "walking" } // 后 if (key === "s") { motion = "walking_backwards" } // useLoop 帧循环勾子 useLoop(() => { characterRef.current.moveForward(-3) }, key === "w"); useLoop(() => { characterRef.current.moveForward(3) }, key === "s"); return ( ) } export default App ``` 实现效果如下按w时，向前 👇 ![9.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6bdb59c4982048f89e1e1177d7e74555~tplv-k3u1fbpfcp-watermark.image?) 按a时，向后 👇 ![11.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5e772ae9b2864ca98407bf34c5ce67bd~tplv-k3u1fbpfcp-watermark.image?) ## 左转、右转左转右转的改变，可以通过鼠标来控制，即mouseControl属性 ```html ``` 效果如下 ![13.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/56d85c87809d41c484ece140dd59d425~tplv-k3u1fbpfcp-watermark.image?) ## 添加跑步动画由于上面是用w表示走路，这里就用w加e的时候实现跑步吧，代码如下： ```jsx import { Model, Skybox, ThirdPersonCamera, useKeyboard, useLoop, World } from "lingo3d-react" import { createRef, useRef } from "react" function App() { // useKeyboard用于监控当前按键 const key = useKeyboard() console.log(key); const characterRef = createRef() //声明motion，用于表示当前角色应该对应的动画，默认为站立idle let motion = "idle"; // 前 if (key === "w") { motion = "walking" } // 后 if (key === "s") { motion = "walkingBackwards" } // 按下w和e时，开始跑 if (key === "w e") { motion = "running" } // useLoop 帧循环勾子 useLoop(() => { characterRef.current.moveForward(-4) }, key === "w"); useLoop(() => { characterRef.current.moveForward(1.8) }, key === "s"); useLoop(() => { characterRef.current.moveForward(-10) }, key === "w e"); return ( ) } export default App ``` 效果如下 ![15.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/938aca60cfa14cae9dec89be37c27040~tplv-k3u1fbpfcp-watermark.image?) 接着，要不找点什么东西吧，比如收集七颗龙珠 # 收集七龙珠 ## 引入7龙珠首先得下载龙珠，步骤跟之前一样，之后引入 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6a0f7b88af374ee98407402a59c27791~tplv-k3u1fbpfcp-watermark.image?) ## 移动角色和龙珠到合适的位置下面我希望将角色和龙珠的初始位置移动到合适的地方可以通过model身上的x、y、z来控制，但是具体多少呢？可以使用Editor组件开启编辑模式，来测 ```jsx xxx return ( <> //开启编辑模式 ) ``` 于是就可以看到以下的编辑模式，可以用鼠标进行移动 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b8b054e351f54c8eb90b43d409cd772a~tplv-k3u1fbpfcp-watermark.image?) 移动好之后可以记下右边的数据，主要position和rotation 比如 ```jsx ``` ## 寻找龙珠我们可以通过w和s和w+e以及配合鼠标来控制角色移动来寻找龙珠，当寻找到龙珠时，即准心对准龙珠时，让龙珠有变化，比如高亮或者啥的所以，首先弄个准心吧 ### 准心通过blender找到龙珠对应的名字 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/90296b6e19ab474ea28ad1fcc479c3d0~tplv-k3u1fbpfcp-watermark.image?) 然后在龙珠模型中添加一个Find标签 ```jsx ``` 表示的是在模型中找到的东西，我们让他outline，以示区分，效果可以之后调展示如下 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/390eb483108e411da17472e253ad6566~tplv-k3u1fbpfcp-watermark.image?) 但是默认情况，我们应该是FALSE，不显示的这里引入状态来控制，如下代码 ```jsx //... const [mouseOver,setMouseOver] = useState(false); //.... { setMouseOver(true) }} > ``` 这样的话，默认就是不显示发光特效，只有鼠标准心对准过后才发光，表示找到了的接着我们需要添加准心，来方便找，通过Reticle ```jsx //xxx ``` - color是准心的颜色； - variant是准心的形状，可以通过不同数字选择自己喜欢的形状上述代码效果如下 👇 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d81178e684004eb1ba0aa50843afa087~tplv-k3u1fbpfcp-watermark.image?) 但是此时**瞄准器**在人物的屁股上，希望的是瞄准器在人物的头顶上，相当于是人物的目光所以我的调整相机的位置，让相机升到人物的头顶上去 ### 调整相机位置其实可以通过相机的innerX、innerY、innerZ来设置，如下代码 ```jsx ``` 效果如下 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d9b129e7ba1d45108842bdca2f07be60~tplv-k3u1fbpfcp-watermark.image?) ### 找到龙珠当找到龙珠并点击时，龙珠亮代码如下 ```jsx { setMouseOver(true) }} > ``` 效果如下 ![16.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f48104f7d2b6419ab2301639b6ff1cb6~tplv-k3u1fbpfcp-watermark.image?) 类似的方式将其他龙珠添加到合适的位置 ## 另一种寻找方式除了看到点击可以点亮龙珠以外，当角色和龙珠碰撞时也应点亮龙珠那首先要检测角色碰撞步骤如下： 1. 先给龙珠添加一个id 2. 给角色添加intersectID属性，值为一个数组，数组的每一项是每个龙珠的id名 3. 再给角色添加onIntersect属性，值为一个回调函数，这个回调函数会在角色和龙珠发生碰撞时触发所以，需要做的事情都是这个回调函数中执行。这步之后加上吧 # 神龙出现 # 神龙出现，小龙消失当所有龙珠都找到时，地图上某个地方就会出现龙，你需要找到它 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/72a88716acb54b0f91982863534e0173~tplv-k3u1fbpfcp-watermark.image?) 找到之后点击它，小龙消失，真神龙就会现身了 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6ad91b2bfe914203b80fca496448298d~tplv-k3u1fbpfcp-watermark.image?) # 神龙许愿点击神龙，过一会就会送我回到家里，并且回去之后可以看到7颗龙珠 # 完整的游戏过程 ## 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键，开始跳舞吧 ![25.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1ab2eb7e5505470f801f4af921537d6e~tplv-k3u1fbpfcp-watermark.image?) # 参考 >Lingo3D 官方地址（GitHub）：https://github.com/lingo3d/lingo3d > >Lingo3D B站地址：https://b23.tv/R7T8md5 > >小红旗 Hubert：https://b23.tv/0ewcIiw # 结语以上就是本文的所有内容啦，源码这两天完善后回上传github，敬请期待~