纸聊

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 27|回复: 0

构建 JavaScript 3D Minecraft 编辑器

[复制链接]

10

主题

0

回帖

32

积分

新手上路

Rank: 1

积分
32
huma13453 发表于 2024-2-14 16:19:02
本文由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 术语进行思考了。

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|小黑屋|纸聊

GMT+8, 2024-7-19 08:16 , Processed in 0.040748 second(s), 23 queries .

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.

快速回复 返回顶部 返回列表