Пазлы ХТМЛ

Эти пазлы управляют элементами ХТМЛ ДОМ (HTML DOM).

Содержание

Что такое ХТМЛ ДОМ?

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

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

add HTML element

Создает элемент ХТМЛ с указанным типом и идентификатором (соответствует атрибуту "id") и добавляет его непосредственно перед или сразу после указанного существующего элемента ХТМЛ.

remove HTML element

Удаляет элемент ХТМЛ с указанным идентификатором.

get attribute

Получает атрибут из ХТМЛ-элемента с заданным id. Флажок "in parent doc" должен быть установлен, если ХТМЛ-элемент находится во внешнем ХТМЛ-документе (в который .html файл приложения «Вердж3Д» внедрен с помощью iframe).

set attribute

Устанавливает атрибут для ХТМЛ-элемента с указанным id. Флажок "in parent doc" должен быть установлен, если ХТМЛ-элемент находится во внешнем ХТМЛ-документе (в который .html файл приложения «Вердж3Д» внедрен с помощью .iframe). Также работает со списками идентификаторов элементов.

create css rule

Создает новое правило ЦСС. Флажок "in parent doc" должен быть установлен, если ХТМЛ-элемент находится во внешнем ХТМЛ-документе (в который .html файл приложения «Вердж3Д» внедрен с помощью .iframe).

set style

Устанавливает ЦСС-свойство для ХТМЛ-элемента с указанным id. Флажок "in parent doc" должен быть установлен, если ХТМЛ-элемент находится во внешнем ХТМЛ-документе (в который .html файл приложения «Вердж3Д» внедрен с помощью .iframe). Также работает со списками идентификаторов элементов.

get style

Берет ЦСС-свойство из ХТМЛ-элемента с указанным id. Флажок "in parent doc" должен быть установлен, если ХТМЛ-элемент находится во внешнем ХТМЛ-документе (в который .html приложения «Вердж3Д» внедрен с помощью iframe).

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

set css rule

Устанавливает ЦСС-свойство для указанного правила ЦСС (находится в .css файлах приложения). Флажок "in parent doc" должен быть установлен, если таблицы стилей принадлежат внешнему ХТМЛ-документу (в который .html приложения «Вердж3Д» внедрен с помощью iframe).

event

Регистрирует обработчик события для ХТМЛ-элемента с указанным id. Флажок "in parent doc" должен быть установлен, если ХТМЛ-элемент находится во внешнем ХТМЛ-документе (в который .html приложения «Вердж3Д» встроен с помощью iframe). Как только происходит событие, срабатывают пазлы, помещенные в слот "do". Также работает со списками идентификаторов элементов.

get event property

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

DOM object selector

Представляет элемент контейнера canvas - элемент ХТМЛ, который содержит визуализированную сцену, DOM window object - вкладку браузера или iframe, в который загружается ХТМЛ-документ, DOM document object - корневой узел ХТМЛ-документа, или DOM body object - элемент <body> ХТМЛ-документа.

query selector

Возвращает первый элемент ХТМЛ, который соответствует заданному селектору ЦСС.

create canvas elem

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

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

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


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

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


    var canvas = canvasTex.image;

Вы можете использовать стандартные методы, доступные для рисования на холсте ХТМЛ. В примере ниже, на белом фоне нарисовано синее улыбающееся лицо:


    var 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); // Outer circle
    ctx.moveTo(110, 75);
    ctx.arc(75, 75, 35, 0, Math.PI, false);  // Mouth (clockwise)
    ctx.moveTo(65, 65);
    ctx.arc(60, 65, 5, 0, Math.PI * 2, true);  // Left eye
    ctx.moveTo(95, 65);
    ctx.arc(90, 65, 5, 0, Math.PI * 2, true);  // Right eye
    ctx.stroke();

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


    canvasTex.needsUpdate = true;

draw line

Соединяет указанный 3Д-объект с указанным ХТМЛ-элементом динамически обновляемой линией. Флажок "in parent doc" должен быть установлен, если ХТМЛ-элемент находится во внешнем ХТМЛ-документе (в который .html приложения «Вердж3Д» встроен с помощью iframe). Вы также можете задать ширину, цвет и смещение для линии.

remove line

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

bind element

Заставляет указанный ХТМЛ-элемент следовать за центром указанного 3Д-объекта в пространстве экрана. Флажок "in parent doc" должен быть установлен, если ХТМЛ-элемент находится во внешнем ХТМЛ-документе (в который .html приложения «Вердж3Д» встроен с помощью iframe).

Notes:

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

init fullscreen

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

open web page

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

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

Делает снимок экрана области просмотра и выводит его в формате «Дата УРИ».

Notes:

Вы также должны включить скриншоты для вашего приложения с помощью пазла 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"
Parameters - словарь, например {"image_url": "https://www.uploadserver.com/path/to/image.jpg"}
Host name - текст, например "www.example.com"

Флажок "in parent doc" должен быть установлен, если требуется окно внешнего ХТМЛ-документа (в который с помощью iframe встроен .html приложения «Вердж3Д»).


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

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

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

download file

Загружает содержимое, указанное в формате «Дата УРИ», в файл. Вы также можете передать текст, словарь или список данных для загрузки в текстовый или JSON файл. В этом случае заданный объект будет автоматически преобразован в соответствующий «Дата УРИ».

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

для сохранения ранее сделанных скриншотов
для сохранения состояния приложения путем сохранения словаря (или списка) в файле *.json
экспортировать модели в формате glTF для дальнейшей обработки
для создания текстовой информации о ценах, котировок, отчетов и т.д.

open file and opened file

Вызывает встроенное диалоговое окно браузера для выбора файлов с устройства пользователя. После того как пользователь выбрал файл, возвращает содержимое файла в формате «Дата УРИ».

drop file to

Возвращает файл, перенесенный из файлового менеджера (или другой программы) и помещенный на заданный элемент ХТМЛ внутри окна браузера. После того, как пользователь перетащил файл, возвращает его содержимое в виде пазла opened file (используя формат «Дата УРИ»).

Вы можете активировать дополнительный слот drag over для обработки событий перемещения файлов. Например, вы можете использовать его вместе с пазлом raycast для выделения объектов курсором/касанием.

Ссылки «Дата УРИ»

«Дата УРИ» (или «Дата УРЛ») — это удобный метод встраивания различных ассетов, таких как изображения, модели ГЛТФ, звуки, «Джейсон» или ЦСВ-файлов внутрь ссылок (см. документацию).

Например, следующая ссылка представляет собой маленький логотип «Вердж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

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

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

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

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

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

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