1. Home
  2. Docs
  3. Verge3D用户手册
  4. 拼图参考
  5. HTML

HTML

这些拼图操纵HTML DOM元素。

“add HTML element”

创建具有指定类型和标识符(对应于“id”属性)的HTML元素,并将其附加到文档正文。并且其样式属性“position”设置为“absolute”。

“set attribute”

为具有指定标识的HTML元素设置属性。如果HTML元素位于外部HTML文档(使用iframe嵌入Verge3D应用程序的.html文件)中,则应启用“在父文档中”复选框。

“set style”

为具有指定标识的HTML元素设置CSS属性。如果HTML元素位于外部HTML文档(使用iframe嵌入Verge3D应用程序的.html文件)中,则应启用“在父文档中”复选框。

“set css rule”

为指定的CSS规则(在应用程序的.css文件中找到)设置CSS属性。如果样式表属于外部HTML文档(使用iframe嵌入Verge3D应用程序的.html文件),则应启用“在父文档中”复选框。

“event”

为具有指定标识的HTML元素注册事件侦听器。如果HTML元素位于外部HTML文档(使用iframe嵌入Verge3D应用程序的.html文件)中,则应启用“在父文档中”复选框。一旦事件发生,触发放置在“do”槽中的拼图。

“get event property”

输出由“事件”拼图生成的事件的属性值。

“window”

表示DOM窗口对象 – 浏览器选项卡或加载HTML文档的iframe。

“document”

表示DOM文档对象 – HTML文档的根节点。

“body”

表示DOM正文对象 – HTML文档的<body>元素。

“draw line”

通过动态更新的线条连接指定的3D对象和指定的HTML元素。如果HTML元素位于外部HTML文档(使用iframe嵌入Verge3D应用程序的.html文件)中,则应启用“在父文档中”复选框。您还可以设置线条的宽度,颜色和偏移量。

“remove line”

从指定对象中删除以前创建的行。

“bind element”

使指定的HTML元素跟随屏幕空间中指定3D对象的中心。如果HTML元素位于外部HTML文档(使用iframe嵌入Verge3D应用程序的.html文件)中,则应启用“在父文档中”复选框。这是一种可自定义的”add annotation”拼图的变体。

“init fullscreen”

使指定的HTML元素表现为全屏模式按钮 – 首次单击它会触发进入全屏模式,第二次单击会退出全屏模式。进入或退出全屏模式时会触发放置在“on enter do”和“on exit do”插槽中的拼图。如果浏览器不支持全屏(例如iOS Safari),则会触发放置在“if unavailable do”中的拼图。

“get URL data”

检索加载应用程序的窗口的URL数据:

  • Entire URL  – 文字,例如“https://www.example.com/my_awesome_app.html?image_url=https://www.uploadserver.com/path/to/image.jpg”
  • Parameters  – 字典,例如{“image_url”:“https://www.uploadserver.com/path/to/image.jpg”}
  • Host name – 文本,例如“www.example.com”

在应用程序的配置数据存储在其URL中的情况下,此拼图可能很有用。例如,您可以通过以下方式指定要用作纹理的图像:

https://www.example.com/my_awesome_app.html?image_url=https://www.uploadserver.com/path/to/image.jpg

然后您可以检索image_url参数,加载并应用纹理,如下所示:

在Verge3D分支中查看Costom Image示例,看它是如何工作的。

“set URL param”

通过在必要时自动形成有效的查询字符串来分配或更新指定URL中参数的值,并返回更新的URL。

在应用程序的配置数据存储在其URL中的情况下,此拼图可能很有用。例如,您可以通过以下方式指定要用作纹理的图像:

https://www.example.com/my_awesome_app.html?image_url=https://www.uploadserver.com/path/to/image.jpg

你可以上传贴图,获取它在服务器端的路径并保存到appURL的image_url参数,如下所示:

在Verge3D分支中查看Costom Image示例,看它是如何工作的。

“take screenshot”

从视图中截图,并保存为Data URI格式。

“open file” 和 “opened file”

调用浏览器的本机对话窗口,以从用户设备中选择文件。用户选择文件后,以
 Data URI 格式返回文件内容。

Was this article helpful to you? Yes No