Пазлы HTML
Эти пазлы управляют HTML-элементами.
![](files/puzzles/puzzles-html.webp)
Содержание
- Что такое HTML DOM?
- Перечень пазлов
- add HTML element
- remove HTML element
- set property
- get property
- create css rule
- style constructor
- set style
- get style
- set css rule
- event
- get event property
- DOM object selector
- query selector
- call method
- create canvas elem
- draw line
- remove line
- bind element
- unbind element
- init fullscreen
- open web page
- social share link
- set URL param
- take screenshot
- get URL data
- download file
- open file
- opened file
- drop file to
- Как правильно указывать пути к ресурсам расположенным в интернете
- Ссылки Data URL
Что такое 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>
).
![](files/puzzles/puzzles-html-add-html-elem.webp)
Например, чтобы создать красную ссылку на официальный сайт «Софт Эйт Софт», можно использовать следующие пазлы:
![](files/puzzles/puzzles-html-add-html-elem-example.webp)
Поддерживаемые элементы:
Элемент | Описание |
---|---|
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>
).
![](files/puzzles/puzzles-html-remove-html-elem.jpg)
set property
Устанавливает свойство HTML-элемента с указанным идентификатором (id). Переключатель in parent doc должен быть установлен, если HTML-элемент находится во внешнем HTML-документе (в который .html-файл 3Д-приложения подключается с помощью элемента <iframe>
). Пазл также работает со списками идентификаторов элементов.
![](files/puzzles/puzzles-html-set-prop.webp)
Свойство | Описание |
---|---|
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>
).
![](files/puzzles/puzzles-html-get-prop.webp)
Свойство | Описание |
---|---|
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>
).
![](files/puzzles/puzzles-html-create-css-rule.jpg)
style constructor
Создаёт строку с определениями CSS-стилей, разделёнными точкой с запятой.
![](files/puzzles/puzzles-html-style-constructor.webp)
Следующий пример позволяет сделать зелёную кнопку, расположенную в левом верхнем углу:
![](files/puzzles/puzzles-html-style-constructor-example.webp)
set style
Устанавливает CSS-свойство для HTML-элемента с указанным id. Переключатель in parent doc должен быть установлен, если HTML-элемент находится во внешнем HTML-документе (в который .html-файл 3Д-приложения подключается с помощью элемента <iframe>
). Также работает со списками идентификаторов элементов.
![](files/puzzles/puzzles-html-set-style.jpg)
get style
Получает CSS-свойство из HTML-элемента с указанным id. Переключатель in parent doc должен быть установлен, если HTML-элемент находится во внешнем HTML-документе (в который .html-файл 3Д-приложения подключается с помощью элемента <iframe>
).
![](files/puzzles/puzzles-html-get-style.jpg)
Этот пазл бывает очень полезен для создания 3Д-конфигураторов. Например, вы можете использовать следующий блок пазлов для назначения цвета материала на основании цвета фона HTML-элемента:
![](files/puzzles/puzzles-html-get-style-example.jpg)
set css rule
Устанавливает CSS-свойство для указанного правила CSS (находится в .css файлах приложения). Переключатель in parent doc должен быть установлен, если таблицы стилей принадлежат внешнему HTML-документу (в который .html-файл 3Д-приложения подключается с помощью элемента <iframe>
).
![](files/puzzles/puzzles-html-set-css-rule.jpg)
event
Регистрирует обработчик события для HTML-элемента с указанным id. Переключатель in parent doc должен быть установлен, если HTML-элемент находится во внешнем HTML-документе (в который .html-файл 3Д-приложения подключается с помощью элемента <iframe>
). Как только происходит событие, срабатывают пазлы, помещенные в слот do. Также работает со списками идентификаторов элементов.
![](files/puzzles/puzzles-html-on-event.jpg)
Собыите | Описание |
---|---|
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.
![](files/puzzles/puzzles-html-get-event-property.jpg)
Свойство события | Описание |
---|---|
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 документа.
![](files/puzzles/puzzles-html-DOM-object-selector.jpg)
query selector
Возвращает первый HTML-элемент, который соответствует заданному селектору CSS.
![](files/puzzles/puzzles-html-query-selector.jpg)
call method
Вызывает метод для указанного DOM-объекта: элемента или события.
![](files/puzzles/puzzles-html-dom-object-call.webp)
Поддерживаемые методы:
- 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
, клавиатура перестанет работать (в частности клавиши ЦФЫВ больше не будут перемещать камеру). - 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)
- Помещает УРЛ в адресную строку браузера но не переходит на указанную страницу.
- 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"ю
- для сохранения ранее сделанных скриншотов
- для сохранения состояния приложения путем сохранения словаря (или списка) в файле *.json
- экспортировать модели в формате glTF для дальнейшей обработки
- для создания текстовой информации о ценах, котировок, отчетов и т.д.
- 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. - open web page — путь к веб-странице.
- replace texture — путь к текстуре.
- load sound — путь к аудио-файлу.
- load scene — glTF-файл.
- create text object — шрифт.
- C:\Users\User\Documents\verge3d_apps\my_app\my_scene.gltf
- /Users/User/Downloads/my_sound.mp3
- /home/user/Desktop/my_texture.jpg
- Относительными
-
Эти пути указываются относительно 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
- Это специальный тип УРЛ-адреса, который не находится на сервере, а кодирует ресурс напрямую. Мы часто используем такие ссылки чтобы принимать или возвращать значения ряда пазлов. Читайте об этих ссылках ниже.
create canvas elem
Создает элемент холста с атрибутами id, width (ширина) и height (высота). Используйте этот пазл вместе с replace texture для создания текстур холста.
![](files/puzzles/puzzles-html-create-canvas-elem.jpg)
Созданный холст становится доступным для рисования с помощью «Ява Скрипта». Вы можете обновить холст внутри функции 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;
![](files/puzzles/puzzles-html-create-canvas-elem-example.jpg)
Данная функциональность используется в демо-приложении «Текстура холста» (исходные файлы доступны в магазине ассетов).
draw line
Соединяет указанный 3Д-объект с указанным HTML-элементом динамически обновляемой линией. Переключатель in parent doc должен быть установлен, если HTML-элемент находится во внешнем HTML-документе (в который .html-файл 3Д-приложения подключается с помощью элемента <iframe>
). Вы также можете задать ширину, цвет и смещение для линии.
![](files/puzzles/puzzles-html-draw-line.jpg)
remove line
Удаляет ранее созданную линию из указанного объекта.
![](files/puzzles/puzzles-html-remove-line.jpg)
bind element
Заставляет указанный HTML-элемент следовать за центром указанного 3Д-объекта в пространстве экрана. Переключатель in parent doc должен быть установлен, если HTML-элемент находится во внешнем HTML-документе (в который .html-файл 3Д-приложения подключается с помощью элемента <iframe>
).
![](files/puzzles/puzzles-html-bind-element.jpg)
Замечание:
Вместо этого можно использовать пазл add annotation и настроить внешний вид аннотаций, как описано здесь.
unbind element
Отвязывает указанный HTML-элемент от объекта, то есть отменяет действие пазла bind element. Переключатель in parent doc должен быть установлен, если HTML-элемент находится во внешнем HTML-документе (в который .html-файл 3Д-приложения подключается с помощью элемента <iframe>
).
![](files/puzzles/puzzles-html-unbind-element.jpg)
init fullscreen
Заставляет указанный HTML-элемент вести себя как кнопка полноэкранного режима — первый щелчок по ней вызывает вход в полноэкранный режим, второй — выход из него. Пазлы, размещенные в слотах on enter do и on exit do, срабатывают при входе или выходе из полноэкранного режима. Пазлы, размещенные в слоте if unavailable do, срабатывают, если полноэкранный режим не поддерживается браузером (например, браузером «Сафари» на «Айфонах»).
![](files/puzzles/puzzles-html-init-fullscreen.jpg)
open web page
При срабатывании этого пазла указанный УРЛ открывается в новой или в той же вкладке браузера в зависимости от выпадающего выбора. При запуске из редактора пазлов он запросит подтверждение пользователя, прежде чем покинуть вкладку.
![](files/puzzles/puzzles-html-open-web-page.jpg)
Поддерживаемые настройки:
social share link
Генерирует ссылку для обмена вашим приложением в популярных социальных сетях.
![](files/puzzles/puzzles-html-social-share-link.jpg)
set URL param
Присваивает или обновляет значение параметра в указанном УРЛ, при необходимости автоматически формируя допустимую строку запроса и возвращает обновленный УРЛ.
![](files/puzzles/puzzles-html-set-url-param.jpg)
Этот пазл может быть полезен в ситуациях, когда данные конфигурации приложения хранятся в его УРЛ. Например, вы можете указать изображение, которое будет использоваться в качестве текстуры, следующим образом:
https://www.example.com/my_awesome_app.html?image_url=https://www.uploadserver.com/path/to/image.jpg
Вы можете загрузить текстуру, получить путь к ней на стороне сервера и сохранить ее в параметре image_url УРЛ-адреса приложения следующим образом:
![](files/puzzles/puzzles-html-set-url-param-example.jpg)
Данная функциональность используется в демо-приложении «Фоторамка» (исходные файлы доступны в магазине ассетов).
take screenshot
Делает снимок экрана области просмотра и выводит его в формате Data URL.
![](files/puzzles/puzzles-html-take-screenshot.jpg)
Вы также должны включить скриншоты для вашего приложения с помощью пазла configure application, иначе создаваемые изображения будут совершенно черными.
get URL data
Извлекает данные УРЛ окна, в которое загружено приложение:
Переключатель in parent doc должен быть установлен, если требуется окно внешнего HTML-документа (в который .html-файл 3Д-приложения подключается с помощью элемента <iframe>
).
![](files/puzzles/puzzles-html-get-url-data.jpg)
Этот пазл может быть полезен в ситуациях, когда данные конфигурации приложения хранятся в его УРЛ. Например, вы можете указать изображение, которое будет использоваться в качестве текстуры, следующим образом:
https://www.example.com/my_awesome_app.html?image_url=https://www.uploadserver.com/path/to/image.jpg
Затем вы можете получить параметр image_url, загрузить и применить текстуру следующим образом:
![](files/puzzles/puzzles-html-get-url-data-example.jpg)
Данная функциональность используется в демо-приложении «Фоторамка» (исходные файлы доступны в магазине ассетов).
download file
Загружает содержимое, указанное в формате Data URL, в файл. Вы также можете передать текст, словарь или список данных для загрузки в текстовый или JSON-файл. В этом случае заданный объект будет автоматически преобразован в соответствующий Data URL.
![](files/puzzles/puzzles-html-download-file.jpg)
Примеры использования данного пазла:
![](files/puzzles/puzzles-html-download-file-example.jpg)
open file
Вызывает встроенное диалоговое окно браузера для выбора файлов с устройства пользователя. После того как пользователь выбрал файл, возвращает содержимое файла в пазле opened file.
![](files/puzzles/puzzles-html-open-file.jpg)
opened file
Возвращает содержимое или информацию о файле.
![](files/puzzles/puzzles-html-opened-file.jpg)
Настройки:
drop file to
Возвращает файл, перенесенный из файлового менеджера (или другой программы) и брошенный на заданный HTML-элемент внутри браузера. После того как пользователь перетащил файл, возвращает его содержимое в виде пазла opened file.
![](files/puzzles/puzzles-html-drop-file-to.jpg)
Вы можете включить дополнительный слот drag over для обработки событий перемещения файлов. Например, вы можете использовать его вместе с пазлом raycast для выделения объектов под курсором/касанием.
Как правильно указывать пути к ресурсам расположенным в интернете
Ряд пазлов принимает на вход УРЛ-адрес (УРЛ-путь) какого-либо ресурса, в частности:
Когда мы говорим о УРЛ-адресах, следует иметь в виду, что они существенно отличаются от привычных нам путей к файлам на локальной машине, поскольку в доступ к ним производится не напрямую, а посредством веб-браузеров, которые в свою очередь забирают ресурсы с веб-серверов.
Это значит, что пути никогда не должны указываться так:
УРЛ-пути должны использовать исключительно прямую черту (/) для разделения папок и могут быть:
Ссылки 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
Скопируйте весь фрагмент и вставьте в адресную строку браузера, чтобы отобразить логотип:
![](files/puzzles/data-url-logo.jpg)
В пазлах мы широко используем ссылки Data URL, поскольку они обеспечивают удобный способ передачи файлоподобных данных между различными блоками пазлов. Например, вы можете использовать пазлы open file или drop file to, чтобы загрузить какой-либо файл (изображение или данные). Затем вы можете внести изменения в вашу сцену в соответствии с этим файлом. После этого вы можете загрузить измененную сцену (или, возможно, некоторые данные, например, документ прайс-листа) обратно на устройство пользователя с помощью download file, или загрузить этот файл на сервер с помощью пазла send data. Во всех этих случаях данные будут передаваться с использованием формата Data URL.
Данная функциональность используется в демо-приложении «Фоторамка» (исходные файлы доступны в магазине ассетов).
Также довольно легко отлаживать данные в формате Data URL. Просто используйте пазл print to console, затем откройте консоль браузера, чтобы просмотреть вывод, а затем щелкните на напечатанном URI внутри консоли, чтобы просмотреть данные в отдельной вкладке браузера.
![](files/puzzles/data-url-debugging.jpg)
Проблемы с пазлами?
Обратитесь за помощью на наш форум!