HTML类拼图参考 - Soft8Soft
Description: 如何使用 Verge3D 拼图来操作 HTML DOM 元素。

# HTML拼图

这些拼图用于创建和修改HTML元素、调整页面外观，或执行3D Web应用网页上的其他任务（例如处理用户事件、截屏、下载文件等）。

## 内容

- 什么是HTML DOM？
- 拼图参考
  - add HTML element(添加HTML元素)
  - remove HTML element(移除HTML元素)
  - set property(设置属性)
  - get property(获取属性)
  - create css rule(创建CSS规则)
  - style constructor(样式构造器)
  - set style(设置样式)
  - get style(获取样式)
  - set css rule(设置CSS规则)
  - on event of(在事件发生时)
  - get event property(获取事件属性)
  - DOM object selector(DOM对象选择器)
  - query selector(查询选择器)
  - call method(调用方法)
  - create canvas elem(创建canvas元素)
  - draw line(画线)
  - remove line(移除线)
  - bind element(绑定元素)
  - unbind element(解除绑定元素)
  - init fullscreen(初始化全屏)
  - open web page(打开网页)
  - social share link(社交网站分享链接)
  - set URL param(设置URL参数)
  - take screenshot(截屏)
  - get URL data(获取URL数据)
  - download file(下载文件)
  - open file(打开文件)
  - opened file(打开的文件)
  - drop file to(将文件拖到)
- 如何指定Web资源的URL路径
- Data URL链接

#

## 什么是HTML DOM？

HTML DOM（文档对象模型，参见技术文档）是HTML的编程接口。这意味着您不仅可以在创建页面时（通过编辑源代码）编辑网页，还可以在页面已在浏览器中打开时进行编辑。DOM将页面内容表示为一组基本对象，可以通过拼图（或JavaScript）轻松操作。

#

## 拼图参考

#

### add HTML element(添加HTML元素)

创建一个具有指定类型和标识符（对应于 id 属性）的HTML元素，并将其添加 to（到）、right before（紧邻之前）或 right after（紧邻之后）指定的现有HTML元素。

如果创建的元素位于父HTML文档中（即应用的 .html 文件通过 `<iframe>` 嵌入时），应启用 in parent doc 复选框。

例如，要创建一个指向 Soft8Soft 网站的红色链接，您可以使用以下拼图：

支持的元素：

元素 | 描述
--- | ---
a | 超链接。使用 `"href"` 属性定义链接目标，使用 `"textContent"` 或 `"innerHTML"` 定义链接文本。或者，您可以使用相同的 add HTML element 拼图直接向此元素添加任何可点击的元素。
b | 以粗体显示内部文本（通过 `"textContent"` 或 `"innerHTML"` 属性指定）。
br | 插入换行符。
button | 创建一个可点击的按钮。
canvas | 用于渲染2D或3D图形的底层元素。
dialog | 定义一个对话框元素。
div | 定义一个用于包含其他元素的容器。此外，通过使用CSS，它可以被修改为表示几乎一切——图标、图像、按钮、预加载器等。
form | 定义一个表单，即 `<input>` 或 `<textarea>` 元素的容器元素，用于表示用户输入。
h1..h6 | 从大到小的页面标题。标题文本通过 `"textContent"` 属性指定。
iframe | 定义一个内联框架，即子页面。子页面的URL由 `"src"` 属性定义。
img | 图像元素。图像资源的URL应在 `"src"` 属性中提供。
input | 输入元素。使用 `"type"` 属性指定此元素的类型，例如：`"text"`、`"checkbox"`、`"file"`、`"radio"`、`"number"` 等。
label | 标签元素。用于为 `<input>` 或 `<textarea>` 等表单字段指定文本标签。
li | 列表项。应插入到 `<ul>` 或 `<ol>` 中以定义无序或有序列表。
link | 用于包含CSS样式文件或定义浏览器图标的元素。
ol | 有序列表。使用 `<li>` 元素定义列表项。
option | `<select>` 元素中的选项项。
p | 定义一个段落。段落文本可以通过 `"textContent"` 属性指定。
script | 用于包含（并运行）JavaScript。脚本的URL应在 `"src"` 属性中提供。
select | 定义一个选择列表。使用 `<option>` 元素定义列表项。
span | 定义一个用于包含某些文本的容器。
style | 用于将CSS样式直接包含到页面中。要提供CSS代码，请使用 `"textContent"` 属性。
table | 表格元素。
td | 定义 `<table>` 中的一个单元格。
th | 定义 `<table>` 中的一个标题单元格。
tr | 定义 `<table>` 中的一行。
textarea | 多行文本输入。
ul | 无序列表。使用 `<li>` 元素定义列表项。
video | 视频元素。视频文件的URL应在 `"src"` 属性中提供。

#

### remove HTML element(移除HTML元素)

移除一个具有指定标识符的HTML元素。如果移除的元素位于父HTML文档中（即应用的 .html 文件通过 `<iframe>` 嵌入时），应启用 in parent doc 复选框。

#

### set property(设置属性)

为具有指定 id 的HTML元素设置属性。如果HTML元素位于父HTML文档中（即应用的 .html 文件通过 `<iframe>` 嵌入时），应启用 in parent doc 复选框。此拼图也适用于元素ID列表。

属性 | 描述
--- | ---
action | 指定 `<form>` 元素的操作URL。
alt | 指定原始元素无法显示时的替代文本。
checked | 指定复选框/单选元素的选中状态。
className | 设置元素的 class 属性的值。
cols | 指定 `<textarea>` 元素的宽度（以字符为单位）。
disabled | 指定应禁用指定的元素/元素组。
download | 指定当用户单击超链接时将下载目标。
height | 指定 `<img>`、`<audio>`、`<video>`、`<canvas>` 或 `<iframe>` 元素的高度。要指定其他元素的尺寸，请使用CSS属性。
href | 指定链接转到的页面的URL。
htmlFor | 指定 `<label>` 元素的目标元素ID。
id | 指定元素的唯一ID。
innerHTML | 设置元素的HTML内容。
loop | 指定 `<audio>`/`<video>` 在每次完成时将重新开始。
max | 指定 `<input>` 元素的最大值。
method | 指定如何将 `<form>` 元素的内容提交到服务器。也可以设置为 `"dialog"` 用于特殊的 dialog forms（对话框表单）。
min | 指定 `<input>` 元素的最小值。
muted | 指定 `<audio>`/`<video>` 元素应静音。
name | 指定元素名称。此名称用于表单提交。
placeholder | 描述应在 `<input>` 或 `<textarea>` 元素中输入的内容的提示。
rel | 指定当前文档和链接文档之间的关系。可用于 `<a>`、`<form>` 或 `<link>` 元素。
required | 布尔值，指定表单元素值是否为必填。
returnValue | `<dialog>` 元素关闭时返回的值。
rows | 指定 `<textarea>` 元素中的行数。
scrollLeft | 设置元素内容水平滚动的像素数。
scrollTop | 设置元素内容垂直滚动的像素数。
src | 指定 `<img>`、`<video>`、`<script>` 或 `<iframe>` 元素加载文件的URL。
step | 设置类型为 `"number"`、`"range"` 或 `"date"` 的 `<input>` 元素的增减值。
style | 指定元素的内联CSS样式。
tabIndex | 设置元素的 tabIndex 属性。
target | 指定打开链接文档或提交表单的目标位置。
textContent | 设置元素的文本内容。
title | 指定有关元素的额外信息。
type | 指定 `<input>` 元素的类型，例如 `"number"`、`"text"`、`"file"`、`"radio"`。
value | 指定 `<input>`、`<button>` 或 `<option>` 元素的值。
volume | 指定 `<audio>`/`<video>` 元素的音量。
width | 指定 `<img>`、`<audio>`、`<video>`、`<canvas>` 或 `<iframe>` 元素的宽度。要指定其他元素的尺寸，请使用CSS属性。

#

### get property(获取属性)

从具有指定 id 的HTML元素获取属性。如果HTML元素位于父HTML文档中（即应用的 .html 文件通过 `<iframe>` 嵌入时），应启用 in parent doc 复选框。

属性 | 描述
--- | ---
action | 获取 `<form>` 元素的操作URL。
alt | 获取原始元素无法显示时的替代文本。
checked | 获取复选框/单选元素的选中状态。
className | 获取元素的 class 属性的值。
clientHeight | 获取元素的高度，包括内边距，但不包括边框、滚动条或外边距。
clientWidth | 获取元素的宽度，包括内边距，但不包括边框、滚动条或外边距。
cols | 获取 `<textarea>` 元素的宽度（以字符为单位）。
disabled | 获取元素的禁用状态。
download | 获取元素上的download属性。
duration | 获取 `<audio>`/`<video>` 元素的播放时长。
ended | 如果 `<audio>`/`<video>` 播放已结束，则返回 `true`。
height | 获取为 `<img>`、`<audio>`、`<video>`、`<canvas>` 或 `<iframe>` 元素指定的高度。
href | 获取链接转到的页面的URL。
htmlFor | 获取 `<label>` 元素的目标元素ID。
id | 获取元素的唯一ID。
innerHTML | 获取元素的HTML内容。
innerHeight | 获取浏览器窗口视口的高度，包括滚动条（如果有）。
innerWidth | 获取浏览器窗口视口的宽度，包括滚动条（如果有）。
loop | 获取 `<audio>`/`<video>` 元素的循环播放状态。
max | 获取 `<input>` 元素的最大值。
method | 显示 `<form>` 元素内容的提交方式：`"get"`、`"post"` 或 `"dialog"`。
min | 获取 `<input>` 元素的最小值。
muted | 获取 `<audio>`/`<video>` 元素的静音状态。
name | 元素名称。
offsetHeight | 获取元素的高度，包括内边距、边框和滚动条，但不包括外边距。
offsetWidth | 获取元素的宽度，包括内边距、边框和滚动条，但不包括外边距。
paused | 如果 `<audio>`/`<video>` 播放已暂停，则返回 `true`。
placeholder | 描述应在 `<input>` 或 `<textarea>` 元素中输入的内容的提示。
rel | 获取当前文档和链接文档之间的关系。此属性可从 `<a>`、`<form>` 或 `<link>` 元素获取。
required | 布尔值，指定表单元素值是否为必填。
returnValue | `<dialog>` 元素关闭时返回的值。
rows | `<textarea>` 元素中的行数。
scrollHeight | 获取元素的高度，包括内边距，但不包括边框、滚动条或外边距。与 `clientHeight` 不同，此值包括元素的总高度，包括因滚动而不可见的内容。
scrollLeft | 获取元素内容水平滚动的像素数。
scrollTop | 获取元素内容垂直滚动的像素数。
scrollWidth | 获取元素的宽度，包括内边距，但不包括边框、滚动条或外边距。与 `clientWidth` 不同，此值包括元素的总宽度，包括因滚动而不可见的内容。
scrollX | 获取浏览器窗口水平滚动的像素数。
scrollY | 获取浏览器窗口垂直滚动的像素数。
src | 获取已加载文件的URL。
step | 获取类型为 `"number"`、`"range"` 或 `"date"` 的 `<input>` 元素的增减值。
style | 获取元素的内联CSS样式。
tabIndex | 获取元素的 tabIndex 属性。
target | 获取打开链接文档或提交表单的目标位置。
textContent | 获取元素的文本内容（及其所有子元素）。
title | 获取有关元素的额外信息。
type | 获取 `<input>` 元素的类型。
value | 获取 `<input>`、`<button>` 或 `<option>` 元素的值。
volume | 获取 `<audio>`/`<video>` 元素的音量。
width | 获取为 `<img>`、`<audio>`、`<video>`、`<canvas>` 或 `<iframe>` 元素指定的宽度。

#

### create css rule(创建CSS规则)

创建一个新的 CSS规则。如果样式表属于外部HTML文档（即应用的 .html 文件通过 `<iframe>` 嵌入时），应启用 in parent doc 复选框。

#

### style constructor(样式构造器)

创建一个由分号分隔的CSS样式声明字符串。

例如，您可以使用以下拼图创建一个位于左上角的绿色按钮：

#

### set style(设置样式)

为具有指定id的HTML元素设置一个 CSS属性。如果HTML元素位于父HTML文档中（即应用的 .html 文件通过 `<iframe>` 嵌入时），应启用 in parent doc 复选框。此拼图也适用于元素ID列表。

#

### get style(获取样式)

从具有指定id的HTML元素获取一个 CSS属性。如果HTML元素位于父HTML文档中（即应用的 .html 文件通过 `<iframe>` 嵌入时），应启用 in parent doc 复选框。

这个拼图在制作3D配置器类应用时非常有用。例如，您可以使用以下设置，从一些HTML元素的背景颜色中指定材质颜色：

#

### set css rule(设置CSS规则)

为指定的CSS规则（可在应用的 .css 文件中找到）设置一个 CSS属性。如果样式表属于父HTML文档（即应用的 .html 文件通过 `<iframe>` 嵌入时），应启用 in parent doc 复选框。

#

### on event of(在事件发生时)

为具有指定id的HTML元素注册一个事件监听器。如果HTML元素位于父HTML文档中（即应用的 .html 文件通过 `<iframe>` 嵌入时），应启用 in parent doc 复选框。一旦有事件发生，放在 do 插槽中的拼图就会被触发。也适用于元素ID列表。

事件 | 描述
--- | ---
beforeunload | 页面即将卸载时发生。
blur | 某个元素失去焦点时发生。在大多数情况下，此事件注册在 window 对象上，以检测浏览器标签何时不再活动。
change | `<input>`、`<select>` 或 `<textarea>` 发生变化时发生。
click | 元素被点击时发生的事件。这是最常用的事件。
contextmenu | 浏览器标准右键菜单被调用时发生的事件。它允许您覆盖或禁用此菜单。
dblclick | 元素被双击时发生的事件。
deviceready | 仅用于 Cordova 应用。应用完全加载时触发。
ended | `<audio>` 或 `<video>` 播放结束时触发。
focus | 某个元素获得焦点时发生。在大多数情况下，此事件注册在 window 对象上，以检测浏览器标签何时再次活动。
fullscreenchange | 元素切换到（或退出）全屏模式时发生。在大多数情况下，此事件注册在 document 对象上。
input | `<input>` 或 `<textarea>` 发生变化时发生。
keydown | 用户按下某个键盘按键时触发。事件的 `key` 属性包含按下的键。参见 Keyboard Controls 库中的工作方式。
keypress | 用户按下某个键盘按键时触发。此事件已被弃用，请始终使用 `keydown` 事件代替。
keyup | 用户释放某个键盘按键时触发。事件的 `key` 属性包含释放的键。参见 Keyboard Controls 库中的工作方式。
load | 页面或元素加载完成时发生。最常用于注册此事件的实体是 window（整个页面）和 `<img>`（处理图像完全加载的时刻）。
message | 用于处理来自其他框架的传入消息，可能位于不同的主机上。事件的 `data` 属性包含接收到的消息。
mousedown | 鼠标按钮在元素上按下时发生。
mouseenter | 鼠标指针移入元素时发生。
mouseleave | 鼠标指针移出元素时发生。
mousemove | 鼠标指针在元素上移动时发生。
mouseout | 鼠标指针移出元素时发生。
mouseover | 鼠标指针移入元素时发生。
mouseup | 鼠标按钮在元素上释放时发生。
pause | `<audio>` 或 `<video>` 播放暂停时触发。
pointercancel | 不太可能再有更多指针事件时发生。
pointerdown | 指针在元素上按下时发生。
pointerenter | 指针移入元素时触发。
pointerleave | 指针移出元素时发生。
pointermove | 指针在元素上移动时发生。
pointerout | 指针移出元素时发生。
pointerover | 指针移入元素时触发。
pointerup | 指针在元素上释放时发生。
resize | 浏览器窗口调整大小时发生。应注册在 body 元素上。
resume | `<audio>` 或 `<video>` 播放恢复时触发。
scroll | 滚动条被滚动时发生。
submit | `<form>` 提交时发生。
touchend | 手指从触摸屏上移开时发生。
touchemove | 手指在屏幕上拖动时触发。
touchstart | 手指放在触摸屏上时发生。
wheel | 鼠标滚轮在元素上滚动时发生。

#

### get event property(获取事件属性)

输出由 on event of 拼图生成的事件属性值。也支持在 when clicked、when hovered 和 when dragged 拼图中使用。

事件属性 | 描述
--- | ---
button | 按下的鼠标按钮：`0` — 左键，`1` — 中键（滚轮），`2` — 右键。
code | 触发 `keydown`、`keypress` 或 `keyup` 事件的键的代码。例如，代码 `"ArrowLeft"` 用于左箭头键，而 `"KeyA"` 用于 A 键（大写或小写）。
data | 事件数据。为 `input` 或 `message` 事件设置。
deltaY | `wheel` 事件的垂直滚动量（以像素为单位）。
isPrimary | 指示主指针。为指针事件分配，例如 `pointerdown`。
pageX, pageY | 鼠标指针或触摸的X和Y坐标。适用于 `click`、`dblclick`、`mouse...` 或 `pointer...` 事件。不适用于 `touch...` 事件（请改用 touches[].pageX/pageY 或 targetTouches[].pageX/pageY 属性）。
key | 触发 `keydown`、`keypress` 或 `keyup` 事件的键盘键名称。例如，`"ArrowLeft"` 用于左箭头键，而 `"а"` 用于小写 A 键。
offsetX, offsetY | 鼠标指针或触摸的X和Y坐标。适用于 `click`、`dblclick`、`mouse...` 或 `pointer...` 事件。不适用于 `touch...` 事件。
pointerId | 指针标识符。用于处理多点触控交互。
pointerType | 指针设备类型：`"mouse"`、`"pen"` 或 `"touch"`。
target.checked | 发生事件的复选框/单选元素的选中状态。
target.id | 发生事件的元素的ID。
target.value | 发生事件的 `<input>`、`<button>` 或 `<option>` 元素的值。
touches.length | 当前与表面接触的触摸点数量。
touches[0].pageX, touches[0].pageY touches[1].pageX, touches[1].pageY | 第一个/第二个指针的X和Y坐标。
targetTouches.length | 当前与表面接触的触摸点数量。
targetTouches[0].pageX, targetTouches[0].pageY targetTouches[1].pageX, targetTouches[1].pageY | 第一个/第二个指针的X和Y坐标。
which | 按下的鼠标按钮：`1` — 左键，`2` — 中键（滚轮），`3` — 右键。此属性已被弃用，请始终使用 `button` 属性代替。

#

### DOM object selector(DOM对象选择器)

根据选择的实体，此拼图返回：

container
  画布容器元素——包含渲染场景的HTML元素。
window
  DOM窗口对象——浏览器标签或加载HTML文档的 `<iframe>`。
document
  DOM文档对象——HTML文档的根节点。
body
  DOM主体对象——HTML文档的 `<body>` 元素。

#

### query selector(查询选择器)

返回第一个匹配指定 CSS选择器 的HTML元素。

#

### call method(调用方法)

为指定的DOM对象调用方法：元素或事件。

支持的方法包括：

blur
  使指定的HTML元素失去焦点。
click
  模拟点击元素。
close
  关闭元素。此方法仅适用于 `<dialog>` 元素和 `window` 对象。
focus
  将焦点设置到指定的HTML元素。获得焦点的元素会接收键盘输入，例如当用户按下 Enter/Space 键时。
postMessage
  向指定的 `<iframe>` 元素或 `window` 对象发送消息。消息可以是任何类型：字符串、数字、数组、字典等。
preventDefault

  应在 事件处理器 内调用。执行后，浏览器不会对当前事件做出反应。例如，如果您为某个复选框分配了 `click` 事件处理器并调用 `preventDefault`，则复选框不会做出反应。

show
  显示 `<dialog>` 窗口。
showModal
  显示 `<dialog>` 窗口并阻止与页面的任何交互，直到对话框关闭。
stopPropagation

  应在 事件处理器 内调用。执行后，浏览器禁止当前事件的传播（例如调用其他元素的事件处理器）。例如，如果您为 `document` 分配了 `keydown` 事件处理器并调用 `stopPropagation`，键盘将不会对场景起作用（例如 WASD 或箭头键不会移动摄像机）。

#

### create canvas elem(创建canvas元素)

创建一个具有 id、width 和 height 属性的canvas元素。将此拼图与 replace texture(替换纹理) 拼图一起使用，可用于创建画布纹理。

画布创建完成后，即可通过JavaScript在上面绘图了。您可以在 your_app_name.js 模块的 runCode() 函数中更新画布，或者使用 exec script(执行脚本) 拼图。

要更新画布，可通过ID（指定的 id 属性）检索画布纹理：

`const canvasTex = puzzles.canvasTextures['my_canvas'];`

之后，您可以按以下方式访问HTML画布元素：

`const canvas = canvasTex.image;`

您可以使用可用于在HTML画布上绘图的标准方法。例如，以下代码在白色背景上绘制了一张蓝色的笑脸：

`const ctx = canvas.getContext("2d"); ctx.fillStyle = 'white'; ctx.strokeStyle = 'blue'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.beginPath(); ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // 外圆 ctx.moveTo(110, 75); ctx.arc(75, 75, 35, 0, Math.PI, false); // 嘴巴（顺时针） ctx.moveTo(65, 65); ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // 左眼 ctx.moveTo(95, 65); ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // 右眼 ctx.stroke();`

最后，如果您想让更新在3D渲染中立即可见，应将画布纹理标记如下：

`canvasTex.needsUpdate = true;`

有关使用示例，请查看 Canvas Texture 演示（也可在资源商店中找到）。

#

### draw line(画线)

通过一个动态更新的线条将指定的3D对象与指定的HTML元素连接起来。

如果HTML元素位于父HTML文档中（即应用的 .html 文件通过 `<iframe>` 嵌入时），应启用 in parent doc 复选框。您也可以为线条设置宽度（以像素为单位）、颜色（CSS）和偏移（以像素为单位）。此拼图也适用于对象列表、组（或组列表）或与 all objects(所有对象) 拼图一起使用。

此拼图对单个对象仅支持一条线。创建的线对象将获得一个独特的名称，例如如果原始对象名为 `"Cube"`，则为 `"CubeLine"`。线对象将作为该对象的子对象添加。

#

### remove line(移除线)

从指定对象中移除一条先前创建的线。

#

### bind element(绑定元素)

使一个指定的HTML元素在屏幕空间中跟随一个指定的3D对象的中心。如果HTML元素位于父HTML文档中（即应用的 .html 文件通过 `<iframe>` 嵌入时），应启用 in parent doc 复选框。

注意：

您可以使用 add annotation(添加注解) 拼图来代替，并参照 这里 的描述定制注解的外观。

#

### unbind element(解除绑定元素)

取消绑定以前绑定到对象的指定HTML元素。如果HTML元素位于父HTML文档中（即应用的 .html 文件通过 `<iframe>` 嵌入时），应启用 in parent doc 复选框。

#

### init fullscreen(初始化全屏)

设置一个指定的HTML元素为全屏模式按钮——第一次点击进入全屏模式，第二次点击退出全屏。放在 on enter do 和 on exit do 插槽里的拼图会在进入或退出全屏模式时被触发。如果浏览器不支持全屏（例如iPhone上的Safari浏览器），放在 if unavailable do 插槽中的拼图会被触发。

#

### open web page(打开网页)

当此拼图被触发时，根据下拉选择，一个指定的URL会在一个新的或同一浏览器标签内打开。当从拼图编辑器中触发时，跳出当前页面前会弹出确认提示。

选项：

a new tab
  在新标签中打开URL。为克服浏览器阻止打开新标签的限制，您必须在 when clicked(当点击时) 或 on event of(在事件发生时) 拼图中使用此拼图。
the same tab
  在同一标签内打开。
the same tab (ignore frames)
  在同一标签内打开。用于让嵌入的iframe应用在最顶层的浏览上下文中打开页面。
the same tab (parent frame)
  在同一标签内打开。用于让嵌入的iframe应用在父级浏览上下文中打开页面。
replace URL (no reload)
  仅将指定的URL放入浏览器地址栏中。

#

### social share link(社交网站分享链接)

生成一个链接，以便在主流社交媒体上分享你的应用。

在大多数情况下，此拼图用于将链接作为输入传递给 open web page(打开网页) 拼图，或指定 `<a>` 元素的 `href` 属性。

#

### set URL param(设置URL参数)

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

当一个应用的配置数据被存储在其URL中时，此拼图会很有用。例如，您可以通过以下方式指定一张图片作为纹理使用：

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

您可以上传一个纹理，检索其服务器端的路径，并将其保存到应用URL的 image_url 参数中，如下所示：

有关使用示例，请查看 Custom Image 演示（也可在资源商店中找到）。

#

### take screenshot(截屏)

获取视口的截图并以 Data URL 格式输出。在下拉列表中可以指定结果图像的格式。

例如，您可以向用户提供保存产品"照片"的功能：

您还需要使用 configure application(配置应用) 拼图为应用启用截屏，否则将会生成全黑的图像。

#

### get URL data(获取URL数据)

检索应用被加载到的窗口的URL数据：

entire URL
  完整的页面URL，例如 "https://www.example.com/my_awesome_app.html?image_url=https://www.uploadserver.com/path/to/image.jpg"。
page name
  URL的名称部分，例如 "https://www.example.com/my_awesome_app.html" 中的 "my_awesome_app.html"。
parameters
  页面参数字典，例如 {"image_url": "https://www.uploadserver.com/path/to/image.jpg"}。
host name
  主机名，例如 "www.example.com"。

如果HTML元素位于父HTML文档中（即应用的 .html 文件通过 `<iframe>` 嵌入时），应启用 in parent doc 复选框。

当一个应用的配置数据被存储在其URL中时，此拼图会很有用。例如，您可以通过以下方式指定一张图片作为纹理使用：

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

然后您可以检索 image_url 参数，加载并应用该纹理，方法如下：

有关使用示例，请查看 Custom Image 演示（也可在资源商店中找到）。

#

### download file(下载文件)

下载以 Data URL 格式指定的内容到一个文件中。您也可以传递文本、字典或 列表数据，作为文本或JSON文件下载。在这种情况下，给定的对象将被自动转换为适当的Data URL。

此拼图可用于以下情境：

- 保存先前截取的屏幕截图
- 通过保存字典（或列表）到 *.json 文件来保存应用状态
- 以glTF格式导出模型，以便进一步处理
- 生成文本式的价格信息、报价、报告等

#

### open file(打开文件)

调用浏览器的本地对话窗口，从用户的设备中选择文件。当用户选择了文件后，通过 opened file(打开的文件) 拼图返回文件的内容/信息。

#

### opened file(打开的文件)

返回文件内容或元数据。

选项：

data
  以 Data URL 格式编码的文件内容。
name
  文件名。
extension
  不带点号的文件扩展名：txt、jpg、mp3 等...
size
  以字节为单位的文件大小。
mime type

  文件媒体类型（又名MIME类型）。Verge3D应用通常使用的MIME类型列表包括：

  application/json | JSON文件，也可用于glTF资产。
  application/octet-stream | 二进制(.bin)文件。
  application/pdf | PDF文档。
  audio/mpeg | MP3音频。
  image/jpeg | JPEG图像。
  image/png | PNG图像。
  image/webp | WebP图像。
  text/csv | 使用逗号分隔值的(CSV)文件。
  text/plain | 纯文本文件(TXT)。
  video/mp4 | MPEG-4视频。

#

### drop file to(将文件拖到)

返回一个从文件管理器（或其他程序）拖拽的文件，并将其放置在浏览器窗口内给定的HTML元素上。当用户拖放该文件后，通过 opened file(打开的文件) 拼图返回其内容/信息。

您可以激活可选的 drag over 插槽来处理文件移动事件。例如，您可以将其与 raycast(射线) 拼图一起使用，以突出光标或触摸点下方的对象。

#

## 如何指定Web资源的URL路径

部分拼图在使用时需指定其所需要使用的Web资源的URL（又叫做URI）路径，例如：

- open web page(打开网页) — 将要打开的网页地址。
- replace texture(替换纹理) — 纹理的路径。
- load sound(加载声音) — 声音资产的路径。
- load video(加载视频) — 视频资产的路径。
- load scene(加载场景) — glTF资产。
- create text object(新建文本对象) — 字体。

对于此处提到的URL路径，您需要了解，这些路径与您在本地计算机中看到的路径完全不同，因为Web上的所有资源都是间接访问的——通过 Web浏览器 从 Web服务器 获取资源。

基本上这意味着您永远不应该使用这样的URL路径：

- C:\Users\User\Documents\verge3d_apps\my_app\my_scene.gltf
- /Users/User/Downloads/my_sound.mp3
- /home/user/Desktop/my_texture.jpg

Web中的路径仅使用正斜杠(/)指定，可以是：

相对路径

  这些路径是相对于应用主HTML文件指定的：

  - my_scene.gltf — 位于与应用HTML文件相同目录中的场景。
  - ./my_scene.gltf — 位于与应用HTML文件相同目录中的场景。
  - sounds/my_sound.mp3 — 位于应用HTML存储目录的 sounds 子目录中的声音。
  - ../textures/my_texture.jpg — 位于 textures 目录中的纹理，该目录位于应用HTML文件目录的上一层中（因此这里有两个点）。

  在大多数相关拼图中，您应该使用相对路径。

绝对路径

  当您知道资源在 Web服务器 上的确切位置时，可以使用绝对路径：

  - https://www.my-host.com/my_app/my_scene.gltf — 存储在 my-host 服务器上 my_app 目录中的场景。
  - /my_app/fonts/my_font.woff — 存储在任意主机（名称未知或无关紧要）的 my_app 目录的 fonts 子目录中的字体。
Data URL
  一种特殊类型的URL，表示未存储在Web服务器上的编码资源。我们用此类链接返回由某些拼图生成或检索的数据。在下方了解更多。

此外，由于大多数服务器运行Linux，其文件系统是 区分大小写 的（Verge3D Network也是如此），您应始终注意资源的命名方式。例如，以下路径：

- my_texture.jpeg
- My_texture.jpeg
- My_Texture.jpeg

代表不同的纹理！

#

## Data URL链接

Data URL（又称为Data URI）是一种方便的方法，可以将各种资产（如图像、glTF场景（模型）、声音、JSON或CSV）嵌入到链接中（技术资料）。

例如，下面的链接代表了小的Verge3D logo：

`data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAALGPC/xhBQAAACBjSFJN AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABvFBMVEUAAAAASKUAAFsAvukA RaMA3voAAEoARaQARKMARqQARqQARKMARaQARqQAQ6IATagCcLwCcbwATagARqQASaYARqQASKUC argASKUARqQASqYASKUAR6QAT6kAT6kAR6QAR6UASaUASaUAR6UARKMBWq8BWq8ARKMAQqECaLcC abgAQqEAQaECbboCbroAQaECbrsCbroCabcCa7kCb7sCbrsARaQARaQElNAEldEGrd4GseEDg8cD hcgGtOIGrt8Eks8I1/cFqNwBUqsAQ6IBVKwGrN4Ekc8El9IJ5/8HvOcBU6sASqYDdb8CdL4ASaYB VawHv+gJ5/4EltII0PIJ4PsCc70ARqQEjs0J4vwJ4fsEi8sARaMDdr8J4fwI0fIJ3/sGuuYATKcC ZbYI1fUHyfMHyPMI0/QCYrQATagHvecJ4PwEj80ARKMFnNQHyvMBU8IBUsEFmNII3PkHwuoIyvQH vugAS6cDecEI1/YCbrsBWK4I0vMJ5v8HyPIIz/ICcr0I2PcIz/EDgMUBXrEJ6P8I1vYBW7ADhMcC cb0Hv+kFmNMEkM4GueUJ4PoJ3/oJ3voI3foEltH///+98SuhAAAAOHRSTlMAAAAAAAAAJJPu8Jgn EWjT/v7VEAVLvvq8RwQFe/LweDXn6DdT9/hXWvn6XVv5+lz6+fn6/v7w7sPq7QcAAAABYktHRJPh A9+2AAAACXBIWXMAAA3XAAAN1wFCKJt4AAAAB3RJTUUH4QsCEC4OPIwcRgAAAQpJREFUGNNjYGBg YGRi5+Dk4uZhZmQAAUYWXj5+AQtLQSE+YRagEKOIqJi4lbWNrZ29uISkFCODtIysg6OTs4uLq5uj u5y8NIOCooenl7ePr59/QGBQsJIyg4pqSGhYeERkVHRMbFy8mjqDhmZCYlJySmpaekZmVoKWNoOO bnZObl5+QWFqUa5DnJ4+g75BsW9SSWlBQX5ZeUWxoQ6DtnhlVXVNbVpdbX1AQ6ORBoO6WlNzS6Nn a6tnW3tHk6oKg7JSkVdYpWdtrWdKZ1e3ogKDtLxcT28fSKA/0UFWRpqBUUpSwth+QmvrRHtjMVER kGdYhPmETCZZmvLz8bJA/cvKw21mzsHOBuICAHx4PYwwa1fDAAAAJXRFWHRkYXRlOmNyZWF0ZQAy MDE3LTExLTAyVDE2OjQ2OjE0KzAxOjAwKvGBdAAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNy0xMS0w MlQxNjo0NjoxNCswMTowMFusOcgAAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb7jwa AAAAV3pUWHRSYXcgcHJvZmlsZSB0eXBlIGlwdGMAAHic4/IMCHFWKCjKT8vMSeVSAAMjCy5jCxMj E0uTFAMTIESANMNkAyOzVCDL2NTIxMzEHMQHy4BIoEouAOoXEXTyQjWVAAAAAElFTkSuQmCC`

复制整个片段并粘贴到浏览器地址栏中即可显示该logo：

在拼图中，我们广泛使用Data URL链接，因为它们提供了在不同拼图块之间传递类文件数据的便捷方式。例如，您可以使用 open file(打开文件) 或 drop file to(将文件拖到) 拼图加载某些文件（图像或数据）。然后您可以根据该文件对您的场景进行修改。之后，您可以通过 download file(下载文件) 拼图将修改后的场景（或数据，比如价格表文件）上传到用户机器上，或通过 send data(发送数据) 拼图将该文件上传到服务器。在所有这些情况中，数据都将使用Data URL格式传输。

有关使用示例，请查看 Custom Image 演示（也可在资源商店中找到）。

调试Data URL格式的数据也很容易。只需使用 print to console(打印到控制台) 拼图，然后打开 浏览器控制台 来观察输出，然后点击控制台内打印的URL，在单独的浏览器标签中预览数据。

## 在使用拼图时遇到困难？

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