为Web3D应用程序创建HTML界面

译注:由于GoogleWebDesginer禁止空路径导出,Verge3D开发团队不再推荐在Verge3D工作流程中使用GWD,并移除了文档中的相关章节。详见论坛

了解如何利用通用Web技术创建丰富的移动端友好的用户界面和网站集成。

介绍

Verge3D模板程序提供了带有全屏按钮和预加载器的单页面宽屏布局。像按钮之类的可交互元素可以用固定到相机的三维物体来实现 - 同样适用于文本框。

然而,更灵活和有效的方法是利用通用的Web标准来创建用户界面。使用HTML和CSS,可以为您的应用构建任何布局,实现响应式和SEO友好。由于现代Web浏览器的专用光栅化引擎,UI和特别是使用HTML和CSS创建的文本看起来通常比3D对应物更清晰。此方法还允许您轻松地将2D媒体(如图像,视频和Web链接)与WebGL内容混合,并为您的应用设置样式以匹配将部署它的网站的设计。

有很多网页设计工具,从纯文本编辑器到所见即所得的网站创建工具。后者可以生成完整的HTML / CSS / JavaScript即用型网页,从而使您可以永远不会触摸任何代码。

在哪里添加HTML和CSS

假设您使用程序管理器(使用默认配置选项)创建了应用程序,并将其命名为my_awesome_app。如果您查看verge3d / applications / my_awesome_app文件夹,您会发现my_awesome_app.htmlmy_awesome_app.css文件似乎很容易编辑 - 但它们只是看起来如此!

实际上,您可能永远不想编辑这些文件,因为它们是由程序管理器自动生成的,并且可能会因更新而被覆盖。将自己的HTML / CSS添加到Verge3D应用程序的更健壮的方法是创建一个新的 .html文件,在其中嵌入Verge3D app .html,matryoshka-style。

快速预览:茶壶

查看以下示例(Verge3D Teapot Heater演示):所有界面均使用第三方Web设计软件构建并保存为index.html(此名称不是必需的)。除了界面HTML元素之外,index.html文件还包含一个iframe元素,通过该元素嵌入了Verge3D项目teapot_heater.html。

layered-html.jpg

在Verge3D App Manager中,这样的复合项目有两个启动图标,您可以使用它们独立运行纯Verge3D项目或集成的应用程序:

teapot-heater-app-manager.jpg

最后,2D和3D部分在逻辑上与HTML拼图连接,以处理用户事件。

教程

在下面的教程中,我们将展示如何使用基于HTML的UI创建一个简单的应用程序。此应用程序将只有2个按钮用于隐藏和显示默认盒子。

tutorial-final-app.jpg

让我们从使用App Manager 创建名为my_awesome_app的新项目开始。下面我们将向您展示如何使用3种替代工具创建用户界面.html文件:Google Web Designer,Webflow和文本编辑器。一旦用户界面准备就绪,我们就可以使用HTML拼图处理用户事件。

设计师方法

为了用于Verge3D流程而试验过的一些免费和付费的网站创建工具中,我们推荐使用Webflow-一种在线编辑器,它允许完全无代码也可以轻松地为Verge3D应用程序创建UI。尽管如此,您仍然可以尝试使用其他工具,例如Adobe Dreamweaver,Google Web Designer,Tumult Hype或Pinegrow,即使它们可能需要用户具备一些HTML / CSS知识。

通过在其网站上单击“入门”来设置Webflow帐户。必需的“嵌入”组件和“导出代码”功能只有付费“帐户”才具备,因此,在继续本教程之前,您需要获取订阅

mark

在仪表板中单击“ 新建项目”按钮,然后从模板中选择“ 空白站点 ”:

webflow-new-project.jpg

填写项目名称,然后单击“ 创建项目”:

webflow-new-project2.jpg

现在让我们添加一个iframe元素来嵌入我们的Verge3D应用程序的主要启动文件my_awesome_app.html。在Webflow中,这可以通过以下方式实现。在左侧面板上,单击“ 添加元素”,然后单击或拖出“ 嵌入”组件:

mark

将以下行复制并粘贴到编辑器窗口:

<iframe width="100%" height="100%" frameborder="0" src="my_awesome_app.html"></iframe>

webflow-add-iframe2.jpg

此行代码假定我们将Webflow生成的网页复制到我们的应用程序文件夹中,以便<iframe>元素获取名为my_awesome_app.html的Verge3D应用的主HTML文件。

单击保存并关闭。现在,将Embed组件放置在页面上。忽略404错误-导出项目后它将消失。

mark

让Embed组件占据整个页面。单击右上角的样式按钮。在“size”面板上,将“宽度”和“高度”指定为100%(您需要单击小的PX按钮以从像素切换为百分比)。同时为位置选择固定。

mark

让我们添加这两个按钮。再次单击最左侧面板上的“添加元素”按钮,找到“按钮”元素并将其拖到页面上。

mark

请注意,由于先前已添加的Embed组件完全覆盖了该按钮,因此不会立即显示该按钮。为了使显示变得正确,请在导航器中选择新添加的元素(在左侧面板中显示为一个按钮)...

mark

...然后在“style”选项卡上,为元素位置选择“fixed”,就像我们对“Embed”组件所做的那样。还可以通过将顶部和左边距分别设置为10个像素来提供一定的间距。

mark

现在,该按钮应该在页面的左上角显示出来。双击编辑标题并将其更改为“Hide”。

mark

使用相同的步骤添加另一个按钮。将其左边距设置为80像素,使其显示在“Hide”按钮附近,并将标题更改为“Show”。

mark

现在我们需要为两个按钮设置唯一的ID-我们将在拼图中使用它们。为此,选择一个按钮,转到“Element Settings”选项卡,然后在ID字段中键入“hide_button”。对第二个按钮重复此操作,将“show_button”指定到其ID。

mark

在这一阶段,我们可以生成UI .html文件,并使用Verge3D应用程序尝试。单击顶部的尖括号按钮(导出代码)...

mark

...然后单击“ Prepare ZIP”,最后单击“Download ZIP”:

mark

有关使用Webflow工具和组件的更多信息,请参阅其教程

找到下载的ZIP文件并将其内容解压缩到应用程序文件夹my_awesome_app。

mark

运行/重新加载Verge3D App Manager-新的.html文件应显示为额外的蓝色图标。

mark

从应用程序页面可以更清楚地看到文件结构,您可以通过单击应用程序名称打开该页面。

mark

现在,通过单击index.html图标运行组装的应用程序。您应该会看到以下内容:

mark

让我们使HTML按钮可单击,以便用户可以隐藏和显示默认盒子。通过利用与我们在Webflow中分配的元素ID结合使用的HTML事件拼图,可以轻松实现这一目标。运行拼图编辑器并添加以下拼图:

mark

由于这些按钮位于内嵌Verge3D应用程序的父.html文件中,因此我们必须选中“父文档”复选框以使其起作用。

完成!保存您的拼图,然后再次运行/重新加载已组装的应用程序,以检查按钮是否在默认盒子上正常工作!

开发人员方法

纯文本编辑器仍被许多Web设计人员认为是构建网页的最强大,最灵活的工具。即使您不打算精读编码,本指南也可以帮助您了解由更多艺术家友好型工具生成的网页的内部结构。

您可以使用任何文本编辑器来编辑HTML / CSS代码,但是如果您的编辑器支持语法高亮显示和行编号(例如Notepad ++或VS Code),则工作起来会更加方便。

我们可以从中开始的基本HTML文档如下所示。您可以将这些内容复制到新的文本文档中,并另存为verge3d / applications / my_awesome_app文件夹中的index.html。同样,文件名不是必须的,为了保持统一,我们在所有地方用这个名字。

<!DOCTYPE html>
<html>

<head>
<title>Index of My Awesome App</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<meta name="description" content="Put some description here - remember about SEO!">
</head>

<body>

</body>

</html>

运行/重新加载Verge3D App Manager-新的.html文件应显示为额外的蓝色图标。

my-awesome-app-manager.jpg

从应用程序页面可以更清楚地看到文件结构,您可以通过单击应用程序名称打开该页面。

mark

现在,我们可以在文档正文中添加一个iframe元素,以嵌入我们的Verge3D应用程序的主启动文件my_awesome_app.html:

<body>
    <iframe id="my_iframe" src="my_awesome_app.html"></iframe>
</body>

如果现在从App Manager运行组装的应用程序,它将在左上角显示默认盒子应用程序的一小部分嵌入。通过内联一些CSS,我们可以使其宽屏且无边框:

<style>
#my_iframe {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border: 0;
}
</style>

现在让我们通过向主体添加2个div元素来创建2个按钮,提供唯一的id属性,以便在CSS和拼图中进行引用:

<div id="hide_button">Hide</div>
<div id="show_button">Show</div>

但是,直到您使用某些CSS对其进行绝对定位和样式化时,您才会在应用程序中看到它们:

#hide_button, #show_button {
    position: absolute;
    width: 100px;
    height: 30px;
    background-color: DodgerBlue;
    color: white;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
}

#hide_button {
    left: 10px;
}

#show_button {
    left: 120px;
}

就是这样 - 现在你的应用程序中有两个HTML按钮!以下是index.html的完整列表:

<!DOCTYPE html>
<html>

<head>
<title>Index of My Awesome App</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<meta name="description" content="Put some description here - remember about SEO!">
<style>
#my_iframe {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border: 0;
}

#hide_button, #show_button {
    position: absolute;
    width: 100px;
    height: 30px;
    background-color: DodgerBlue;
    color: white;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
}

#hide_button {
    left: 10px;
}

#show_button {
    left: 120px;
}
</style>
</head>

<body>
    <iframe id="my_iframe" src="my_awesome_app.html"></iframe>

    <div id="hide_button">Hide</div>
    <div id="show_button">Show</div>
</body>

</html>

现在,通过单击index.html图标运行组装的应用程序。您应该会看到以下内容:

mark

让我们使HTML按钮可单击,以便用户可以隐藏和显示默认盒子。通过利用与我们在Webflow中分配的元素ID结合使用的HTML事件拼图,可以轻松实现这一目标。运行拼图编辑器并添加以下拼图:

mark

由于这些按钮位于内嵌Verge3D应用程序的父.html文件中,因此我们必须选中“父文档”复选框以使其起作用。

完成!保存您的拼图,然后再次运行/重新加载已组装的应用程序,以检查按钮是否在默认盒子上正常工作!

如有疑问请在论坛提出。

Copyright © zjbcool.com 2019 all right reserved,powered by Gitbook最后更新: 2020-01-21 10:14:19

results matching ""

    No results matching ""