构建 JavaScript 3D Minecraft 编辑器

huma13453

本文由Paul O'Brien进行同行评审。感谢所有 SitePoint 的同行评审者使 SitePoint 内容达到最佳状态！ 我的世界启动画面 我一直想制作一款 3D 游戏。我只是从来没有时间和精力来学习 3D 编程的复杂性。然后我发现我不需要... 有一天，在修补时，我开始思考也许我可以使用 CSS 转换来模拟 3D 环境。我偶然发现了一篇关于使用 HTML 和 CSS 创建 3D 世界的旧文章。 我想模拟一个Minecraft世界（或者至少是其中的一小部分）。 《我的世界》是一款沙盒游戏，您可以在其中破坏和放置方块。我想要同样的功能，但是需要 HTML、JavaScript 和 CSS。

请跟我一起来描述我学到的东西，以及它如何帮助您在 CSS 转换方面变得更有创意！ Learn to Code with JavaScript 注意：本教程的大部分代码都可以在 Github 上找到。我已经在最新版本的 Chrome 中进行了测试。我不能 赌号数据 保证它在其他浏览器中看起来完全相同，但核心概念是通用的。 这只是冒险的一半。如果您想知道如何将设计保留到实际服务器，请查看姊妹篇PHP Minecraft Mod。在那里，我们探索与 Minecraft 服务器交互、实时操作它并响应用户输入的方法。 我们已经在做的事情 为了构建网站，我已经编写了相当多的 CSS，并且已经很好地理解了它。



但这种理解是基于我将在二维空间中工作的假设。 让我们考虑一个例子这里我们有一个画布元素，从页面的左上角开始，一直延伸到右下角。最重要的是，我们添加了一个工具元素。它25px从页面左侧开始，35px从页面顶部开始，测量200px宽度和400px高度。 根据添加到标记的顺序div.tools和div.canvas添加的顺序，完全有可能div.canvas重叠div.tools。但应用于每个的样式除外z-index。 您可能习惯于将采用这种方式设计的元素视为可能相互重叠的 2D 表面。但这种重叠本质上是三维的。l可以重命名为x、y、 和z。只要我们假设每个元素都有固定的深度1px，并且z-index有一个隐式px单位，我们就已经在用 3D 术语进行思考了。