游戏故事

游戏讲述了一个小女孩被恶魔诅咒而找不到家的故事。她听说收集龙珠可以召唤一条龙，可以帮助她实现回家的愿望，于是她开始了她的冒险故事。

使用技术

该游戏使用了以下技术

vite + React 基于Three.js 的lingo3d 并使用以下工具：

sketchfab：3D模型下载mixamo：3D角色动作绑定和动画Readyplayer：3D角色制作工具gltf.report：模型压缩polyhaven：hdr材质库（环境贴图）textures：材质贴图材质部分效果实现如下

开始

其实我不知道从哪里开始，也不知道该写什么？

但我似乎需要一个角色，所以我们先创建一个角色

创建一个角色

下载角色

首先从sketchfab下载角色模型

当然，如果您是第一次使用sketchfab，记得先注册并登录

注册后，您将看到以下界面

在箭头所指的输入框中输入关键字，即可过滤出相关型号，然后我们就可以从中进行选择。

注意，选择角色模型时，最好选择T字型。这将使以后更容易绑定骨骼。

我这里选了这个小姑娘，我觉得还不错

一般情况下fbx用的比较多，但有时也不是fbx格式。我们需要使用其他工具来转换格式或处理模型。

为了方便，我们这里选择第二个：glTF格式，点击DOWNLOAD

下载后是一个压缩包。我们解压它。解压后目录如下

处理角色模型

然后我们选择使用模型处理软件来处理我们的模型。比如我这里选择blender。

当然，我们必须先下载软件。我们进入官网，点击下面的按钮进行下载。

只需单击“下一步”即可安装。然后打开软件，看到如下界面。

当我们开始进来时，中间有一个立方体，我们需要将其移除。步骤是用鼠标选择然后按x删除

然后按照下面的步骤导入我们刚刚下载的模型

结果如下，说明导入成功。

但如果看不到该人，可以按x或Delete删除绑定的骨骼以显示该人。

但为什么角色没有颜色呢？因为此时实体已显示，所以我们可以按z进行狙击并选择渲染。

选择的模型比较正常，所以不需要太多的处理。然后我们将其转换为fbx格式，但是在转换之前我们需要将灯光和相机去掉，防止模型导入到页面时出现光照等问题。

您可以像以前一样选择它，然后按x 将其删除。

接下来，开始将其转换为fbx 格式，然后按照以下步骤将其导出。

制作动画

有了模型后，我们让模型动起来。这是我们需要使用动画库的软件。这里我们选择使用Mixamo，它是Adobe出品的免费动画库。它提供了大量的字符。动画片

进入www.mixamo.com/#/，上传我们刚才自己制作的3D模型。步骤如下

然后等待上传

如果上传成功，会显示如下界面。

然后点击NEXT绑定骨骼

成功后，点击下一步。成功后你会看到如下界面。

这时候我们先下载T-pose

之后我们可以在左侧选择我们需要的动画，比如跳舞

是的，就是这么简单

然后您可以单击“下载”开始下载动画

通过类似的步骤，我们就可以下载很多我们需要的动画了

准备好动画等材料后，开始准备搭建项目，然后将相关模型渲染到我们的页面中

搭建项目

进入后可以看到默认的黑色场景，如下：

至此，就意味着项目已经搭建成功了！下面是加载我们的人物模型和场景模型

加载模型

加载角色

首先我们需要创建一个public文件夹并将我们下载的模型放入其中

src是我们的T-poseanimations，animation是要使用的动画，scale是当前动画，scaling是缩放比例。这里有一个陷阱，就是src必须是T-pose，所以一开始就必须导出T-pose，否则动画无法加载。出来。

至此，我们的角色动画就出来了

有了妹妹之后，下一步就是给她一个家

加载房子

但是尺寸需要调整，视角需要调整。您可以使用第一人称或第三人称相机来切换视角。

使用第三人称相机 ThirdPersonCamera

active属性表示mouseControl被激活，鼠标控制效果如下：

但现在小妹妹和房子挤在一起了。这是可以设置的模型的物理属性。

物理属性 physics

物理属性Physics有很多值。在这里，设置角色物理='角色'并设置房屋物理='地图'。

人物代表主角地图代表地图

你可以看到角色和房子是分开的，但是还有一个问题：天空是黑色的

为了设置天空我们需要使用Skybox Skybox

添加 Skybox

查找天空背景

要查找天空背景，可以在Google或百度上输入关键字：equirequarant 天空/天空盒背景

添加Skybox

但我发现角色有点漂浮在空中，这应该是模型物理碰撞结构的原因。

让我们将map更改为map-debug并检查一下

我发现这个模型中的许多小雪花被计算为碰撞体积。

所以你必须调整角色的初始位置

调整完毕后，更换场景。例如，当我看到下面的场景时，我感觉很好

然后我希望角色能够使用键盘wsad来控制上下左右移动。

角色移动

首先，你必须在Mixamo中准备好与动作相关的动画，例如行走、跑步等。

将人物模型的动画设置为对应的动画，比如animation='walking'，就会使用行走动画。

其他相关动画也是这样设置的

让我们整理一下如何让角色移动的想法。

初始状态为站立。当我们按下键盘上的wsad键时，触发行走动画，角色分别向前、向后、向左、向右移动；如果短时间内按两次，则会触发跑步动画。当松开按键时，角色进入初始状态。站立状态

实现前后移动

当按下w时，切换向前移动动画，角色向前移动；当按下s键时，切换向后动画，角色向后移动；

按w时前进

按a 时，后退

左转、右转

添加跑步动画

接下来，为什么不找点东西，比如收集七颗龙珠呢？

收集七龙珠

引入7龙珠

首先，您必须下载《龙珠》。步骤和之前一样，然后导入即可。

移动角色和龙珠到合适的位置

接下来希望将角色和龙珠的初始位置移动到合适的地方

移动完后，可以记下右边的数据，主要是位置和旋转。

我们可以使用w、s、w+e和鼠标来控制角色的移动来寻找龙珠。当找到龙珠的时候，也就是目标对准龙珠的时候，龙珠就会发生变化，比如高亮什么的。

所以，让我们先把它做好。

准心

通过blender找到龙珠对应的名字

如下所示

但默认情况下，我们应该将其设置为FALSE并且不显示它。

color是中心的颜色；变体是中心的形状。您可以通过不同的数字选择您喜欢的形状。上面代码的效果如下

但此时，视线却落在了角色的屁股上。我希望的是视线在角色的头顶，相当于角色的目光。

所以我调整了摄像机的位置，使摄像机升到了角色的头部上方。

调整相机位置

找到龙珠

找到并点击龙珠时，龙珠会亮起

以类似的方式将其他龙珠添加到适当的位置

另一种寻找方式

除了看到点击可以点亮龙珠之外，当角色与龙珠碰撞时龙珠也应该点亮。

那么我们首先要检测字符碰撞

步骤如下：

首先给龙珠添加一个id，给角色添加intersectID属性。该值是一个数组。数组中的每一项都是每个龙珠的ID名称。然后给角色添加onIntersect属性。该值是一个回调函数。该回调函数将在角色和龙珠之间使用。当碰撞发生时触发，所以所有需要做的事情都在这个回调函数中执行。

完成此步骤后添加

神龙出现

神龙出现，小龙消失

当所有的龙珠都找到后，一条龙会出现在地图上的某个地方，你需要找到它

找到后，单击它。小龙将会消失，真正的龙将会出现。

神龙许愿

点击神龙，一会儿就送我回家，回去就可以看到7颗龙珠

完整的游戏过程

1. 通过按键和鼠标控制角色移动

w键：向前跑

s键：向后走

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

空格：跳跃

2. 寻找七龙珠

当看到龙珠时，瞄准并按下鼠标，标记已找到龙珠，然后继续寻找下一个一。

当找到所有龙珠后，会提示地图某处会出现一条龙。

3. 寻找龙

当提示地图上某处出现龙时，去寻找它。

这条龙如图所示

但事情并没有就此结束。这条龙并不是真正的龙。

4. 真神龙出现

点击小龙，小龙就会消失，真正的龙就会出现。

点击神龙，回家的心愿瞬间实现

5. 回到家

此时您就到家了，如下

我们发现的龙珠会出现在我们家附近。

最后

终于可以回家了，我一定很高兴。

所以按住d 键并开始跳舞