个性化Verge3D应用

使用本篇指南来为您的目标受众定制个性化的Verge3D应用。

自定义UI

创建完全定制的Verge3D体验，最好方法之一是在 在3D部件上创建UI （请参考 Scooter(电动车配置器) 案例）。但考虑到创建这种类型的用户界面困难度较高，我们将在这里讨论定制 默认 的Verge3D体验。这将包括预加载器屏幕、注解、全屏按钮，以及页面标题、描述和社交媒体标签等。

风格化UI简介

除了渲染3D部分的画布之外，Verge3D应用还包括额外的HTML元素，用于预加载器、注解、全屏按钮等。所有这些元素都可以由CSS类来补充，并且可以轻松地修改。

个性化应用的最简单的方法——在应用创建对话框中选择 Standard Light 或 Standard Dark 模板：

更多高级定制，请查看 src/style.css 文件。请不要更改这个文件，因为它已经编译进Verge3D了。作为替代，您可在应用的主CSS文件中编辑和添加样式代码。如应用名为“My Awesome app”，应修改以下文件：

applications/my_awesome_app/my_awesome_app.css

或者，您可通过拼图编辑器修改CSS类。请查阅 set css rule(设置css规则) 拼图作为参考。

自定义预加载程序

要修改预加载程序，请更改以下CSS类：

v3d-simple-preloader-background - 用于自定义整个预加载器屏幕的背景。

v3d-simple-preloader-container - 用于更改带有进度条和图片的预加载器的容器元素。通过重写该类，您可以自定义预加载器的位置和大小。

v3d-simple-preloader-bar - 用于自定义预加载进度条。

v3d-simple-preloader-logo -用于自定义加载器的logo图片。

例如，如需将进度条默认的 蓝色 改为 红色，请将以下代码添加到应用的主CSS文件中：

.v3d-simple-preloader-bar { background: red; }

要更改或替换预加载器的图像，请执行以下操作：

.v3d-simple-preloader-logo { background-image: url("PATH_TO_YOUR_IMAGE"); background-size: cover; }

替换PATH_TO_YOUR_IMAGE为您选择的图片的URL，如 my_company_logo.png.

推荐的预加载器logo图片大小为 110x110px 。

也可指定一个自定义背景图片替代默认的 白色背景：

.v3d-simple-preloader-background { background-image: url("PATH_TO_YOUR_IMAGE"); }

通过拼图定义以上三种样式的方式如下：

这个片段应该在拼图编辑器的 init 初始化选项卡中使用，因为预加载器必须在场景加载之前自定义。

设置注解样式

使用以下CSS类来设置您的注解样式：

例如，使用以下代码使您的注解方块显示绿色背景：

.v3d-annotation { border-radius: 0px; background: rgba(0, 255, 0, 0.8); }

更改全屏按钮

全屏按钮样式已经由应用管理。请在应用的主CSS文件中查看以下类：

例如，如需将默认打开/关闭图像更改为其他图像，请修改以下两个类：

.fullscreen-open { background-image: url('PATH_TO_OPEN_IMAGE'); } .fullscreen-close { background-image: url('PATH_TO_CLOSE_IMAGE'); }

自定义WebGL错误界面

有两个CSS类定义了这个错误页面的外观:

比如下面的CSS代码：

.v3d-webgl-error { color: white; border-color: black; background-color: red; } .v3d-webgl-error-link { color: black; }

会让WebGL错误信息看起来像这样：

通过拼图，这段CSS代码可以这样表达：

因为WebGL错误消息是在引擎初始化之前生成的，所以这个片段只有放在拼图编辑器的 init 选项卡中才能起作用。

标题和说明

为你的应用指定有意义的标题(title)和描述(description)，其重要性怎么估计都不过分。

标题显示在浏览器选项卡中，也用于为应用链接添加书签：

标题和说明都会被搜索引擎用来检索您的应用，并在搜索输出中渲染给用户：

要更改应用标题，请在您的主要HTML文件中找到以下代码片段（例如： my_awesome_app.html）：

<title>Verge3D Web Interactive</title>

并更改 Verge3D Web Interactive 为您心仪的标题文字。

标题长度请保持在50-60个英文字符以下，或大约25~30个汉字。

可以以相同的方式更改应用描述。查找和替换 Interactive 3D web application... 的内容 <meta name="description"> 标记：

<meta name="description" content="Interactive 3D Web application made with Verge3D. Immerse yourself in amazing graphics experience offered by state-of-the art WebGL and HTML5 technologies.">

改成更符合您自己需要的内容。

与标题类似，描述文本不应该过长——120~160个英文字符就足够了，对应中文字符约为60~80个。

语言

修改主HTML文件开头的以下代码段以更改应用语言，英文请设置为 en ，简体中文请设置为 zh 或 zh-Hans ：

<html lang="en"> <html lang="zh">

参见 这里 了解不同语言的代码列表。

图标

若要自定义浏览器中显示的页面图标（也称为favicon)，请替换 media 应用目录中的如下文件：

可以在网络上搜索 favicon生成器 ，有很多这样的工具可以帮助您快速生成此类文件。

社交媒体标签

为了让你的应用链接在Twitter上看起来更酷，请修改主HTML文件中的“title/description/image”标签：

<meta name="twitter:title" content="Verge3D Web Interactive"> <meta name="twitter:description" content="Interactive 3D Web application made with Verge3D. Immerse yourself in amazing graphics experience offered by state-of-the art WebGL and HTML5 technologies."> <meta name="twitter:image:src" content="https://cdn.soft8soft.com/images/player_socials.jpg">

为保证效果，请将图像缩放到1200x630像素大小，并指定 绝对 URL,例如： https://www.yoursite.com/app_social_image.jpg ，而非 app_social_image.jpg 。

对于Facebook、Reddit、WhatsApp、微博、VK，以及其他支持Open Graph协议的社交媒体平台，查找并更改以下标签。您可以将它们指定为用于Twitter标签的相同内容：

<meta property="og:title" content="Verge3D Web Interactive"> <meta property="og:description" content="Interactive 3D Web application made with Verge3D. Immerse yourself in amazing graphics experience offered by state-of-the art WebGL and HTML5 technologies."> <meta property="og:image" content="https://cdn.soft8soft.com/images/player_socials.jpg">

遇到问题？

欢迎您随时在 论坛上提问！您还可以加入中文用户社区QQ群(171678760)，在线寻求帮助。