События

О якорях по-простому. Разбираемся с выводом аннотаций

2017-04-03

Работая с трехмерной графикой, поневоле начинаешь мыслить ее категориями. А что, удобно. Любую мысль можно воплотить в объеме, снабдить объект красочным материалом, добавить анимации и.… эх, развернись душа художника!

Вот только, некоторые простые задачи начинают выглядеть излишне сложными именно при реализации их в трехмерном пространстве. Возьмем конкретно, текст. Многие знают, что в Blender можно с легкостью создавать надписи. Есть даже нечто вроде трехмерного текстового редактора с выбором шрифтов, их начертаний, всевозможных отступов и всего остального. Мало того, Blend4Web прекрасно понимает текстовые объекты Blender и успешно их отображает в веб-браузере. Но нужно помнить, что эти объекты — самые обычные трехмерные модели, которые имеют массу ограничений именно для такого использования. Кто не поверил, вот список вполне реальных минусов:

1. Излишний объем. Каждая буква в трехмерном исполнении — это отдельный объект с массой вершин. А если у вас их сотни?

2. Низкое качество. Вы можете схитрить и создать уже готовую текстуру с надписью для обычной плоскости. Вот только выглядеть такой текст будет не очень, особенно на расстоянии.

3. Гибкость в изменении. Забудьте об этом сразу.

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

Что... Вы что-то сказали про Canvas? О да, такая возможность есть. Можно прекрасно писать текст на канве, используя стандартные возможности HTML5. Это несложно, но медленно. WebGL буквально прорисовывает на холсте буковки, что более затратно по времени, нежели выводить текст средствами веб-браузера.

Blend4Web предлагает свой механизм, объединяющий быстроту работы рендера браузера и легкость использования в трехмерном пространстве.

Быстро и просто

В наборе демонстраций Blend4Web есть замечательное приложение Planetarium. Наша солнечная система представлена качественно выполненными моделями планет, кружащимся вокруг Солнца.

Интерес представляют интерактивные текстовые подписи. Каждая из них «привязана» к своей планете. Если щелкнуть по названию, то открывается дополнительная текстовая информация. Ну и они просто стильно выглядят.

Все начинается с Якоря. Его величество Якорь будет надежно удерживать вашу двухмерную надпись в объемном море сцены...

Как вы, наверное, уже догадались, Якорь — это специальный объект в сцене Blender. Его назначение в указании точки, где будет демонстрироваться текст. Например, в приложении Planetarium «якоря» жестко привязаны к своим планетам и двигаются вместе с ними.

В качестве якоря нужно использовать объект Empty. На иллюстрации выше он находится у полюса Сатурна. Добавить в сцену его можно из меню Add | Empty | Plain Axes (меню вызывается горячими клавишами Shift+A).

Если вы хотите, чтобы якорь был жестко привязан к конкретному объекту, то следует создать связь «родитель-потомок». Для этого выделите Empty, затем добавьте к нему корневой объект (удерживайте при этом клавишу Shift) и нажмите Ctrl+P.

Сам по себе Empty ничего не значит. Чтобы текст отображался в окне браузера, нужно включить опцию Enable Anchor в панели Object для Empty. Обязательно убедитесь, что в поле Type установлен режим работы Annotation. Сама текстовая информация хранится в группе Meta Tags.

Важно запомнить простые правила работы с якорями:

1. Если выключена опция Meta Tags, то название для якоря берется из названия объекта Empty.

2. В режиме работы Annotation используется встроенный дизайн якорей.

3. Если заполнить поле Description информацией, то щелчок по названию якоря в окне браузера отобразит текст в дополнительной панели.

4. Поле Description может содержать только текстовую информацию. Не стоит пытаться размещать в нем изображения, ссылки или код в iframe.

Есть еще одна интересная опция Detect Visibility в панели Anchors. Чтобы понять, в чем ее смысл гляньте на иллюстрацию ниже.

Здесь объект Mars скрылся за солнцем и его не видно. Однако якорь с названием все равно имеется. В некоторых случаях это оправдано, но бывает требуется скрывать якоря, когда объект становится невидимым для камеры. Именно для этого служит опция Detect Visibility.

Режим эксперта

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

И здесь все выглядит очень просто. Вы работаете с тем же якорем, только в настройках панели Anchors нужно выбрать пункт Custom Element. С этого момента все заботы о дизайне перекладываются на вас. Только добавьте в поле HTML Element ID свой ID нужного элемента.

Все остальное делается уже средствами HTML, CSS и JavaScript. Здесь уже нет каких-либо ограничений.

Давайте попробуем сделать простенький вывод текста для якоря. Допустим, вывести какой-либо текст на фоне.

Сначала определим в файле HTML место для нового элемента. Учтите, что находится он должен ниже контейнера с Canvas:

<body>
  <div id="main_canvas_container"></div>
  <div id="my_design">This is my Anchor!</div>
</body>

В качестве ID используется название my_design. Именно его следует поместить в поле HTML Element ID (см. рис. выше).

Добавить в CSS описание элемента. Я немного поигрался с цветами фона и текста:

#my_design {
  position: absolute;
  background-color: #ffa201;
  border-radius: 5px;
  color: #000;
  font-weight: bold;
  box-shadow: 0 0 4px 2px #a94c00;
}

В итоге мой якорь стал выглядеть так.

Теперь усложним задачу. Добавим возможность открытия окна с описанием щелчком мыши по названию якоря.

Немного изменим файл HTML, добавив туда новый элемент для дополнительного окна:

<body>
  <div id="main_canvas_container"></div>
  <div id="my_design">This is my Anchor!
	<div id="my_design_child"> Oh, yes! I see it...</div>
  </div>
</body>

А также расширим CSS:

#my_design {
  cursor: pointer;
  position: absolute;
  background-color: #ffa201;
  border-radius: 5px;
  color: #000;
  font-weight: bold;
  box-shadow: 0 0 4px 2px #a94c00;
  display: none;
}
#my_design_child {
  position: absolute;
  top: 30px;
  background-color: #000;
  background-size: cover;
  height: 100px;
  border-radius: 5px;
  color: #ffa201;
  font-weight: bold;
  box-shadow: 0 0 4px 2px #a94c00;
  display: none;
}

Посмотрите внимательно на блоки CSS. Помимо всяких украшательств появились новые поля display. Именно с их помощью можно управлять показом блоков. Первоначально эти блоки выключены. Кстати, не пытайтесь использовать для контролирования видимости блока такое свойство CSS, как visibility. Оно полностью остается под контролем движка Blend4Web.

А теперь немного кода на JavaScript...

Весь код я разместил в функции load_cb, которая вызывается, когда выполнена загрузка сцены (стандартная заготовка JavaScript, генерируемая при создании нового проекта).

Находим нужные элементы HTML:

var my_design = document.getElementById("my_design");
var my_design_child = document.getElementById("my_design_child");

Включаем демонстрацию названия якоря:

my_design.style.display = "block";

Добавляем событие «click» к первому блоку. Теперь при щелчке мышью по названию якоря будет вызываться указанная функция, где происходит переключение видимости второго блока:

    my_design.addEventListener("click", function() {
		if (my_design_child.style.display == "block") {
			my_design_child.style.display = "none";	
		} else {
			my_design_child.style.display = "block";
		}
		
    }, false);

В целом у меня вышло следующее:

Как видите, режим работы якоря Custom Element полностью развязывает ваши руки и вы можете создавать GUI любой сложности. Все ограничивается только вашей фантазией.

Ссылка на проект.

Комментарии
16 апр. 2019 21:21
Добрый день.
Благодарю за Ваши уроки.
Только из этого урока у меня никак не получается сделать пример с расширенными аннотациями. Я никак не пойму куда нужно вставлять html код. Возможно ли вообще увидеть расширенные аннотации в Fast Preview?
Возможно дело в том, что я никогда не занимался джава-программированием, поэтому мне совсем не понятно где должен располагаться файл, или HTML Element ID.
Напишите, пожалуйста, подробнее, какие файлы нужно создавать и куда их размещать, чтобы увидеть расширенную аннотацию (которая получается с использованием Custom Element или Generic).
И напишите, пожалуйста, можно ли менять информацию в этих аннотациях с помощью node, чтобы изменения на сцене приводили к изменениям текстов в аннотациях.
01 дек. 2020 02:51
Many translated example sentences containing "Antwort gefunden" – English-German dictionary and … Sie wissen aber, daß im Zeitalter der Globalisierung.

https://masters-otvet.ru/user/rimmfuss
29 дек. 2020 08:17
Заказать seo поисковую оптимизацию сайта, Заказать услуги по продвижению сайта По всем возникшим вопросам Вы можете обратиться в скайп логин <b>pokras7777</b>Раскрутка сайта под ключ
.Так же собираем базы Обратесь всегда будем рабы вам помочь
<a href=http://seoprofisional.ru/bazy/bazy-dlya-hrumera>база для хрумера</a>
02 янв. 2021 06:45
Заказать seo поисковую оптимизацию сайта, Заказать услуги по продвижению сайта По всем возникшим вопросам Вы можете обратиться в скайп логин <b>pokras7777</b>Раскрутка сайта под ключ
.Так же собираем базы Обратесь всегда будем рабы вам помочь
<a href=http://seoprofisional.ru/index.php?route=blog/article&article_id=120>купить базу для хрумера</a>
30 янв. 2021 23:40
Заказать seo поисковую оптимизацию сайта, Заказать услуги по продвижению сайта По всем возникшим вопросам Вы можете обратиться в скайп логин <b>pokras7777</b>Раскрутка сайта под ключ
.Так же собираем базы Обратесь всегда будем рабы вам помочь
16 фев. 2021 12:58
Торгуйте акциями основных технологических компаний США в этом сезоне отчетности
Узкие спреды и низкие комиссии от 0,08% по акциям США
Отмеченный наградами набор мощных платформ и приложений
Подробный анализ рынка от наших экспертов-аналитиков
Будьте в курсе всех последних новостей, посетив наш Tech Stock Hub

6692476483
18 фев. 2021 07:14
Торгуйте акциями основных технологических компаний США в этом сезоне отчетности
Узкие спреды и низкие комиссии от 0,08% по акциям США
Отмеченный наградами набор мощных платформ и приложений
Подробный анализ рынка от наших экспертов-аналитиков
Будьте в курсе всех последних новостей, посетив наш Tech Stock Hub

6692476483
26 мар. 2021 20:52
<a href=https://betonnyy-pol.ru/>укладка бетонного пола</a>
03 апр. 2021 09:50
<a href=https://recentre.info/pages/price.html>Заменим модуль</a> Samsung в Ногинске
наш прайс на запчасти, для ремонта смартфонов
15 апр. 2021 14:16
<a href="http://bgzdh.cn/home.php?mod=space&uid=2252" target="_blank">http://bgzdh.cn/home.php?mod=space&uid=2252</a>
<a href="http://bgzdh.cn/home.php?mod=space&uid=2252">http://bgzdh.cn/home.php?mod=space&uid=2252</a>
Пожалуйста, зарегистрируйтесь или войдите под своей учетной записью , чтобы оставлять сообщения.