修改Verge3D应用程序

学习如何在Verge3D应用程序中自定义用户界面。

说明

除3D部分外,所有Verge3D应用程序均包含用于渲染加载器、注释、全屏按钮等的HTML元素。所有这些元素都通过CSS类完善,这些CSS类可以在应用程序中轻松更改。

请参阅src / style.css文件以获取参考和可定制内容的示例。但是不要更改此文件,因为它已直接编译到Verge3D中。而是将所有样式代码直接添加到应用程序主CSS文件中。例如,如果您的应用程序名为"My Awesome App",则应修改以下文件:

applications/my_awesome_app/my_awesome_app.css

自定义加载器

要修改预加载器,请更改以下CSS类:

  • v3d-simple-preloader-text-用于更改预加载器百分比文本。
  • v3d-simple-preloader-gear-container-用于更改预加载器的旋转部分。
  • v3d-simple-preloader-gear-用于更改旋转的加载器图片。

例如,如果您需要将进度号设置为红色而不是默认的蓝色,则将以下代码添加到应用程序的主CSS文件中:

.v3d-simple-preloader-text {
    color: red;
}

要将预加载器的齿轮图片更改为其他内容,请执行以下操作:

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

修改注释

要设置注释样式,请使用以下CSS类:

  • v3d-annotation-用于更改注释图标的样式。
  • v3d-annotation-dialog-用于设置注释弹出对话框的样式。

例如,使注释变为绿色背景的正方形:

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

改变全屏按钮

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

  • fullscreen-button -用于更改打开和关闭全屏按钮的样式。
  • fullscreen-open -用于设置图像的样式以进入(打开)全屏模式。
  • fullscreen-close -用于设置图像样式以退出(关闭)全屏模式。

例如,如果您需要将默认的打开/关闭图像更改为其他图像,请修改以下两个类:

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

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

如有疑问

请在论坛提出!

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

results matching ""

    No results matching ""