如何用Three.js构建一个网络安全游戏，灵感来自Interland
作者：互联网
如何使用名为Exploit的three.js构建一个与之类似的网络安全游戏？我们想要创建一个轻量级的基于浏览器的游戏，它会很有趣、引人入胜且具有教育意义。作为第一次学习three.js的完整初学者，也是我们第一次游戏构建体验，我们对我们的进步感到满意。
每周我们都作为一个团队努力编码，以赶上我们在2022年12月中旬之前准备好游戏基本版本的最后期限。我们还想发布每周博客，因为我们相信这可能会帮助其他对游戏感兴趣的人开发，看看初学者的过程是什么样的。我们没有发现很多游戏开发过程被记录在博客上，所以我们相信记录这些过程对于那些对three.js、游戏开发、开源开发和协作编码感兴趣的人来说具有巨大的价值！
在12月中旬首次发布后，我们邀请所有对开源感兴趣的开发人员为这个项目做出贡献！
有什么新鲜事
我们称为威胁猎人的小游戏角色现在能够在回答问题时从一栋建筑物跳到另一栋建筑物。上次，我们根本没有任何建筑物或环境。然而，这一次我们的威胁猎手和它的问答能力是完全正常的。
我们的角色跳过建筑物的这种逻辑非常类似于GoogleInterland的游戏，小角色在回答问题后成功过河。
免责声明：但是，游戏目前仍然存在错误，我们正在努力调试它们。问题显示有时会失败，有时角色会不停地不停地走。但是，嘿，没关系，这是一项正在进行的工作，我们正在经历一个巨大的学习曲线来处理这个项目。
要查看我们迄今为止的进展，您可以随时访问我们的游戏环境的GitHub存储库。请参阅GitHub问题作为我们的项目文档。
我们很棒的角色的代码就在这里。
我们还创建了一些用户统计信息，例如完成的模块、最后得分和完成这些模块所用的时间。
我们现在还有一个动态排行榜，它显示了每个模块玩游戏的所有用户的分数。例如，如果我玩 ransomware模块，那么我的分数将动态显示在ransomware排行榜下方。
实验
在此之前，我们必须经历许多试验和错误，才能弄清楚环境是如何融合在一起的。在实施这个项目时， three.js文档是我们的主要指导来源。我们尝试了创建云、建筑物的不同定位、阴影和球体几何形状。在我们的环境中，到目前为止，我们有月亮、云和建筑物，当然还有与环境交互的游戏角色。由于月球是我们工作环境的第一个组件，我想提供一些代码片段来解释它。
月亮
我们首先在月球上工作，以获得夜空。在制作游戏环境时需要考虑很多事情。我们找到纹理并考虑相机设置、渲染器设置和光线方向。
如下面的代码片段所示，我们首先定义了月球。
//<DefineEnvComponents
constmoon=newGroup();
moon.add(
newMesh(newSphereGeometry(200,1800,1800),newMeshPhongMaterial({map:this.textures.moonTexture,displacementMap:this.textures.moonDisplacementMap,displacementScale:0.0,bumpMap:this.textures.moonDisplacementMap,bumpScale:0.04,reflectivity:0,shininess:0,emissive:0xffffffff,emissiveMap:this.textures.moonTexture,emissiveIntensity:12})),
newPointLight(0xffffff,1,5000),
);
moon.position.set(1200,350,0);
什么是网格？
网格是描述3D对象形状的顶点、边和面的集合：
- 顶点是一个点。复数是“顶点”。
- 边是连接两个顶点的直线段。
- 面是由边包围的平面。
我们可以把它想象成一个环境的骨架，我们需要在上面添加纹理以使其逼真。
什么是质感？
纹理增加了游戏的艺术控制和真实感。为了创建我们的月亮，我们必须下载一些逼真的月亮纹理，然后使用该textureLoader函数加载它们。然后，我们阅读了球体几何和位移图的文档来构建月球。之后，我们设置了月亮的位置并给它一个点光源。那么，什么是点光源？正如他们在文档中所写的那样，“从一个点向各个方向发出的光。一个常见的用例是复制从裸灯泡发出的光。”
constmoonDisplacementMap=textureLoader.load('displacement.jpg');
constmoonTexture=textureLoader.load('moon.jpg');
constmoonBody=newMesh(newSphereGeometry(200,1800,1800),newMeshPhongMaterial({map:moonTexture,displacementMap:moonDisplacementMap,displacementScale:0.0,bumpMap:moonDisplacementMap,bumpScale:0.04,reflectivity:0,shininess:0,emissive:0xffffffff,emissiveMap:moonTexture,emissiveIntensity:12}));
constmoon=newthree.PointLight(0xffffff,1,5000);
moon.position.set(1200,350,0);
moonBody.position.set(1200,350,0);