close

Вход

Забыли?

вход по аккаунту

Моисеенко Алексей Андреевич. Разработка веб-приложения для интерактивного обучения

код для вставки
ОГЛАВЛЕНИЕ
ВВЕДЕНИЕ
2
ГЛАВА 1. ТЕХНОЛОГИИ ИНТЕРАКТИВНОГО ОБУЧЕНИЯ
1.1. Уровни интерактивности учебных моделей
виртуальной среды
1.2. Интерактивные средства обучения
1.3. Выбор инструментов
5
ГЛАВА 2. РАЗРАБОТКА ВЕБ-ПРИЛОЖЕНИЯ ДЛЯ ИЗУЧЕНИЯ
АНАТОМИЧЕСКИХ МОДЕЛЕЙ СЕРДЦА
2.1. Создание и текстурирование общей модели
и модели сердца в разрезе
2.2. Анимации моделей
2.3. Разработка веб приложения
5
9
1​1
1​7
1​7
29
3​2
ЗАКЛЮЧЕНИЕ
4​0
СПИСОК ЛИТЕРАТУРЫ
4​1
ПРИЛОЖЕНИЕ
4​2
ВВЕДЕНИЕ
Обоснование выбора темы исследования и ее актуальности
Одним из направлений модернизации российского педагогического
образования
является
основанного
на
технологий
создание
использовании
дистанционного
системы
открытого
информационных
обучения
и
образования,
образовательных
формирование
единой
информационной образовательной среды на базе использования новых
информационных технологий и, в частности, разработка современных
электронных методов обучения.
Степень разработанности проблемы
Существует три метода преподавания: пассивный, активный и
интерактивный. В большинстве своем преобладают пассивный и активный
методы. Суть пассивного метода заключается в том, что учащиеся
являются
пассивными
слушателями,
активный
метод
использует
взаимодействие преподавателя и учащихся. Так как в обоих случаях
преподаватель является самым существенным воздействующим лицом
случается, что рассказанный учебный материал плохо усваивается, а то и
вовсе не вызывает интерес у обучающихся. А так как «познавательная
активность характеризуется естественным стремлением к познанию» [1],
то первое, что нужно это возбудить желание у учащихся учиться и
развивать потребность ученика в саморазвитии. То есть, появляется
необходимость в поиске методов обучения, которые могли бы эффективно
сформировать
приходит
познавательную
интерактивный
активность
метод
учащихся.
обучения.
На
помощь
Интерактивность
обуславливается двумя уровнями: первый уровень взаимодействия
преподавателя и учащихся, а также учащихся между собой, второй
2
уровень взаимодействия учеников с используемыми электронными
средствами обучения.
Интерактивное обучение требует использования специальных форм
организации познавательной деятельности и ставит вполне конкретные и
прогнозируемые цели, например, создание комфортных условий обучения
и включенность обучающихся в учебное взаимодействие, что делает
продуктивным сам процесс обучения [2].
Одним из наиболее эффективных способов внедрения новых
информационных технологий в образовательный процесс является
применение интерактивных моделей и динамических flash-презентаций.
Это обеспечивает активное восприятие нового учебного материала,
повышает наглядность его представления и способствует более прочному
усвоению
учащимися
теоретических
основ. Существует огромное
множество программ 3D визуализации, обучающих анатомии. Яркими
представителями использования учебных анатомических компьютерных
моделей, являются такие программы как ​
Human Anatomy Atlas и ​
Anatomy
&
Physiology​. Так
Human Anatomy Atlas - это интерактивный
анатомический 3D атлас. Он содержит в себе различные 3D-модели,
изображения магнитно-резонансной томографии, поперечные срезы,
подвижные 3D-модели мышц, костей и многое другое. В силу невысокой
стоимости и ресурсоемкости данные атласы подходят как для студентов и
преподавателей, так и просто интересующихся анатомией. Однако такие
атласы более направлены на индивидуального обучения. Также в качестве
условно бесплатного аналога можно привести Zygotebody. Это также
является трехмерным интерактивным анатомическим атласом, но с более
упрощенным
функционалом.
Взаимодействие
с
пользователем
осуществляется посредством нескольких ползунков и вращении модели.
3
В
настоящее
время
трёхмерная
графика,
в
том
числе и
интерактивные 3D модели весьма востребованы. 3D-моделирование
помогает визуализировать объекты, которые в дальнейшем используются
в кинематографе, медицине и других науках. Стремительным развитие
новейших технологийв компьютерной графике сделало возможным
разработку интерактивных 3D-моделей и их широкое применение в
образовании. В настоящее время это одно из ведущих направлений
развития средств обучения.
Объект исследования
3D моделирование и веб технологии для интерактивного обучения.
Предмет исследования
Разработка веб-приложения для интерактивного обучения.
Цель
Разработать
веб-приложение
для
изучения
интерактивной
анатомической модели сердца.
Задачи
1. Провести анализ учебно-методической литературы и электронных
изданий на предмет использования обучающих веб-приложений.
2. Разработать
веб-приложение
для
изучения
интерактивной
анатомической модели сердца.
Методы исследования
Библиографический анализ литературы и материалов сети Интернет,
3D
моделирование, методы объектно-ориентированного анализа и
проектирования.
4
ГЛАВА 1. ТЕХНОЛОГИИ ИНТЕРАКТИВНОГО ОБУЧЕНИЯ
1.1. Уровни интерактивности учебных моделей
виртуальной среды
Виртуальный учебный объект, такой как интерактивная модель
весьма востребованы в образовательной практике.
Под интерактивной моделью имеется в виду модель, которая открыта для
взаимодействия с пользователем, посредством различных операций с ее
элементами. Управление осуществляются кнопками или напрямую с
помощью мыши в рабочем поле интерфейса модели.
На сегодняшний день выделяют следующие формы взаимодействия:
● условные (пассивные),
● активные,
● деятельностные,
● исследовательские.
Проанализировав формы взаимодействия пользователя с моделью, можно
выделить четыре уровня ее интерактивности.
Первый уровень интерактивности – Условный (пассивный)
Условный
уровень
можно
охарактеризовать
как
уровень
минимального воздействия пользователя на модель. Данный уровень
условно назван пассивным, так как он все-таки требует некоторых
опциональных взаимодействий, например таких, как нажатие кнопок
«запуск», «пауза», и подобными. Цель работы, а также ее результат,
известны заранее - это понимание и овладение «готовой» информацией.
5
К условным (пассивным) типам интерактивности относят:
1. Текст,
сопутствующий
модели,
его
чтение,
а
также
его
регулированием (листание страниц, или прокрутка «скроллинг»).
2. Просмотр графики, например схем, диаграмм, графов, таблиц и т.д.
3. Воспроизведение аудиоряда такого как речь, музыка.
4. Просмотр статических и/или анимационных изображений, входящих
в состав модели.
5. Восприятие сочетания вышеперечисленного (звук и текст, звук и
изображение, звук и анимация).
Сочетание аудио-видео ряда может быть: созерцательным (просмотр
анимации) или акцентированным (с выделением важных деталей
визуального ряда или части звукового ряда).
Второй уровень интерактивности - Активно-операционный
Данный уровень отличается простейшим взаимодействием с
интерфейсом модели (выбор из некоторого множества нескольких
простейших действий, а также дальнейшее их исполнение). Основная цель
и результат работы, также определены заранее: понимание и овладение
«готовой» информацией, с той лишь разницей что число возможных
взаимодействий заметно возрастает.
Активно-операционным формами являются:
1. Навигация по элементам тексто-графического контента модели.
2. Копирование
элементов
тексто-графического
визуального ряда.
3. Выбор различных действий из списка.
4. Масштабирование изображения.
5. Перемещение объектов в пространстве.
6. Изменение угла зрения.
6
содержания
и
Третий уровень интерактивности - Активно-действенный
Этот
уровень
описывается
структурным(созидательным)
взаимодействием пользователя с элементами интерактивной модели. На
этом уровне, пользователь использует кнопки и различные параметры
модели
для
достижения
поставленной
задачи.
Взаимодействие
пользователя с моделью за счет расширения возможных комбинаций
элементов управления и выбора различных параметров позволяет
сформулировать различные научные задачи, а также выполнить некоторое
множество различных действий. Так как состав и очередность функций,
которые выполняет пользователь для достижения поставленной задачи,
заранее не определены, его работа с данной моделью не всегда
заканчивается успехом. Активно-действительная модель отличается
массой степеней свободы, а также способностью выбора пользователем
последовательности операций и действий, для достижения поставленной
задачи, потребность в анализе на каждом шаге и осуществлении решения с
определенным множеством параметров в заданном пространстве.
Активно-действенными формами являются:
1. Добавление и удаление объектов в действующие окно модели.
2. Перемещение элементов модели для установления их соответствия.
3. Объединение объектов для модификации их свойств или даже
получения новых объектов.
4. Составление особых сочетаний объектов.
5. Объединение объектов целью создания особой системы объектов.
6. Преобразование некоторых параметров и характеристик объектов, а
также их процессов.
7. Разложение и/или перемещение по уровням объекта, являющегося
сложной системой.
7
Четвертый уровень интерактивности - Активно-деятельностный
Такой уровень модели ориентирован не на изучение «готовых»
событий, а на создание собственных. Работа пользователя с данными или
созданными (в процессе взаимодействия с моделью) объектами может
быть свободной. Научные цели не внедрены в основу модели. Список
проблем
и
заданных
последовательность
на
действий,
их
основе
ведущих
задач
к
отсутствует.
заданному
Нет
результату.
Инициатива в изложение и решении проблем остается за пользователем.
Именно пользователь выбирает способы их решения. Также нельзя
исключать вариант, что решить задачу не удастся и цель достигнута не
будет. Все это определяет фактически экспериментальные формы
взаимодействия
пользователя
с
моделью.
Для
достижения
экспериментальных форм взаимодействия используются сложные учебные
модели,
которые
по
факту
являются
интерактивными
средами,
состоящими из определенного комплекса взаимосвязанных моделей.
Характер взаимодействия пользователя с такой моделью не определен,
поэтому формы взаимодействия невозможно перечислить. Однако можно
указать
на
изменения,
которые
при экспериментальном подходе
испытывают некоторые формы взаимодействия третьего уровня:
1. Объединение различных объектов модели для изменения их свойств,
а также получения новых объектов.
2. Составление свободных структур объектов.
3. Объединение объектов в системы.
4. Преобразование
параметров/характеристик
процессов
в
бесконечных пределах.
5. Импорт различных элементов для добавление в активное поле.
Стоит отметить, что типы взаимодействия пользователя с условными и
8
активно-действенными
моделями
интерактивности
являются
определенными. Проще говоря, все действия пользователя с моделью
заранее предусмотрены. Это вызвано тем, что при создании модели
всевозможные сочетания ее элементов, а также их композиций,
параметров и характеристик процессов, воспроизводимые моделью,
изначально заданы. Данные варианты могут быть установлены при
конечном тестировании модели.
1.2. Интерактивные средства обучения
Представляя интерактивность как способ общения человека и
справочной системы, то интерактивные средства обучения - это средство,
обеспечивающее начало диалога, другими словами обмен сообщениями
между пользователем и информационной системой в реальном времени.
Создание интерактивных средств обучения расширяют виды учебной
деятельности, такие как сбор, накопление, хранение, регистрация и
обработка информации об исследуемых объектах, различных процессах,
явлениях,
а
также
передача
больших
объемов
информации,
представленной в различном виде, регулирование отображения моделей
различных предметов, явлений, процессов на экране. Реализация
интерактивного диалога протекает не только с учащимся, но и с
интерактивным
средством
обучения,
действующем
информационно-коммуникационных технологий (ИКТ) [3].
9
на
базе
Можно выделить три формы интерактивности:
1.
Реактивная
интерактивность:
обучающиеся
отвечают
на
поставленные программой задачи. В данном случае строго определяется
последовательность задания (линейная модель обучения). Приложения
данного типа выступают в качестве первичного ознакомления с
исследуемым материалом.
2. Действенная интерактивность: здесь, не программа управляет
учащимися, а учащиеся управляют программой. Под управлением
программой, подразумевается нелинейная модель обучения. Иными
словами, ученики сами выбирают последовательность выполнения
заданий, в предложенном программой порядке или самостоятельно в
рамках приложения. Данный тип приложения использует гипертекстовую
разметку и имеют структуру электронных энциклопедий, справочников,
баз данных. Модель такого типа наиболее эффективна при дистанционном
обучении.
3. Взаимная интерактивность: Взаимная адаптация друг к другу
учащегося и программы. Модель дает возможность вести исследования,
одолевая различные преграды, решать отдельные задачи, структурировать
последовательность задач. Содержание обеспечивается мотивационными
игровыми,
соревновательными,
исследовательскими
элементами.
Примерами такого типа приложений являются - игры-приключения,
практикумы, тренажеры, обучающие программы и др. [4]
10
1.3. Выбор инструментов
Подбирая инструмент для 3D моделирования, в первую очередь,
необходимо определить, для решения каких задач подходит программа.
Наиболее популярной программой в сфере 3D моделирования, является
Autodesk 3ds Max, так как это самый мощный, многофункциональный и
универсальный инструмент для создания трехмерной графики. 3D Max
является эталоном 3d визуализации, для него выпущено огромное
количество дополнительных плагинов, расширяющих и без того большие
возможности.
Основным
достоинством
данной
программы
является
ее
многофункциональность. Ее можно использовать начиная от создания
архитектуры и различного рода дизайна интерьеров и заканчивая
созданием мультипликации и анимированных видеороликов. Также
Autodesk 3ds Max совершенен в создании статичной графики. С его
помощью в короткие сроки создаются реалистичные картинки интерьеров,
экстерьеров, а также отдельных предметов. Подавляющие большинство
создаваемых 3D-моделей разрабатываются именно в формате 3ds
Max(.max), что доказывает его фундаментальность - это и является самым
большим ее плюсом. К недостаткам же, можно отнести высокую
стоимость, но при этом существует бесплатная студенческая версия на 3
года.
Помимо 3ds Max существуют программы имитации процесса
трехмерного скульптинга «лепки», посредством трёхмерного рендеринга в
реальном времени. Ярким представителем трехмерной “лепки” является ZBrush[5] программа для 3D моделирования, созданная компанией
Pixologic.
ZBrush
хорошо
подходит
для
создания
высоко
детализированных моделей любой степени сложности. Из преимуществ
11
можно выделить простой, полностью настраиваемый интерфейс. Также,
программа не нуждается в большом количестве системных ресурсов
приложение способно работать даже на 32-разрядных системах, из
недостатков можно отметить отсутствие русской локализации, а также
высокую
стоимость.
Также
стоит
упомянуть
об
инструментах
текстурирования. Говоря об инструментах текстурирования, имеется в
виду программы для редактирования растровых изображений. На
сегодняшний день лучшей программой в данной сфере является Adobe
Photoshop. Программа содержит огромное множество средства для
монтажа, коррекции, подготовки растровых изображений к печати и их
высококачественного
вывода.
Под
Photoshop
выпущено
большое
количество плагинов, что делает работу в нем еще более функциональной.
Как и в случае с программами моделирования недостаток один - это
высокая цена. Однако существует масса бюджетных аналогов, например
таких как GIMP. Он создавался с учётом пожеланий пользователей, но в
основном согласно предпочтениям разработчиков. Обладает более
упрощенным функционалом в сравнении с Photoshop.
Для выполнения поставленной задачи ограничимся использованием
Zbrush. Для осуществления интерактивности воспользуемся сайтом
https://sketchfab.com/​.
У каждого человека есть некоторый запас знаний, которые он
получает и усваивает различными способами. В случае если полученных
знаний не хватает для решения поставленной задачи, мы обращаемся в
хранилище подобных знаний - в библиотеку. Библиотеки компьютерных
программ также хранят различную информацию и предоставляет ее
пользователям.
Другими словами библиотеки в среде программирования - это
12
файлы с некоторым набором определенных подпрограмм, которые где-то
хранятся и доступны для использования.
В
сфере веб технологий существует множество различных
библиотек, позволяющих реализовывать такие вещи, как выразительные
графические
эффекты,
перетягивание
или
сортировка
предметов,
анимация и многое другое. В качестве примера рассмотрим JavaScript
библиотеку jQuery[8] разработанную Джоном Резиг.
Итак, как было сказано выше jQuery - это JavaScript-библиотека,
обеспечивающая кроссбраузерную поддержку приложений, а также делает
разработку на javascript на порядок проще. ​
За последнее время библиотека
претерпела множество изменений и на данный момент содержит
расширенный перечень возможностей, полезных для широкого круга
задач.
Впечатляющий
потенциал
механизма
селекторов,
позволяет
получить доступ к различным элементам объектной модели документа,
что делает библиотеку jQuery очень популярной. Обычно для получения
ссылки на DOM-элемент посредством Javascript используется метод
getElementByld().
В
качестве
примера
изменим
HTML
-
код
элемента
с
идентификатором myid: document.getElementByld ('myid').innerHTML =
"Новый текст".
Однако код выполняющий то же самое на jQueryбудет в
два раза короче: $("#myid").html("Новый текст");
Подводя итоги, выделим основные преимущества библиотеки jQuery
такие как: Легкость понимания. Библиотека jQuery призвана максимально
упростить использование JavaScript и сделать процесс разработки легче и
приятнее.
Кроссбраузерность. Практически со стопроцентной вероятностью,
13
проекты созданные при помощи jQuery будет поддерживаться любыми
современными браузерами. В отличии от обычного JavaScript, который не
дает такой гарантии.
Разобравшись что же такое библиотеки и для чего они нужны, стоит
упомянуть о фреймворках. Фрейм​
ворк – это про​
грамм​
ное обес​
пе​
че​
ние,
облег​
ча​
ю​щее
раз​ра​ботку
и
объ​
еди​
не​
ние
раз​
личных
ком​
по​
нен​
тов
боль​
шого про​грамм​ного про​ек​
та. Основным отличием фрейм​
ворка от
биб​
лио​
теки заключается, в
исполь​
зо​
вание библиотеки в про​
грамм​
е в
качестве набора под​си​стем схожей функ​
ци​
о​
наль​
но​
сти, не влияющей на
архи​
тек​
туру основ​ного про​грамм​
ного про​
дукта не накла​
ды​
вая на неё
ника​
ких огра​ни​че​ний. Пра​вила постро​
е​
ния архи​
тек​
туры при​
ло​
же​
ния
диктует - фрейм​ворк. На началь​
ном этапе раз​
ра​
ботки задает пове​
де​
ние по
умол​
ча​
нию, фор​ми​руя кар​кас, кото​
рый будет необходимо изме​
нять и
рас​
ши​
рять в соответствии с ука​
зан​
ными тре​
бо​
ва​
ни​
ями. Фрейм​
ворк может
вклю​
чать дополнительные про​
грам​
мы, язык сце​
на​
риев, биб​
лио​
теки кода
и дру​
гое программное обеспечение, упрощающие раз​
ра​
ботку. Глав​
ным
пре​
иму​
ществом
исполь​зо​ва​
ния
фрейм​
вор​
ков
явля​
ется
то,
что
веб-при​
ло​же​ния зачастую исполь​
зуют стан​
дар​
ти​
зи​
ро​
ван​
ную струк​
туру
орга​
ни​
за​
ции ком​по​нен​тов. В каком то смысле, фрейм​
ворк - это мно​
же​
ство
кон​
крет​
ных и абстракт​ных клас​
сов, а также опре​
де​
ле​
ний спо​
со​
бов их
вза​
и​
мо​
от​но​ше​ния. Кон​крет​ные классы обычно реа​
ли​
зуют вза​
им​
ные
отно​
ше​
ния между клас​са​ми, а абстракт​
ные классы являются точками
рас​
ши​
ре​
ния,
при кото​рых кар​
касы могут быть адап​
ти​
ро​
ва​
ны и
использованы. Так например AngularJS - это open source-JavaScript
фреймворк, позволяющий создавать одностраничные приложения. После
запуска в 2009 году Angular.js является самым востребованным
JavaScript-фреймворком.
14
Для упрощения работы, а также быстроты разработки и исключения
большого количества ошибок вёрстки связанных с совместимостью
различных версий браузеров, воспользуемся CSS фреймворком Bootstrap.
Bootstrap — CSS фреймворк, включающий в себя HTML и CSS
шаблоны оформления типографики, кнопок, веб-форм, меток, блоков
навигации и других элементов веб-интерфейса, включая JavaScript
расширения.
Основные преимущества Bootstrap:
●
Используя шаблоны дизайна и классы - экономим время, что
позволяет сконцентрироваться на других разработках;
●
Динамичные макеты Bootstrap масштабируются на разные
устройства и разрешения экрана без изменений в разметке
благодаря системе сеток;
●
Компоненты Bootstrap используют одинаковый стиль и шаблоны
с помощью главной библиотеки;
●
Данная платформа проста в использовании;
●
Еще одной особенностью Bootstrap - это открытости исходных
кодов и бесплатной загрузки.
В качестве основных недостатков использования фреймворков отметим
то, что странице приходится “тащить” за собой лишние стили фреймворка,
даже если большая их часть не используется. Тем не менее фреймворк
служит прекрасным инструментом для создания оригинальных веб
страниц.
15
Рассмотрим основные отличия вёрстки с помощью css фреймворка
от вёрстки стандартными средствами, которое заключается в том, что
Bootstrap внедряет представление компонентов. Компоненты - это часто
используемые заранее заготовленные HTML блоки с заданными стилями.
Также компоненты временами используют JavaScript. В процессе работы
можно определить свой внешний вид для компонента или же использовать
готовый компонент. За частую нужно лишь поменять значение
переменных в Bootstrap. Однако при необходимости более гибких
изменений, разработчик может изменить HTML и CSS по своему
усмотрению в любое время.
В
разрабатываемом
веб-приложении
будут
использоваться
следующие компоненты:
1. Система сеток (row, col) - для верстки колонками;
2. Линейная форма (form-inline) - для поиска, группы ввода
(input-group), кнопка (btn);
3. Навигационное меню (nav) - для навигации.
Все переменные, которые есть в Bootstrap можно посмотреть на странице
http://getbootstrap.com/customize/
16
ГЛАВА 2. РАЗРАБОТКА ВЕБ-ПРИЛОЖЕНИЯ ДЛЯ ИЗУЧЕНИЯ
АНАТОМИЧЕСКИХ МОДЕЛЕЙ СЕРДЦА
2.1. Создание и текстурирование общей модели
и модели сердца в разрезе
Для создания модели сердца будем работать в программе компании
Pixologic - ZBrush. Отличительной особенностью данного ПО является
имитация процесса трехмерной лепки - скульптинг.
Прежде чем приступить к скульптингу создадим основу модели
(каркас) при помощи ZSphere.
Рис.1. Создание каркаса
17
Далее используя клавиши навигации создаем из ZSphere нечто
напоминающее наше сердце. Для предпросмотра пользуемся горячей
клавишей A.
Рис.2. Создание каркаса
Рис.3. Предпросмотр
В режиме предпросмотра редактировать полигоны нельзя, поэтому
убедившись что каркас нас устраивает создаем полигональную сетку. Для
этого переходим во вкладку Adaptive Skin и после небольших настроек
нажимаем на кнопку Make Adaptive Skin, для того чтобы преобразовать
каркас в полигональную сетку.
18
На
данном
этапе
Рис.4. Создание сетки
каркас создан и теперь
у
нас
есть
lowpoly(низкополигональная) модель. Используя различные кисти, такие
как “Move”, “ClayTubes”, “Smooth” и т.д. придаем грубому каркасу, более
правильные черты. Для увеличения количества полигонов используем
сочетание клавиш ctrl+D или во вкладке “Geometry”. На данном этапе
стенки сердца очень тонки, добавим объем при помощи “Extract” из
вкладки “SubTool”.
Рис.5. Конечный этап создания
19
С помощью кисти “Curve Tube” создаем коронарные вены. Выбранная
кисть создает трубку заданного радиуса по заданному сплайну.
Воспользуемся инструментом “DynaMesh” из вкладки “Geometry” для
создания одной геометрии из наших вен.
Рис.6. Создание коронарных вен
Рис.7.Прим-е “DynaMesh”
На рисунке 7 наблюдается незначительное ухудшение качества,
данный результат был получен при разрешении 512 в настройках
“DynaMesh”. Разрешение 512 означает, что наш объект вписывается в
воображаемый куб стороны которого состоят из 512 полигонов. Для
большей детальности разрешение можно увеличить.
20
На основе созданного сердца сделаем вид в разрезе, удалив часть
полигонов. Также удалим аорты и вены и сгладим края.
Рис.8. Разрез
Как видно на рисунке 8 внутри сердце пустое, необходимо добавить
мышечную
межжелудочковую
перегородку,
трехстворчатый
и
митральные клапаны, клапан легочного ствола и сосочковые малые
мышцы. Также обратим внимание что стенки левого желудочка толще
стенок правого рисунок 9.
21
Рис.9. Сердце в разрезе
22
Методом полигонального моделирования создаем “внутренности” ,
импортируем и объединяем их с моделью в разрезе.
Рис.10.Создание “внутренностей”
23
Рис.11. Сердце в разрезе (общий вид)
Для более детальной анимации в будущем, создадим клапан аорты и
клапан легочного ствола отдельно.
24
Переходим к созданию текстур. Для текстурирования воспользуемся
методом “polypaint” - это метод покраски при котором цвет наносится на
вершины, напрямую во вьюпорте(окно редактирования).
Рис.12. PolyPaint
Для экспорта наших текстур необходимо сделать UV развертку.
Переходим во вкладку “Zplugin” и воспользуемся инструментом “UV
Master”
-
это
автоматический
инструмент
создания
развертки,
обладающий рядом настроек.
Активируем “Enable Control Painting” и используя кнопки “Protect” рисуем область в которой расположение швов нежелательно, а “Attract” область в которой необходимо расположить швы.
25
Рис.13. UV Master
Рис.14. Расположение швов
Таким образом, нижнюю часть сердца мы помечаем с зажатой кнопкой
Protect, а верхнюю с зажатой кнопкой Attract. После нажатия Unwrap
развертка применяется и мы видим расположение швов (рис.14).
Нажав на кнопку “Flatten” можно посмотреть саму развертку
рисунок 15. Сохраняем полученную развертку в удобном для нас формате.
Теперь загрузим развертку в графический редактор Gimp для добавления
некоторых деталей и создадим карту нормалей рисунок 16.
26
Рис.15. Развертка
Рис.16. Карта нормалей
27
Аналогично тому как мы создавали текстуры для общей модели
сердца, создаем текстуры для разреза методом “polypeint”. Развертку в
Zbrush можно создать двумя способами, первый способ через UV Master
уже был рассмотрен при создании общей модели. Для случая с разрезом
воспользуемся инструментом “UV map”. Основным отличием
инструмента UV map от UV Master является то, что полученная развертка
будет не читаема для человека.
Рис.17. Развертка с помощью инструмента UV map
Развертку такого типа используют в редких случаях, при условии что
текстура не нуждается в дальнейшей доработке.
28
2.2. Анимации моделей
Для создания анимации воспользуемся Blender. Сохраним нашу
модель в виде объекта формата .obj и импортируем в блендер.
Создавать анимацию будем методом “анимации по ключам”. Смысл
данного метода заключается в том, что создается базовая модель и
относительно нее создаются ключи деформации.
Перейдем в панель свойств сетки и развернем вкладку “Shape Keys”.
Кликнув по “+” добавим базовый ключ фомы относительно которого
будут происходить изменения и сразу же создадим еще один. Выбрав
новый ключ выставим его значение на 100%(Value: 1) и перейдем в режим
редактирования.
Теперь
изменяя
наше
сердце,
результат
будет
сохраняться в первом ключе деформации(рис.1). Таким образом создадим
ключи для: левого, правого желудочка, левого, правого предсердия, а
также для легочных вен, дуги аорты и верхней, нижней полой вены.
Значение Value не обязательно должно быть равным 1, так как это всего
лишь означает процент деформации. Таким образом значение Value может
быть как больше 1, так и меньше. Меняя значение на заданном
диапазоне(Range), мы будем получать анимацию той или иной части.
Перейдем к временной шкале для созданию ключей анимации.
Создаем первый ключ в нулевом кадре, выставляем значения ключей
формы на 0 и нажимаем клавишу “I” для сохранения параметров сердца.
Переходим к 10 кадру и выставляем следующие значения(рис.19)
ключей формы.
29
Рис.18. Создание ключей форм
Рис.19. Создание кадра
Переходим в 20 кадр выставляя значения на противоположные и так далее.
В итоге получившаяся анимация имеет 40 кадров и на 40 кадре
прерывается. Сделаем ее цикличной, перейдя в окно редактирования
анимации нажимаем сочетание клавиш “Shift+E” для перехода в режим
экстраполяции и из выпавшего окна выбираем “Make Cyclic”.
Рис.20. График анимации
На рисунке 20 изображен график анимации ключей деформации,
относительно времени и координат. Черные точки - это ключи анимации, а
желтые линии - изменение ключей деформации. Отдельно настроим
некоторые точки для более плавной анимации.
30
Для создания анимации сердца в разрезе будем также использовать
Blender, с той лишь разницей, что помимо Shape Keys будем использовать
кости. Создадим 5 костей, первая(основная) для мышечной
межжелудочковой перегородки и по две для левого и правого желудочков.
Во вкладке “Display” отметим пункт “X-Ray” для того что кости было
видно через модель в момент редактирования. Сочетанием клавиш ctrl+P
привяжем кости к модели. Перейдя во вкладку “Weight Paint” распределим
веса, с которыми кости будут взаимодействовать на модель.
Рис.21. Распределение веса
31
Создадим несколько Shape Keys для клапанов и отверстий вен.
Расставим ключи на тайм лайне через каждые 10 кадров и зациклим
анимацию.
На данном этапе анимирование общей модели сердца завершено,
сохраняем модель в формате .blend и загружаем на sketchfab.
2.3. Разработка веб приложения
Приступая к разработке стоит оговорится, что процесс разработки
веб-приложения будет основан на блочной верстке[7]. Под термином
“блочная блочная верстка” подразумевается верстка div блоками или
слоями “layer”. Основное отличие блочной вёрстки от табличной,
заключается в том, что табличная верстка подразумевает, что элементы
страницы находятся внутри тега <table>, в то время как блочная вёрстка
основана на использовании универсальных тегов <div>, внутри которых
размещается различное содержимое, включая другие теги.
Помимо отличий тегов, блочная вёрстка лишена недостатков
табличной, например таких как: более простая индексация поисковыми
системами, компактность кода, <div> блоки универсальны, что позволяет
использовать их для всего, тогда как <table> — таблица, используемая для
отображения табличных данных.
Можно выделить три принципа блочной верстки:
Первый — повсеместное использование тега <div>, который будет
являться базовым элементом блочной структуры.
Второй — принцип разделения кода, другими словами содержимое
от оформления нужно отделять. Такой подход делает структуру понятней.
Третий принцип — таблицы используются не везде, а по
необходимости, при этом полностью отказываться от них не стоит.
32
Рассмотрим условный макет будущего приложения (Рис.22.) , где
1 - header или “шапка”, 2 - вертикальный блок навигации, 3 - блок
контента и 4 - footer “подвал”.
Рис.22. Макет приложения
Для начала создадим HTML каркас. Здесь нам впервые встречается
Bootstrap компонент
– колонки. Родительскому элементу колонок
задается класс “row”, далее с префикса “col-” начинаются классы колонок,
после задается размер экрана (xs, sm, md, lg) и заканчивается все это
относительной шириной колонки по умолчанию от 1 до 12.
<head>
</head>
<body>
<div class="header">
</div>
<div class="content">
<div class="row">
<div class="col-md-2">
</div>
<div class="container">
<div class="main">
33
</div>
<div class="col-md-10">
</div>
</div>
</div>
</div>
<div class="menu">
<div class="footer">
</div>
</div>
</body>
Каркас собран, далее опираясь на второй принцип блочной верстки,
создадим файл head.php, в него мы разместим содержимое тега <head>.
<meta charset="UTF-8">
<title> <?=$title?> </title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
Добавив в тег title <?=$title?>, это позволяет отображать значение
некой переменной $title в качестве титула. Перейдем к нашему каркасу и
создадим переменную $title в теге <head>. Подключаем файл head.php с
помощью выражения require_once, отличие данного выражения от
обычного require в том, что PHP проверит, включался ли уже данный
файл, и, если да, не будет включать его еще раз.
Создадим блок файл “шапки” header.php который будет содержать
логотип - ссылку на домашнюю страницу и поиск по сайту. Другими
словами, создаем <div> контейнер с классом header, в него помещаем тег
<a> в качестве контейнера для тега <img> с атрибутом alt для
34
альтернативного текста в случае если браузер не загружает изображение, и
тег <form> - контейнер для будущей формы поиска. Для оформления
формы, воспользуемся ранее подключенным css фреймворком bootstrap.
<div class="header">
<a href="/"><img src="" alt="logo"></a>
</div>
Далее переходим к созданию блока меню, файл menu.php.
Тег <nav> задает навигацию по сайту, атрибут id потребуется далее для
оформления стилями. Тег <span> необходим для определения строчных
элементов. Его отличие от блочных элементов, таких как <table>, <p> или
<div> заключается в том, что с помощью данного тега можно выделить
часть информации внутри других тегов с установкой собственного стиля.
<nav id="menuVertical">
<ul>
<li><a
href="/"><span>Home</span></a></li>
<li><a
href="page1.php"><span>Page1</span></a></li>
<li><a
href="page2.php"><span>Page2</span></a></li>
</ul>
</nav>
35
Для главной ”домашней ” страницы, посредством библиотеки jQuery
и расширения Slick, создадим слайдер с картинками - файл slider.php.
Сам слайдер представляет собой несколько контейнеров, которые в
свою очередь имеют контейнер с изображением и контейнер с некоторым
описанием этого изображения. Ниже приведен пример для двух слайдов.
Контейнер <div> с классом "sl__slide" - общее оформление слайда, а
<span> с классом "sl__text" - описание слайда. Классы sl__zag и sl__desc для оформления заголовка и текста соответственно.
<div class="sl__slide"><a href="#"></a><img
src="img/sl1.jpg" alt="Images 1">
<div class="sl__text">
<h3 class="sl__zag">Slide 1</h3>
<p class="sl__desc">Text slide #1</p>
</div>
</div>
<div class="sl__slide"><a href="#"></a><img
src="img/sl2.jpg" alt="Images 2">
<div class="sl__text">
<h3 class="sl__zag">Slide 2</h3>
<p class="sl__desc">Text slide #2</p>
</div>
</div>
На этом создание слайдера не закачивается, в таком виде мы будем иметь
лишь набор вертикально расположенных картинок с подписями (рис.23).
36
Рис.23.Создание слайдера
Для того чтобы слайдер - стал слайдером, необходимо подключить CSS
стили аддона slick, добавив в хидер следующие строки:
<link rel="stylesheet" href="slick/slick.css">
<link rel="stylesheet"
href="slick/slick-theme.css">
Также, в конец документа подключаем сам slick скрипт:
<script src="slick/slick.min.js"></script>
37
Теперь необходимо инициализировать наш скрипт и привязать его к
классу sl. Для этого создадим небольшой скрипт с настройками:
$('.sl').slick({
autoplay: true,
autoplaySpeed: 2500,
dots: true,
arrows: false
});
Где autoplay: true - автоматическая смена слайдов, autoplaySpeed:
2500 - скорость смены слайдов, dots: true - добавление точек навигации
под слайдером, arrows: false - убираем стрелки по бокам слайдера.
Создавая footer, обратим внимание на наш макет (Рис.22). Здесь 4 “подвал”, принадлежит вертикальному блоку меню навигации, по этому
создадим контейнер с классом main, внутрь которого поместим еще один
контейнер с классом footer.
<div class="menu">
<div class="footer">
</div>
</div>
На данном этапе все блоки созданы, приступим к оформлению.
Создадим файл style.css и подключим его в head. Опишим ключевые
моменты: Для header задаем whith 100% - растяжение на всю ширину
экрана, способ позиционирования fixed, так как позиционированные
элементы могут накладываться друг на друга в определенном порядке,
зададим z-index значение 999999 - для того чтобы содержимое контента не
заползало на header при прокрутке.
38
Тегам ul li a, идентификатора menuVertical задаем следующие
аргументы: display: block - для блочного отображения элементов,
text-transform: uppercase - преобразование элементов текста в верхний
регистр, font-weight: bold - устанавливает полужирное начертание,
line-height: - межстрочный интервал установим в 35 пикселей.
Зададим классу sl__slide способ позиционирования relative, а классу
sl__text абсолютное позиционирование, прижмем текст к низу слайда
установив положение нижнего края содержимого как bottom: 0. Завершая
верстку приложения, зададим для всех элементов отступы, выравнивание
и цвета (см. Приложение).
39
ЗАКЛЮЧЕНИЕ
В
выпускной
квалификационной
работе
было
разработано
веб-приложения для интерактивного изучения анатомических 3D моделей
сердца, посредством JavaScript библиотеки jQuery с аддоном slick и CSS
фреймворка bootstrap. Наглядно продемонстрированы все этапы создания
моделей, текстур и анимации, а также этапы разработки веб-приложения.
Результаты
работы
научно-практической
естественнонаучного
были
представлены
конференции
образования
и
на
Международной
“Актуальные
адаптационных
проблемы
возможностей
обучающихся” и опубликованы в журнале [9].
В процессе выполнения работы были решены следующие задачи:
1. Проведен анализ учебно-методической литературы и электронных
изданий, подробно разобраны уровни интерактивности, JavaScript
библиотеки, работа фреймворков, а также подобраны подходящие
средства для отображения 3-х мерной графики и реализации
веб-приложения;
2. Создан макет сайта. По этому макету, с помощью JavaScript
библиотеки и CSS фреймворка разработано веб-приложение для
интерактивного изучения анатомических 3D моделей сердца.
Веб-приложение содержит подробное анатомо-морфологическое
описание сердца, общие принципы работы сердца, понятие сердечного
цикла, описание основных механизмов регуляции деятельности. Уделено
большое внимание вопросам физиологии сердечно-сосудистой системы
человека. Веб приложение ориентировано на широкий круг пользователей,
оно будет полезно для студентов – биологов, учителей, школьников.
40
СПИСОК ЛИТЕРАТУРЫ
1. Выготский, Л.С. Воображение и творчество в детском возрасте / Л.С.
Выготский. – СПб.: СОЮЗ, 1997. – 96 с.
2. Мясоед, Т.А. «Интерактивная технология обучения. Специальный
семинар для учителей» / Т.А. Мясоед, М., 2004 – 151 с.
3. Хозяинов, Г.И. Средства обучения как компонент педагогического
процесса / Хозяинов Г.И. //юбилейный сборник трудов ученых РГАФК,
посвященный 80-летию академии. – М.: 1998. –Т.5. – С. 130-136.
4. Нурмухамедов, Г.М. О подходах к созданию электронного учебника /
Г.М.Нурмухамедов информатика и образование. –2006. – №5, С. 104-107.
5. Эрик Келлер. Introducing ZBrush, 2009​Самоучитель/​
Copyright © 2008 by
Wiley Publishing, Inc., Indianapolis, Indiana. - 312с.
6. Самоучитель Blender 2.6. – СПб.: БХВ-Петербург, 2013. 384 с.
7. Онлайн справочник HTML и CSS.[Электронный ресурс]. Режим доступа
http://htmlbook.ru/​Дата доступа: 12.5.2017
8. jQuery аддон slick.[Электронный ресурс]. Режим доступа:
http://kenwheeler.github.io/slick/​Дата доступа: 17.6.2017
9. Федяева, Т.В. Использование интерактивных средств обучения в
современной школе / Т.В. Федяева, Ю.С. Федяев, А.А Моисеенко //
Актуальные проблемы естественнонаучного образования, защиты
окружающей среды и здоровья человека (Настоящее и будущее
подготовки учащихся и студентов университетов в области естественных
наук). – Орел: ФГБОУ ВО «Орловский государственный университет
имени И.С. Тургенева», 2017. – С. 188-190.
41
ПРИЛОЖЕНИЕ
Исходный код веб-приложения
Листинг index.php
<!DOCTYPE html>
<html lang="ru">
<head>
<?php
$title = "Home Page";
require_once "blocks/head.php"
?>
</head>
<body>
<?php require_once "blocks/header.php"?>
<div class="content">
<div class="row">
<?php require_once "blocks/menu.php"?>
<!--Menu end-->
<div class="container">
<?php require_once "blocks/slide.php"?>
<div class="col-md-10" id="staff">
TEXT
</div>
</div>
</div>
<?php require_once "blocks/footer.php"?>
<script src="slick/slick.min.js"></script>
<script src="js/myclass.js"></script>
</body>
</html>
42
Листинг page1.php
<!DOCTYPE html>
<html lang="ru">
<head>
<?php
$title = "Page1";
require_once "blocks/head.php"
?>
</head>
<body>
<?php require_once "blocks/header.php" ?>
<div class="content">
<div class="row">
<?php require_once "blocks/menu.php" ?>
<!--Menu end-->
<!--content-->
<div class="sketchfab-embed-wrapper">
<iframe id="staff3" width="900"
height="600"
src="https://sketchfab.com/models/60b5299ec20d4193b
07203c1903d23c1/embed"
frameborder="0" allowvr
allowfullscreen mozallowfullscreen="true"
webkitallowfullscreen="true"
onmousewheel=""><!--?autostart=1&amp;ui_related=0->
</iframe>
</div>
<div class="container">
<div class="col-md-10" id="staff">
TEXT
</div>
</div>
<!-</div>-->
</div>
</div>
<?php require_once "blocks/footer.php"?>
43
</body>
</html>
Листинг page2.php
<!DOCTYPE html>
<html lang="ru">
<head>
<?php
$title = "Page2";
require_once "blocks/head.php"
?>
</head>
<body>
<?php require_once "blocks/header.php" ?>
<div class="content">
<div class="row">
<?php require_once "blocks/menu.php" ?>
<!--Menu end-->
<!--content-->
<div class="sketchfab-embed-wrapper">
<iframe id="staff3" width="900"
height="600"
src="https://sketchfab.com/models/c072fbe976d242719
df8e2d859189f20/embed"
frameborder="0" allowvr
allowfullscreen mozallowfullscreen="true"
webkitallowfullscreen="true"
onmousewheel=""
autoplay="1">
</iframe>
</div>
<div class="container">
<div class="col-md-10" id="staff">
TEXT
</div>
</div>
</div>
44
</div>
<?php require_once "blocks/footer.php"?>
</body>
</html>
Листинг head.php
<meta charset="UTF-8">
<title><?=$title?></title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="slick/slick.css">
<link rel="stylesheet"
href="slick/slick-theme.css">
<script type="text/javascript"
src="https://static.sketchfab.com/api/sketchfab-vie
wer-1.0.1.js"></script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1
.7.2/jquery.min.js"></script>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-a
wesome/4.7.0/css/font-awesome.min.css">
Листинг header.php
<div class="header">
<a href="index.php"><img src="img/logo2.png"
alt="Whitesquare logo"></a>
<form name="search" action="#" method="get"
class="form-inline form-search pull-right">
<div class="input-group">
<label class="sr-only"
for="searchInput">Search</label>
<input class="form-control"
id="searchInput" type="text" name="search"
placeholder="Search">
<div class="input-group-btn">
<button type="submit" class="btn
btn-primary" id="serchBtn">Search</button>
</div>
45
</div>
</form>
</div>
Листинг footer.php
<div class="menu"><div class="footer">#Text
2017</div></div>
Листинг menu.php
<div class="col-md-2">
<nav id="menuVertical">
<ul>
<li><a href="index.php"><div
class="img_n"></div><span><i class="fa
fa-h-square"></i>ome</span></a></li>
<li><a href="page1.php"><div
class="img_n"></div><span>Page1</span></a></li>
<li><a href="page2.php"><div
class="img_n"></div><span>Page2</span></a></li>
</ul>
</nav>
</div>
Листинг slickOp.js
$('.sl').slick({
autoplay: true,
autoplaySpeed: 2500,
dots: true,
arrows: false,
speed: 1000
});
46
Листинг style.css
* {
margin: 0;
}
html, body {
height: 100%;
}
body {
background-color: #555;
color: white;
}
.header{
padding: 20px;
width: 100%;
background: #444;
color: black;
min-height: 80px;
position: fixed;
z-index: 999999;
}
#serchBtn{
background-color: #ffcc11;
border-color: #ffcc11;
color: black;
}
/*Выравнивание текста на страницах*/
#staff3{
margin-left: 10%;
margin-top: 100px;
}
#staff{
margin-left: 8%;
margin-top: 15px;
padding: 15px;
}
47
/*слайдер*/
img{
max-width: 100%;
height: auto;
}
.main{
max-width: 900px;
margin: 100px auto;
}
.sl__slide{
position: relative;
}
.sl__text{
position: absolute;
bottom: 0;
background: rgba(0,0,0,0.5);
width: 100%;
color: #ffcc11;
text-align: center;
text-shadow: 1px, 2px, 3px, rgba(0,0,0,0.5);
height: 125px;
padding: 0 0;
}
.sl__zag, .sl__desc{
margin: 0;
padding: 0 10px;
text-align: center;
}
48
/* Menu */
#menuVertical{
width: 71px;
height: auto;
position: fixed;
z-index: 5;
top: 79px;
transition: .3s;
}
/*убрали пункты от ul задали размер*/
#menuVertical ul{
display: block;
width: 54px;
height: auto;
margin: 0;
padding: 0;
list-style: none;
position: relative;
}
/*Список меню*/
#menuVertical ul li a{
position: relative;
display: block;
width: 198px;
height: auto;
box-sizing: border-box;
font-size: 16px;
text-transform: uppercase;
font-weight: bold;
color: #ffcc11;
line-height: 2em;
padding: 10px 15px;
background: #555;
text-decoration: none;
text-shadow: 2px 2px 3px #111;
text-align: center;
}
49
/*Цвет фокуса*/
#menuVertical ul li a:hover,
#menuVertical ul li:hover a{
background: #ffcc11;
color: #111;
padding: 10px 0 10px 20px;
}
/*Фон Меню*/
.menu{
width: 198px;
height: 100%;
background: #555;
box-shadow: 5px 2px 10px #444;
position: fixed;
top: 79px;
z-index: 3;
}
.footer{
position: absolute;
width: 198px;
height: 88px;
bottom: -29px;
margin-bottom: 78px;
z-index: 13;
text-align: center;
padding-top: 22px;
}
.footer, #searchInput{
background-color: #444;
color: black;
}
50
/*Смена разраешения*/
@media screen and (max-width: 1152px) {
.menu {
width: 72px;
transition: .3s;
}
#menuVertical ul li a {
width: 72px;
transition: .3s;
}
#menuVertical ul li {
width: 72px;
}
#menuVertical ul li ul li a {
left: -141px;
}
.footer {
transform: rotate(-90deg);
left: -70px;
height: 24px;
bottom: 70px;
text-align: left;
padding-left: 11px;
padding-bottom: 25px;
padding-top: 10px;
}
}
51
1/--страниц
Пожаловаться на содержимое документа