Пазлы HTML

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

Содержание

Что такое HTML DOM?

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

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

add HTML element

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

remove HTML element

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

get attribute

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

set attribute

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

create css rule

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

set style

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

get style

Берет CSS свойство из HTML-элемента с указанным id. Флажок "in parent doc" должен быть установлен, если HTML-элемент находится во внешнем HTML-документе (в который .html приложения Verge3D внедрен с помощью iframe).

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

set css rule

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

event

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

get event property

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

DOM object selector

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

query selector

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

create canvas elem

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

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

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

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

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

var canvas = canvasTex.image;

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

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

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

canvasTex.needsUpdate = true;

draw line

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

remove line

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

bind element

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

Notes:

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

init fullscreen

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

open web page

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

social share link

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

set URL param

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

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


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

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

Рабочий пример смотрите в демо Custom Image в дистрибутиве Verge3D.

take screenshot

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

Notes:

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

get URL data

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

Флажок "in parent doc" должен быть установлен, если требуется окно внешнего HTML-документа (в который с помощью iframe встроен .html приложения Verge3D).

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


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

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

Рабочий пример смотрите в демо Custom Image в дистрибутиве Verge3D.

download file

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

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

open file and opened file

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

drop file to

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

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

Data URI Links

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

Например, следующая ссылка представляет собой маленький логотип Verge3D:

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

Ознакомьтесь с демо сценой Custom Image внутри дистрибутива Verge3D в качестве примера использования пазлов Data URI.

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

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

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