个性化Verge3D应用

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

自定义UI

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

风格化UI简介

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

个性化应用的最简单的方法——在应用创建对话框中选择 Standard LightStandard 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"); }

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

设置注释样式

使用以下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'); }

标题和说明

为你的应用指定有意义的标题(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 WebGL and HTML5 technologies.">

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

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

语言

修改主HTML文件开头的以下代码段以更改应用语言:

<html lang="en">

简体中文请设置为"zh" 或 "zh-Hans"

<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 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 WebGL and HTML5 technologies."> <meta property="og:image" content="https://cdn.soft8soft.com/images/player_socials.jpg">

遇到问题?

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