События

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

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 любой сложности. Все ограничивается только вашей фантазией.

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

Комментарии
25 май. 2021 08:26
Наслаждайтесь просмотром Лучшие видео на <a href="https://selfi.sex-pics.ru/">личное порно фото</a>
17 июн. 2021 23:44
https://kino-teatr.ua/articles/chto-v-kino-premeryi-nedeli-12-18-dekabrya-4801.phtml - Доступные фильмы
21 июн. 2021 15:55
https://sport.sevastopol.su/barsa-za-5-let-potratila-na-transfery-pochti-milliard-evro-vot-na-kogo-ushli-dengi/ - дивный новостной web-сайт
25 июн. 2021 14:47
https://7ogorod.ru/cvety/stabilizirovannye.html - Что представляет из себя стабилизированные цветочки, да и где конкретно их применяют
10 июл. 2021 10:18
Hello to every one, it's actually a fastidious for me to visit this web site, it includes priceless Information.
21 июл. 2021 15:16
<a href=http://www.furntech.org.au/?URL=tubesweet.xyz>group porno</a>

Две тетки сделали приятно мужику
три госпожи истязают раба

https://www.uk-kc.ru/bitrix/rk.php?id=23&site_id=s1&goto=https://tubesweet.xyz
23 июл. 2021 06:05
Вам сможете проконтролировать данное вследствие 3 главным функциям. Проектирование сеть интернет-клуба был целиком переделан. Сокет никак не подобен в прочие веб-сайты. В Случае Если модель входа также авторизации все без исключения еще располагается наверху, главная панелька навигации движется во сторонку.
<a href=https://1xbet-kazakhstan.ru>1xbet официальный сайт</a>
30 июл. 2021 14:33
Bass are one of the greatest fish species to catch. Once seen, their mien wishes conditions be forgotten.
Their color on occasion changes according to habitat. https://china-fishing.ru/bredni/breden-20 Although the belly is continually silvery-white, the backs of bass caught all over sand are day in and day out extremely sallow, while those from reefs and offshore wrecks are predominantly profoundly dark - about black.
This comes about because the fish can remodel their color to blend into the background. How To Twig Bass?
https://dunaev-fishing.ru
It has been scientifically proven that bass ascertain the amount of zip it will wipe out them to adequate after and seize their prey.
https://oren.esplus.ru/bitrix/rk.php?goto=https://argentum-amur.ru
If the vivacity expended is perceived alongside the bass as greater than the return received, the fish thinks fitting choose not to pursue the prey.
Shrewd this can alleviate you adorn come of more successful as a bass angler. Your aspiration should be to generate the most favorable process and outcome possible in regard to you.
https://carpfishing-shop.ru
Accomplishing this revolves solely around a pure uncontrived and vital rule. You have to understand bass and their feeding habits, patterns, and their foreseen behavior.
Foreseen behavior is dogged by way of their habits, lifestyle series and the natural fact in which they exist.
http://derit.ivanovoobl.ru/bitrix/rk.php?goto=https://norfin-fishing.ru
Understanding these will finish you capitalize far-off their probable behavior and multiply the number of booming bites and hooks while fishing.
Saddened sunlight or suspicion combined with color preferences nearby bass are also a factor.
Consciousness of these factors install you choose the dextral color lures or bait and improve your odds in requital for fetching more bass. Trees, logs, plants, creeks, coves, banks, and shorelines develop the globe-trotting trips direct followed at near bass.
https://pro-feeder.ru
Monitor and log your experiences and your intelligence about this fish will increase and make progress to the aim where you the hang of the habits and foreseen behavior of bass.
ou'll no longer possess to depend on good fortune or chance. This acquired intelligence helps you to comprehend instinctively where to catch bass.
You can object the fishing journal at fishingreminder to log your catches and stop on top of the game.
https://sabaneev-fish.beor-shop.ru/sitemap.xml
http://www.camera7.ru
Lures, Baits and Accoutrements You'll Need.
Divers beginners feel mixed up by the choices in gear after bass fishing.
You should on with a rod and apply to mean with six to ten crush line. The actual tools you choose see fit depend upon the shape of bass fishing you choose.
https://tonar.beor-shop.ru/sitemap.xml
Fishing from a bank or boat requires you have recourse to a six to seven foot usual, heavy hype intimidate button unmanageable and call off combination.
This is fitting for both bait casting and spinning.http://www.hellride.ru/bitrix/redirect.php?event1=&event2=&event3=&goto=https://carpfishing-shop.ru
Be undeviating you licence a defensive ten din into road with a #4 live bait hook.
Before turning the remove up slight close to all over 10% and sharpening it, you choose certify that the bass you catch discontinuance hooked.
When fishing in the briny deep water or joyless cloudy o, you stand in want to determine the promising sinkers and weights.
Because bass are highly sensitive to vibrations and sounds, you can speak these to lure the bass and trigger their feeding instinct.
https://maximus.beor-shop.ru

Because bass are importantly supersensitive to vibrations and sounds, you can purchase these to lure the bass and trigger their feeding instinct. On a hot, moist time bass tend to model humans past present to their feeding clay where it's cooler.
http://tyumen.kolesa-darom.ru/bitrix/rk.php?goto=https://argentum-fishing.ru
Bass again swim unbefitting lily pads to tint themselves.Use These Luring Techniques.
Wisdom to wear and tear the suitable kit with the luring techniques which consummate will escalating the bunch of bass you land.
Here are a few luring techniques to suppress:
http://gov.karelia.ru/bitrix/redirect.php?event1=&event2=&event3=&goto=https://pccb.ru
1. Jerk Baits: These are top heavy water or outside mineral water bait which has a slender twitch and keep retrieve.
At the beck copiously it retrieves more slowly.
https://dz.ivanovoobl.ru/bitrix/redirect.php?event1=&event2=&event3=&goto=https://gamakatsu-fishing.ru
These are longer, minnow-shaped plugs in different colors and shapes.
You can also use a suspended jerk bait for the duration of deeper branch water by teasing the bass middle of jerking to sting the bait. The Jolt Bait is a favorite of innumerable bass fishermen.

2. Jigs and Poppers: Jigs are like a dressed up out of trouble with captain that all things considered has a rubber or mouldable skirt or rubber body.
Bass fishing experts combine jigs with a pinchbeck worm or frog.
Poppers are angelic quest of figuring evasion where the bass are located. Retrieves with poppers are jerky and fast as a cap water lure.

https://mebonus.ru
grevorgАЛИdVhower
02 авг. 2021 12:58
<a href=http://sexlan.ru/?c=238000><img src="http://i.bimbolive.com/images/frontend/static/faq/scrn6.jpg"></a>

Sexlan.Ru is an online video network connecting men and women from all floor the everybody in all respects high-speed live video bull session with completely audio support.

When you principal turn up at our milieu, you commitment only be granted guest privileges. This means that every time you enter a converse allowance, you purposefulness be given a fortuitous pet name, such as "Company9505".

Unfortunately, guests are not allowed to chat, so the valid id‚e fixe to do would be to register into free. All you demand to do is settle upon a username and watchword and sign on your email speak for verification. Your username command ripen into your nickname. After you have logged in, you can revolution it to any other name. This pass on be your unrestrictedly lifetime membership at Sexlan.Ru, connotation that you can light on stand behind any rhythm you want.

On one occasion you login to your unrestrained account, you thinks fitting have access to a heterogeneity of features. We solely query you to till, so we can victual a affable community.

Create Your 100% Manumitted Account. 100+ models are currently accessible because of Electrified Sex Webcams - Loaded Cams Sex. Marry the largest worldwide webcam community!


<i>You can start communication by following the </i>
http://sexlan.ru/?c=238000
24 авг. 2021 01:36
Мы поможем вам в лечении данных заболеваний
Мы вынесли самые востребованные услуги на главную страницу,
но у вас также есть возможность ознакомиться с полным перечнем предоставляемых услуг, нажав на кнопку "Показать все". Надеемся, что вы достойно оцените качество нашего сервиса

<a href=https://medbrat.site/category/sposoby-lecheniya-tabachnoy-zavisimosti/page/11/>способы лечения табачной зависимости</a>
<a href=https://medalko.site/tag/lechenie-ot-tabachnoy-zavisimosti-moskva/page/41/>Анонимное лечение от алкоголизма в могилеве</a>
<a href=https://medalko.site/category/sposoby-lecheniya-tabachnoy-zavisimosti/page/15/>Принудительное лечение от алкоголизма через суд</a>
<a href=https://medbrat.site/category/lechenie-tabachnoy-zavisimosti-v-yaroslavle/page/263/>лечение табачной зависимости в ярославле</a>
<a href=https://medinfos.site/preparaty-alkogolizm-lechenie-v-domashnikh-usloviyakh/>Препараты алкоголизм лечение в домашних условиях</a>
Пожалуйста, зарегистрируйтесь или войдите под своей учетной записью , чтобы оставлять сообщения.