HTML拼图

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

内容

什么是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)，在线寻求帮助。