Пазлы HTML

Эти пазлы управляют HTML-элементами.

Содержание

Что такое HTML DOM?

HTML DOM (HyperText Markup Language Document Object Model, смотрите техническую документацию здесь) — это программный интерфейс к HTML-странице. Он позволяет вам изменять свое приложение не только путем редактирования его кода, но и путем выполнения различных пазлов. Например, вы можете добавлять новые элементы HTML, настраивать внешний вид страницы, рисовать что-то поверх ваших моделей, делать снимки экрана, загружать файлы и т.д.

Перечень пазлов

add HTML element

Создает элемент HTML с указанным типом и идентификатором (соответствует атрибуту id) и добавляет внутрь (to), непосредственно перед (before) или сразу после (after) указанного существующего HTML-элемента.

Переключатель in parent doc должен быть установлен, если создаваемый HTML-элемент должен находиться во внешнем HTML-документе (в который .html-файл 3Д-приложения подключается с помощью элемента <iframe>).

Например, чтобы создать красную ссылку на официальный сайт «Софт Эйт Софт», можно использовать следующие пазлы:

Поддерживаемые элементы:

Элемент Описание
a Ссылка. Используйте свойство "href", чтобы назначить адрес ссылки и "textContent" либо "innerHTML", чтобы назначить её текст. Кроме того, вы можете добавить любой кликабельный элемент внутрь этой ссылки с использованием того же пазла add HTML element.
b Отображает внутренний текст (назначаемый с помощью свойств "textContent" и "innerHTML") полужирным шрифтом.
br Разделитель строки.
button Кнопка.
canvas Низкоуровневый элемент для рендеринга 2Д или 3Д-графики.
dialog Определяет диалоговый элемент.
div Определяет контейнер для других элементов. С помощью CSS может быть настроен для представления всего: иконок, изображений, кнопок, прелоадеров и др.
form Определяет форму — элемент-контейнер для <input> и <textarea> элементов, в свою очередь представляющих поля этой формы.
h1..h6 Заголовки страниц, от самых больших к самым маленьким. Текст заголовка указывается в свойстве "textContent".
iframe Определяет вложенное окно страницы (или подстраницу). УРЛ подстраницы указывается в свойстве "src".
img Элемент изображения. УРЛ данного изображения указывается в свойстве "src".
input Элемент ввода пользовательских данных. Свойство "type" определяет тип этого элемента, например: "text", "checkbox", "file", "radio", "number", и т.д.
label Элемент метки. Используется для указания текстовых надписей к полям формы, таким как <input> или <textarea>.
li Элемент пункта списка. Является дочерним элементом для <ul> и <ol>, определяющих неупорядоченный и упорядоченных списки соответственно.
link Элемент, используемый для подключения CSS-стилей и для определения брузерных иконок.
ol Упорядоченный список. Используйте элементы <li> чтобы определить пункты этого списка.
option Элемент опции родительского элемента <select>.
p Определяет параграф. Текстовое наполнение параграфа указывается в свойстве "textContent".
script Используется для включения (и запуска) «Ява Скрипта». УРЛ этого скрипта указывается в свойстве "src".
select Определяет выпадающий список. Используйте элементы <option> чтобы определить пункты этого списка.
span Определяет контейнер для текста.
style Используется для подключения CSS-стилей. Код CSS указывается в свойстве "textContent".
table Таблица.
td Определяет ячейку таблицы <table>.
th Определяет заголовочную ячейку таблицы <table>.
tr Определяет строку таблицы <table>.
textarea Многострочный текст.
ul Неупорядоченный список. Используйте элементы <li> чтобы определить пункты этого списка.
video Видео-элемент. УРЛ видео файла указывается в свойстве "src".

remove HTML element

Удаляет HTML-элемент с указанным идентификатором. Переключатель in parent doc должен быть установлен, если HTML-элемент находится во внешнем HTML-документе (в который .html-файл 3Д-приложения подключается с помощью элемента <iframe>).

set property

Устанавливает свойство HTML-элемента с указанным идентификатором (id). Переключатель in parent doc должен быть установлен, если HTML-элемент находится во внешнем HTML-документе (в который .html-файл 3Д-приложения подключается с помощью элемента <iframe>). Пазл также работает со списками идентификаторов элементов.

Свойство Описание
action Указывает на УРЛ обрабатывающий отправку формы <form>.
alt Устанавливает текст элемента, показываемый в случае если элемент не может быть показан.
checked Показывает установлен ли элемент checkbox/radio.
className Устанавливает атрибут элемента class.
disabled Указывает что данный элемент или группа элементов должна быть выключена.
download Указывает что target данного элемента будет загружаться по клику на элементе.
height Определяет высоту элементов <img>, <audio>, <video>, <canvas> или <iframe>. Чтобы указать размеры для других элементов, используйте свойства CSS.
href Указывает УРЛ назначения для элемента-ссылки.
htmlFor Определяет элемент, связанный с элементом-ссылкой <label>.
id Определяет уникальный идентификатор элемента.
innerHTML Устанавливает внутренний HTML элемента.
loop Указывает на то что <audio>/<video> должны зацикливать воспроизведение.
max Устанавливает максимальное значение для элемента <input>.
method Определяет каким образом отправлять на сервер содержимое элемента-формы <form>. Также может быть установлен в "dialog", указывающий на специальные диалоговые формы.
min Устанавливает минимальное значение для элемента <input>.
muted Указывает что <audio>/<video> элементы должны воспроизводиться без звука.
name Определяет имя элемента. Это имя используется при отправки форм.
placeholder Краткое указание на то, что должно находиться в элементах <input> и <textarea>.
rel Указывает на отношение текущего документа и связанного с ним документа. Используется для <a>, <form>, или <link>.
required Логическое значение указывающее на то, требуется ли вводить значение для данного поля формы.
returnValue Значение возвращаемое после закрытия диалога <dialog>.
scrollLeft Указывает количество пикселей прокручивания в горизонтальном направлении.
scrollTop Указывает количество пикселей прокручивания в вертикальном направлении.
src Указывает УРЛ файла, загружаемого элементами <img>, <video>, <script> и <iframe>.
step Интервал увеличения/уменьшения значений для элементов <input> типов "number", "range" и "date".
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

Получает значение свойства HTML-элемента с заданным идентификатором id. Переключатель in parent doc должен быть установлен, если HTML-элемент находится во внешнем HTML-документе (в который .html-файл 3Д-приложения подключается с помощью элемента <iframe>).

Свойство Описание
action Получает УРЛ обрабатывающий отправку формы <form>.
alt Получает текст элемента, показываемый в случае если элемент не может быть показан.
checked Показывает установлен ли элемент checkbox/radio.
className Получает атрибут элемента class.
clientHeight Получает высоту элемента, включая заполнение, но исключая рамку, прокрутку и надбавку.
clientWidth Получает ширину элемента, включая заполнение, но исключая рамку, прокрутку и надбавку.
disabled Указывает что данный элемент или группа элементов должна быть выключена.
download Указывает что target данного элемента будет загружаться по клику на элементе.
duration Время воспроизведения элементов <audio>/<video>.
ended Возвращает true если элементы <audio>/<video> закончили воспроизведение.
height Определяет высоту элементов <img>, <audio>, <video>, <canvas> или <iframe>. Чтобы указать размеры для других элементов, используйте свойства CSS.
href Указывает УРЛ назначения для элемента-ссылки.
htmlFor Определяет элемент, связанный с элементом-ссылкой <label>.
id Определяет уникальный идентификатор элемента.
innerHTML Получает внутренний HTML элемента.
innerHeight Получает высоту браузерного окна, включая элемент прокрутки (если есть).
innerWidth Получает ширину браузерного окна, включая элемент прокрутки (если есть).
loop Указывает на то что <audio>/<video> должны зацикливать воспроизведение.
max Получает максимальное значение для элемента <input>.
method Определяет каким образом отправлять на сервер содержимое элемента-формы <form>. Также может быть установлен в "dialog", указывающий на специальные диалоговые формы.
min Получает минимальное значение для элемента <input>.
muted Указывает что <audio>/<video> элементы должны воспроизводиться без звука.
name Определяет имя элемента. Это имя используется при отправки форм.
offsetHeight Получает высоту элемента, включая заполнение, рамку и прокрутку, но исключая надбавку.
offsetWidth Получает ширину элемента, включая заполнение, рамку и прокрутку, но исключая надбавку.
paused Returns true if <audio>/<video> playback was paused.
placeholder Краткое указание на то, что должно находиться в элементах <input> и <textarea>.
rel Указывает на отношение текущего документа и связанного с ним документа. Используется для <a>, <form>, или <link>.
required Логическое значение указывающее на то, требуется ли вводить значение для данного поля формы.
returnValue Значение возвращаемое после закрытия диалога <dialog>.
scrollHeight Получает высоту элемента, включая заполнение, но исключая рамку, прокрутку и надбавку. В отличие от свойства clientHeight это значение включает общую высоту элемента, включая область невидимую пользователю из-за прокрутки.
scrollLeft Указывает количество пикселей прокручивания элемента в горизонтальном направлении.
scrollTop Указывает количество пикселей прокручивания элемента в вертикальном направлении.
scrollWidth Получает ширину элемента, включая заполнение, но исключая рамку, прокрутку и надбавку. В отличие от свойства clientWidth это значение включает общую ширину элемента, включая область невидимую пользователю из-за прокрутки.
scrollX Указывает количество пикселей прокручивания браузерного окна в горизонтальном направлении.
scrollY Указывает количество пикселей прокручивания браузерного окна в вертикальном направлении.
src Указывает УРЛ файла, загружаемого элементами <img>, <video>, <script> и <iframe>.
step Интервал увеличения/уменьшения значений для элементов <input> типов "number", "range" и "date".
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.

create css rule

Создает новое правило CSS. Переключатель in parent doc должен быть установлен, если HTML-элемент находится во внешнем HTML-документе (в который .html-файл 3Д-приложения подключается с помощью элемента <iframe>).

style constructor

Создаёт строку с определениями CSS-стилей, разделёнными точкой с запятой.

Следующий пример позволяет сделать зелёную кнопку, расположенную в левом верхнем углу:

set style

Устанавливает CSS-свойство для HTML-элемента с указанным id. Переключатель in parent doc должен быть установлен, если HTML-элемент находится во внешнем HTML-документе (в который .html-файл 3Д-приложения подключается с помощью элемента <iframe>). Также работает со списками идентификаторов элементов.

get style

Получает CSS-свойство из HTML-элемента с указанным id. Переключатель in parent doc должен быть установлен, если HTML-элемент находится во внешнем HTML-документе (в который .html-файл 3Д-приложения подключается с помощью элемента <iframe>).

Этот пазл бывает очень полезен для создания 3Д-конфигураторов. Например, вы можете использовать следующий блок пазлов для назначения цвета материала на основании цвета фона HTML-элемента:

set css rule

Устанавливает CSS-свойство для указанного правила CSS (находится в .css файлах приложения). Переключатель in parent doc должен быть установлен, если таблицы стилей принадлежат внешнему HTML-документу (в который .html-файл 3Д-приложения подключается с помощью элемента <iframe>).

event

Регистрирует обработчик события для HTML-элемента с указанным id. Переключатель in parent doc должен быть установлен, если HTML-элемент находится во внешнем HTML-документе (в который .html-файл 3Д-приложения подключается с помощью элемента <iframe>). Как только происходит событие, срабатывают пазлы, помещенные в слот do. Также работает со списками идентификаторов элементов.

Собыите Описание
beforeunload Происходит перед выгрузкой страницы.
blur Происходит когда элемент теряет фокус. В большинстве случаев обработчик этого события регистрируется на объекте window, чтобы определить момент переключения браузерной вкладки.
change Происходит при изменении элементов <input>, <select> и <textarea>.
click Вызывается по нажатию на элемент. Это событие используется наиболее часто.
dblclick Вызывается по двойному нажатию на элемент. Это событие используется наиболее часто.
deviceready Используется для «Кордова»-приложений. Вызывается когда приложение полностью загружено.
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 Происходит в момент прокрутки.
touchend Происходит когда палец отпускается от экрана.
touchemove Происходит при движении пальцем над экраном.
touchstart Происходит когда палец только что коснулся экрана.
wheel Происходит в момент прокрутки колёсиком мыши.

get event property

Выводит значение свойства события, сгенерированного пазлом event.

Свойство события Описание
button Нажатая кнопка мыши: 0 — левая, 1 — средняя (колёсико), 2 — правая.
code Код клавиши для событий keydown, keypress и keyup. Например, "ArrowLeft" используется для клавиши левой стрелки, тогда как "KeyA" (лат.) для клавиши *Ф* (строчной или прописной).
data Данные события. Устанавливается для событий input и message.
isPrimary Указывает на первичный указатель. Устанавливается для событий указателей, например pointerdown.
pageX, pageY Координаты указателя мыши или пальца. Работает с событиями click, dblclick, mouse... и pointer....
key Имя нажатой клавиши для событий keydown, keypress, or keyup event. Например, "ArrowLeft" используется для клавиши левой стрелки, тогда как "ф" для клавиши *Ф* (строчной).
offsetX, offsetY Координаты указателя мыши или пальца. Работает с событиями click, dblclick, mouse... и pointer....
pointerType Тип указательного устройства: "mouse" (мышь), "pen" (карандаш) или "touch" (палец).
target.checked Состояние элемента checkbox/radio для которого произошло событие.
target.id Идентификатор элемента для которого произошло событие.
target.value Значение элементов <input>, <button> и <option> для которых произошло событие.
touches.length Количество пальцев на экране в данный момент.
touches[0].pageX, touches[0].pageY
touches[1].pageX, touches[1].pageY		 Координаты первого или второго указателя (пальца).
targetTouches.length Количество пальцев на экране в данный момент.
targetTouches[0].pageX, targetTouches[0].pageY
targetTouches[1].pageX, targetTouches[1].pageY		 Координаты первого или второго указателя (пальца).
which Нажатая кнопка мыши: 1 — левая, 2 — средняя (колёсико), 3 — правая. Свойство объявлено устаревшим, вместо него следует использовать свойство button.

DOM object selector

В зависимости от выбранного в выпадающем списке пункта возвращает:

container
Контейнер, содержащий 3Д-холст — элемент, содержащий отображаемую сцену.
window
window — объект представляющий браузерное окно или содержимое элемента <iframe>.
document
document — корневой узел HTML-документа.
body
body — элемент <body> представляющий тело HTML документа.

query selector

Возвращает первый HTML-элемент, который соответствует заданному селектору CSS.

call method

Вызывает метод для указанного DOM-объекта: элемента или события.

Поддерживаемые методы:

blur
Выводит заданный HTML-элемент из фокуса.
click
Имитирует событие нажатия на элементе.
close
Закрывает элемент. Метод работает только для элемента <dialog> и объекта window.
focus
Устанавливает фокус на заданном HTML-элементе. Сфокусированные элементы получают события от клавиатуры, например когда пользователь нажимает клавиши «ввод» или «пробел».
postMessage
Отправляет событие элементу <iframe> или объекту window. Событие может быть любого типа: строка, число, массив, словарь, и т.д.
preventDefault

Должен вызываться внутри пазла event handler. Вызов метода означает, что браузер не будет реагировать на данное событие. Например, если вы назначили обработчик события click на каком-нибудь переключателе, preventDefault будет блокировать его переключение.

show
Показать окно диалога <dialog>.
showModal
Показать окно диалога <dialog> и блокировать любые взаимодействия со страницей, пока этот диалог не будет закрыт.
stopPropagation

Должен вызываться внутри пазла event handler. Вызов метода означает, что браузер заблокирует распространение текущего события (т.е. вызов обработчиков других элементов). Например, если вы назначили обработчик события keydown на документе document и вызывали stopPropagation, клавиатура перестанет работать (в частности клавиши ЦФЫВ больше не будут перемещать камеру).

create canvas elem

Создает элемент холста с атрибутами id, width (ширина) и height (высота). Используйте этот пазл вместе с replace texture для создания текстур холста.

Созданный холст становится доступным для рисования с помощью «Ява Скрипта». Вы можете обновить холст внутри функции runCode() модуля your_app_name.js или с помощью пазла exec script.

Чтобы обновить холст, получите текстуру холста по ее идентификатору (указанному в атрибуте id):

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

После этого вы можете получить доступ к элементу HTML canvas следующим образом:

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();

Наконец, если вы хотите, чтобы обновления холста сразу же отображались на текстуре, вам следует пометить текстуру холста соответствующим образом:

canvasTex.needsUpdate = true;

Данная функциональность используется в демо-приложении «Текстура холста» (исходные файлы доступны в магазине ассетов).

draw line

Соединяет указанный 3Д-объект с указанным HTML-элементом динамически обновляемой линией. Переключатель in parent doc должен быть установлен, если HTML-элемент находится во внешнем HTML-документе (в который .html-файл 3Д-приложения подключается с помощью элемента <iframe>). Вы также можете задать ширину, цвет и смещение для линии.

remove line

Удаляет ранее созданную линию из указанного объекта.

bind element

Заставляет указанный HTML-элемент следовать за центром указанного 3Д-объекта в пространстве экрана. Переключатель in parent doc должен быть установлен, если HTML-элемент находится во внешнем HTML-документе (в который .html-файл 3Д-приложения подключается с помощью элемента <iframe>).

Замечание:

Вместо этого можно использовать пазл add annotation и настроить внешний вид аннотаций, как описано здесь.

unbind element

Отвязывает указанный HTML-элемент от объекта, то есть отменяет действие пазла bind element. Переключатель in parent doc должен быть установлен, если HTML-элемент находится во внешнем HTML-документе (в который .html-файл 3Д-приложения подключается с помощью элемента <iframe>).

init fullscreen

Заставляет указанный HTML-элемент вести себя как кнопка полноэкранного режима — первый щелчок по ней вызывает вход в полноэкранный режим, второй — выход из него. Пазлы, размещенные в слотах on enter do и on exit do, срабатывают при входе или выходе из полноэкранного режима. Пазлы, размещенные в слоте if unavailable do, срабатывают, если полноэкранный режим не поддерживается браузером (например, браузером «Сафари» на «Айфонах»).

open web page

При срабатывании этого пазла указанный УРЛ открывается в новой или в той же вкладке браузера в зависимости от выпадающего выбора. При запуске из редактора пазлов он запросит подтверждение пользователя, прежде чем покинуть вкладку.

Поддерживаемые настройки:

a new tab
Открыть в новой вкладке. Чтобы преодолеть ограничение браузера на открытие вкладок, пазл с такой настройкой должен вызываться внутри пазлов when clicked или event.
the same tab
Открыть в той же вкладке.
the same tab (ignore frames)
Открыть в той же вкладке. Используется внутри приложений, работающих внутри iframe-ов, открывает страницу в самом верхнем окне.
the same tab (parent frame)
Открыть в той же вкладке. Используется внутри приложений, работающих внутри iframe-ов, открывает страницу в родительском окне.
replace URL (no reload)
Помещает УРЛ в адресную строку браузера но не переходит на указанную страницу.

social share link

Генерирует ссылку для обмена вашим приложением в популярных социальных сетях.

set URL param

Присваивает или обновляет значение параметра в указанном УРЛ, при необходимости автоматически формируя допустимую строку запроса и возвращает обновленный УРЛ.

Этот пазл может быть полезен в ситуациях, когда данные конфигурации приложения хранятся в его УРЛ. Например, вы можете указать изображение, которое будет использоваться в качестве текстуры, следующим образом:

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

Вы можете загрузить текстуру, получить путь к ней на стороне сервера и сохранить ее в параметре image_url УРЛ-адреса приложения следующим образом:

Данная функциональность используется в демо-приложении «Фоторамка» (исходные файлы доступны в магазине ассетов).

take screenshot

Делает снимок экрана области просмотра и выводит его в формате Data URL.

Вы также должны включить скриншоты для вашего приложения с помощью пазла configure application, иначе создаваемые изображения будут совершенно черными.

get URL data

Извлекает данные УРЛ окна, в которое загружено приложение:

entire URL
Полный УРЛ страницы, например "https://www.example.com/my_awesome_app.html?image_url=https://www.uploadserver.com/path/to/image.jpg".
page name
Имя страницы, например "my_awesome_app.html" для "https://www.example.com/my_awesome_app.html".
parameters
Словарь параметров страницы, например {"image_url": "https://www.uploadserver.com/path/to/image.jpg"}
host name
Имя хоста страницы, например "www.example.com"ю

Переключатель in parent doc должен быть установлен, если требуется окно внешнего HTML-документа (в который .html-файл 3Д-приложения подключается с помощью элемента <iframe>).

Этот пазл может быть полезен в ситуациях, когда данные конфигурации приложения хранятся в его УРЛ. Например, вы можете указать изображение, которое будет использоваться в качестве текстуры, следующим образом:

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

Затем вы можете получить параметр image_url, загрузить и применить текстуру следующим образом:

Данная функциональность используется в демо-приложении «Фоторамка» (исходные файлы доступны в магазине ассетов).

download file

Загружает содержимое, указанное в формате Data URL, в файл. Вы также можете передать текст, словарь или список данных для загрузки в текстовый или JSON-файл. В этом случае заданный объект будет автоматически преобразован в соответствующий Data URL.

Примеры использования данного пазла:

open file

Вызывает встроенное диалоговое окно браузера для выбора файлов с устройства пользователя. После того как пользователь выбрал файл, возвращает содержимое файла в пазле opened file.

opened file

Возвращает содержимое или информацию о файле.

Настройки:

data
Содержимое файла в формате Data URL.
name
Имя файла.
extension
Расширение файла без точки: txt, jpg, mp3, и т.д.
size
Размер файла в байтах.
mime type

Тип содержимого файла (MIME-тип). Список наиболее часто используемых в «Вердж3Д»-приложениях MIME-типов:

application/json Файл в формате JSON, также используется для glTF-сцен.
application/octet-stream Двоичный (бинарный) файл (.bin).
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 для выделения объектов под курсором/касанием.

Как правильно указывать пути к ресурсам расположенным в интернете

Ряд пазлов принимает на вход УРЛ-адрес (УРЛ-путь) какого-либо ресурса, в частности:

Когда мы говорим о УРЛ-адресах, следует иметь в виду, что они существенно отличаются от привычных нам путей к файлам на локальной машине, поскольку в доступ к ним производится не напрямую, а посредством веб-браузеров, которые в свою очередь забирают ресурсы с веб-серверов.

Это значит, что пути никогда не должны указываться так:

УРЛ-пути должны использовать исключительно прямую черту (/) для разделения папок и могут быть:

Относительными
Эти пути указываются относительно HTML-файла приложения:
  • my_scene.gltf или ./my_scene.gltf — сцена расположена в той же папке, что и HTML-файл.
  • sounds/my_sound.mp3 — звук расположен в подпапке sounds папки, в которой находится HTML-файл.
  • ../textures/my_texture.jpg — текстура находится в подпапке textures, которая в свою очередь находится на один уровень выше (за это отвечают две точки) той папки, где расположен HTML-файл приложения.
Абсолютными
Эти пути используются тогда, когда вы точно знаете место расположения ресурса на веб-сервере:
  • https://www.my_host.com/my_app/my_scene.gltf — сцена находится в папке my_app сервера my_host.
  • /my_app/fonts/my_font.woff — шрифт находится в подпапке fonts папки my_app на каком-то (его имя неизвестно или не имеет значения) сервере.
Data URL
Это специальный тип УРЛ-адреса, который не находится на сервере, а кодирует ресурс напрямую. Мы часто используем такие ссылки чтобы принимать или возвращать значения ряда пазлов. Читайте об этих ссылках ниже.

Ссылки Data URL

Data URL (или Data URI) — это удобный метод встраивания различных ресурсов, таких как изображения, glTF-сцены (модели), звуки, JSON или CSV-файлы, внутрь ссылок (см. документацию).

Например, следующая ссылка представляет собой маленький логотип «Вердж3Д»:

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

Скопируйте весь фрагмент и вставьте в адресную строку браузера, чтобы отобразить логотип:

В пазлах мы широко используем ссылки Data URL, поскольку они обеспечивают удобный способ передачи файлоподобных данных между различными блоками пазлов. Например, вы можете использовать пазлы open file или drop file to, чтобы загрузить какой-либо файл (изображение или данные). Затем вы можете внести изменения в вашу сцену в соответствии с этим файлом. После этого вы можете загрузить измененную сцену (или, возможно, некоторые данные, например, документ прайс-листа) обратно на устройство пользователя с помощью download file, или загрузить этот файл на сервер с помощью пазла send data. Во всех этих случаях данные будут передаваться с использованием формата Data URL.

Данная функциональность используется в демо-приложении «Фоторамка» (исходные файлы доступны в магазине ассетов).

Также довольно легко отлаживать данные в формате Data URL. Просто используйте пазл print to console, затем откройте консоль браузера, чтобы просмотреть вывод, а затем щелкните на напечатанном URI внутри консоли, чтобы просмотреть данные в отдельной вкладке браузера.

Проблемы с пазлами?

Обратитесь за помощью на наш форум!