close

Вход

Забыли?

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

Юлбарсова Барнохон Баходиржоновна. Разработка проекта по визуализации интерьера помещения (с использованием компьютерной графики и веб-технологий)

код для вставки
2
Содержание
Введение…………………………………………………………………………3
Глава 1. Формулировка поставленной задачи и анализ средств ее
реализации……………………………………………………………………….8
§ 1.1 постановка задачи…………………………………………………..8
§ 1.2 Анализ ПО для решения поставленной задачи……………..…….9
Глава 2. Проектирование модели помещения………………………………..11
§ 2.1 Создание стен……………………………………………………...11
§ 2.2 Создание окон……………………………………………………..13
§ 2.3 Создание дверей…………………………………………………..14
§ 2.4 Создание стола…………………………………………………….16
§ 2.5 Создание дивана…………………………………………………..20
§ 2.6 Создание стула……………………………………………………25
§ 2.7 Создание колонны………………………………………………..30
§ 2.8 Текстурирование………………………………………………….36
§ 2.9 Хостинг и домен…………………………………………………..40
§ 2.10 Код программы…………………………………………………..42
Заключение……………………………………………………………………..45
Список литературы…………………………………………………………….46
3
ВВЕДЕНИЕ
Обоснование выбора темы исследования и ее актуальность
Трехмерная графика – это совокупность инструментов и приемов,
которые предназначены для создания объемных объектов. Чаще всего
графика
применяется
в
компьютерных
играх,
на
телевидении,
в
кинематографе, в строительстве, в печатных изданиях и, конечно же, в
рекламе. 3D визуализация – это эффективно и наглядно. Можно заказать
3D изображение, и просмотреть то или иное помещение, которое вы хотите
спроектировать или приобрести. Хорошая 3D картинка, которая дополнена
чертежами, эскизами, и технико-экономическими показателями, способна
наглядно показать все минусы и плюсы данного помещения или объекта.
Трехмерное моделирование позволяет увидеть предметы, которых на
данный момент не существует, или существуют, но нет возможности их
увидеть «вживую». Если объект создавал настоящий мастер, то в таком
случае достигается эффект присутствия, эффект реальности. Разработчик,
который
создает
трехмерный
объект
или
сцену,
должен
обладать
соответственными навыками, уметь правдоподобно вписывать нарисованные
объекты в окружение, иметь хороший художественный вкус и так далее.
Другими словами, данные объекты отличаются правдоподобностью. На
сегодняшний момент 3D изображения являются пиком совершенства в
рекламной и дизайнерской индустрии.
Без сомнений, объекты в трехмерном изображении убедят клиента в
том, что он сделал правильный выбор, обратившись в данное рекламное
агентство или дизайнерскую студию [1].
Степень разработанности проблемы
Сайты хранят в себе массу полезной и важной информации, они
находятся в открытом доступе для любого пользователя, а потому так
широко пользуются спросом на сегодняшний день.
4
Каждый сайт ориентирован на группу пользователей, которые
объединяются одними интересами и ищут информацию определенного
характера, а если эта информация хранится в одном месте, собрана по
крупицам и может дать развернутый ответ на вопрос, который ставит перед
собой посетитель - такой сайт будет цениться вдвойне.
Исходя
из
этого,
можно
с
уверенностью
предположить,
что сайты создаются именно для сбора и хранения информации, которая
находит своего конечного потребителя, а чем больше таких потребителей
посещает сайт, тем большую выгоду из своего проекта, извлекает его
владелец [2].
Во всем мире превыше всего ценится качество, поэтому информация на
сайтах обязательно должна быть качественной, интересной, развернутой и
полезной. На какую бы тему ни был создан сайт, он должен раскрывать ее
максимально обширно, от самого начала и до малейших мелочей. К примеру,
если вы создали сайт на компьютерную тематику, не достаточно просто
описать что такое сайт, персональный компьютер и для чего создаются
сайты, расскажите о сайтостроении в самых разных его проявлениях, тогда
пользователи обязательно заинтересуются вашим проектом и посетят его
снова и снова, зная, что с каждым днем, информационный объем вашего
сайта будет пополняться чем-то интересным, и в то же время полезным для
посетителей.
Конечно, информацию можно черпать с различных источников, к
примеру из книг, средств массовой информации, из слов специалистов, но
ведь именно интернет и сайты, позволяют сохранять эту информацию для
длительного пользования, делать закладки и возвращаться к необходимому
источнику в любой момент. Именно это и делает сайтостроение таким
востребованным, а качественные сайты - успешными, приносящими доход
своим владельцам.
Сайтов существует невероятное количество, их невозможно сосчитать
даже при огромном желании, ведь новые проекты запускаются ежедневно, но
5
только единицы достигают поставленных целей, другие же, уходят в никуда.
Почему это происходит - однозначно ответить нельзя, просто кто-то готов
полностью отдаваться своему делу и вкладывать в него не только свободное
время, но также финансовые средства, другие же, останавливаются еще в
самом начале пути, бессмысленно выжидая, когда сайт начнет приносить ему
прибыль из пустоты.
Если говорить об актуальности создания сайта, то можно утверждать,
что любой качественный проект - будет актуален в своем информационном
сегменте, если его довести до ума, работать над ним и постоянно наполнять
качественным контентом. Ведь информация, которая хранится на этом сайте,
если она полезна и ориентирована на конечного пользователя, обязательно
найдет своих посетителей.
Интернет
-
сравнительно
молодой,
инновационный
источник
информации, который только набирает свои масштабы во всем мире. С
каждым днем все дальше распространяется интернет-покрытие, практически
в каждой семье уже имеются интернет-проводники, такие как современные
мобильные телефоны, персональные компьютеры, ноутбуки, планшеты и
другие коммуникационные устройства. А это значит, что количество
активных пользователей в сети-интернет также стремительно возрастает и
если сегодня вас сайт привлекает только 100 человек в сутки, то уже через
год, если проект не стоит на месте и развивается, эта цифра может
увеличиться в разы. Например, сайты с 3D моделями привлекает большое
количество дизайнеров, заказчиков и других людей, заинтересованных в
этом[6].
Благодаря тому, что интернет является неисчерпаемым источником
предоставления
разнообразной
информации,
создание
сайтов
очень
актуально, вне зависимости от выбранной тематики. Но стоит уделять
внимание не столько созданию своего сайта, сколько его наполнению,
потому что актуальным будет только качественный сайт, который пробьется
6
в топ выдачи поисковой системы, заинтересует пользователя и принесет
определенную выгоду своему владельцу [3].
Полнофункциональная профессиональная программная система для
создания
и
доразработанная
редактирования трёхмерной
компанией Autodesk.
Содержит
графики и анимации,
самые
современные
средства для художников и специалистов в области мультимедиа. Работает в
операционных системах Windows. Autodesk 3Ds Max доступен в двух
лицензионных версиях: студенческая — бесплатная (требуется регистрация
на сайте Autodesk), которая предоставляет полную версию программы, и
полная, которая дает возможность заниматься коммерческой деятельностью.
Объект исследования модель в графическом приложении.
Предмет исследования проектирование модели в графическом
приложении.
Цель работы:
На основе одного из пакетов 3-х мерной графики и программы 3DMax
реализовать 3D модель для создания 3-х мерного объекта архитектуры на
примере Орловского государственного университета имени И.С. Тургенева (
создать сайт-галерею для просмотра изображений и видео моделей).
Основные задачи исследования
1. Изучить основные печатные и электронные источники, касающиеся
темы работы;
2. Провести анализ графического приложения и выбрать наиболее
подходящие средство для создания модели отдельных помещений вуза;
3. Реализовать с помощью 3Ds Max модель отдельных помещений вуза;
4. Реализовать с помощью языка HTML сайт.
Структура работы
Данная дипломная работа состоит из введения, двух глав, заключения и
списка
использованной
литературы.
Во
введении
рассматривается
актуальность работы, ставится основная цель и задачи необходимые для
достижения
данной
цели.
В
первой
главе
кратко
формулируется
7
поставленной задача и характеризуются ее специфические особенности. Во
второй подробно рассмотрено программное обеспечение, реализующее
работу с трехмерной графикой. В заключении делаются выводы о
проделанной работе. В списке использованной литературе приводятся как
печатные, так и электронные источники.
8
ГЛАВА 1. ФОРМУЛИРОВКА ПОСТАВЛЕННОЙ ЗАДАЧИ И
АНАЛИЗ СРЕДСТВ ЕЕ РЕАЛИЗАЦИИ
§ 1.1 Постановка задачи
Необходимо разработать 3-х мерный объект архитектуры на основе
модели Орловского государственного университета имени Тургенева. 3-х
мерный план продемонстрирует пользователю университет, с его входами,
выходами и детальный интерьер. А так же разработать сайт, где гость сможет
просматривать фото и видео модели, так же скачать саму модель.
Для реализации 3-х мерной модели вуза можно использовать
множество разнообразных программ, работающих с трёхмерной графикой,
но более предпочтительным является Autodesk 3Ds Max. 3Ds Max относится
к классу универсальных пакетов трехмерной графики, т. е. пакетов, в
которых процесс создания окончательного продукта, будь то статическое
изображение
или
дополнительных
анимационный
пакетов.
ролик,
Моделирование,
не
требует
привлечения
текстурирование,
создание
материалов и окончательный рендеринг (визуализация) проводятся в самом
3ds Max [4].
HTML язык по своей сути не является языком программирования. Он
является языком разметки гипертекстовых документов. Иными словами он
отвечает за расположение в документе Ваших текстов, рисунков, таблиц,
предназначенных для жизни в сети Интернет. Заставить его посчитать,
сколько будет дважды два невозможно, в нем нет логических функций, зато
красиво и главное легко выложить информацию о том, что дважды два будет
четыре - это запросто. Читается этот язык при помощи знакомых Вам
программ, именуемых браузерами (обозревателями), которые "знают"
стандартные команды html языка, и "пережевывая" их выводят на монитор
компьютера документы в том виде, в котором хочет представить их веб
мастер - составитель документа [5].
9
§ 1.2 Анализ ПО для решения поставленной задачи
В 3ds Max есть большое количество инструментов, необходимых при
моделировании самых разных архитектурных проектов — от заготовок
дверей и окон разных форм до растительности, лестниц и оград. Кроме того,
в данном 3D-редакторе присутствуют средства для анализа и настройки
освещенности трехмерного проекта. Также в программу был интегрирован
фотореалистичный визуализатор, который дает возможность добиться
высокой правдоподобности просчитываемого изображения.
3ds
Max
располагает
обширными
средствами
для
создания
разнообразных по форме и сложности трёхмерных компьютерных моделей,
реальных
или
использованием
фантастических
разнообразных
объектов
техник
и
окружающего
механизмов,
мира,
с
включающих
следующие:
‒
полигональное моделирование, в которое входят Editable mesh
(редактируемая поверхность) и Editable poly (редактируемый полигон) — это
самый распространённый метод моделирования, используется для создания
сложных моделей и низкополигональных моделей для игр.
Как правило, моделирование сложных объектов с последующим
преобразованием в Editable poly начинается с построения параметрического
объекта «Box», и поэтому способ моделирования общепринято называется
«Box modeling»;
‒
моделирование
на
основе неоднородных
рациональных
B-
сплайнов (NURBS) (следует отметить, что NURBS-моделирование в 3ds Maxе настолько примитивное что никто этим методом практически не
пользуется);
‒
моделирование на основе т. н. «сеток кусков» или поверхностей
Безье (Editable patch) — подходит для моделирования тел вращения;
‒
моделирование
с
использованием
встроенных
библиотек
стандартных параметрических объектов (примитивов) и модификаторов.
10
‒
моделирование на основе сплайнов (Spline) с последующим
применением модификатора Surface — примитивный аналог NURBS,
удобный, однако, для создания объектов со сложными перетекающими
формами, которые трудно создать методами полигонального моделирования.
‒
моделирование на основе сплайнов с последующим применением
модификаторов Extrude, Lathe, Bevel Profile или создания на основе сплайнов
объектов Loft. Этот метод широко применяется для архитектурного
моделирования.
Методы моделирования могут сочетаться друг с другом.
Моделирование на основе стандартных объектов, как правило, является
основным методом моделирования и служит отправной точкой для создания
объектов сложной структуры, что связано с использованием примитивов в
сочетании друг с другом как элементарных частей составных объектов.
Video Post (Видеомонтаж)
Программный модуль Video Post предназначен для обработки
изображений трёхмерных сцен в целях реализации специальных графических
эффектов, таких как:
‒
создание
композиции
путём
объединения
нескольких
изображений в одно;
‒
фильтрация изображения и реализация таких эффектов, как
расфокусировка или ограниченная глубина резкости, блики линз или
сияющие ореолы, аналогичные тем, какие имитируются модулем Effects
(Эффекты);
‒
включение в анимацию межкадровых переходов различного типа;
‒
организация циклов повторения отдельных сегментов анимации
и т. п.[4]
11
Глава II. Проектирование модели помещения
При создании разных помещений всегда присутствуют общие объекты
необходимые для создания того или иного помещения, то есть стены, окна
двери и тд. Рассмотрим некоторые общие объекты в офисе, спортивном зале
и холле (ОГУ им. И.С. Тургенева), а после различные.
§ 2.1 Создание стен
Для создания стен в 3d max предусмотрены специальные объекты,
упрощающие вписывание в стену дверей и окон.
Прежде чем приступать к созданию стен, необходимо выполнить
несколько операций для упрощения последующей работы.
1. Изменить настройки системных величин, для этого в верхнем
меню перейдите в «Customize» - «Unit Setup» и выставите следующие
данные:
Рисунок 2.1 – Настройка системных величин
12
«Display Unit Scale» - выбор единиц измерения проекта. Для проекта
выбираем «meters» - метрах.
«System Unit Scale» – значение одной системной единицы измерения
(от 0.01м до 0.1м).
2. Далее необходимо перейти в проекцию «Top» и включить в
настройках параметров «Snaps Toggle»:
Рисунок 2.2 – Настройка вкладки «Snaps»
Включение этой опции позволит передвигать курсор на определенное
расстояние, которое равно 10 Unit (при условии, что 1Unit = 0.1м, то на 1м, а
если 1Unit = 0.01м то на 0.1м). Это позволит создать стены точного размера,
а главное построить их ровно.
Далее осуществляется переход во вкладку «Create» - «Geometry»,
здесь необходимо изменить «Standart Primitives» на «AEC Extended»,
выбирать «Wall», и создать их в проекции «Top».
Переходим в проекцию Perspective и, выделяя сегменты стены,
изменяем их высоту и толщину.
Потолок создается при помощи обычного элемента «Box».
13
§ 2.2 Создание окон
Для того, чтобы создать окно требуется выделить стену, на которой
будет располагаться окно. После выделения стены в правой части экрана
станут доступны настройки плоскости. Устанавливаем значения в счетчиках
«Length Segments» и «Width Segments». В каждом из них нужно поставить
цифру 3, таким образом задается количество сегментов по ширине и длине
плоскости.
Плоскость конвертируется в сетку. Для этого необходимо нажать на
плоскости правой кнопкой мыши и выбрать команду «Convert to» – «convert
to Editable Poly». В правой части экрана появятся настройки сетки. В самом
верхнем разделе есть вкладка «Selection», в данной вкладке расположены
несколько
кнопок
с
символическими
изображениями
уровней
редактирования подобъектов. Выбираем кнопку с изображением трех
красных точек, она станет желтой. Теперь можно выделять вершины сетки.
Для перемещения вершин сетки используется инструмент «Select And
Move», для его применения необходимо выбрать соответствующую кнопку
на панели инструментов (в горизонтальном ряду кнопок вверху экрана).
Переместите вершины сетки так, чтобы было похоже на то, что представлено
на рисунке.
Рисунок 2.3 – Настройка сетки проекта
14
Перейдите на уровень редактирования полигонов. Для этого в том
ряду, где выбирали кнопку с тремя точками, выберите кнопку с
изображением квадратика «Polygon». Для выделения центрального полигона
необходимо
нажать
в
центре
сетки.
Далее
нажимаем
на
кнопку,
расположенную справа от кнопки «Extrude», и вводим в счетчике
появившегося окна отрицательное значение, например, -10.
Рисунок 2.4 – Окончательный вид окна
§ 2.3 Создание дверей
Группа объектов Doors (Двери) позволяет создать три типа дверей —
Pivot
(Закрепленные
на
оси),
BiFold
(Складывающиеся)
и
Sliding
(Раздвигающиеся). Первые напоминают обычные входные двери, вторые —
двери автобуса, а третьи — двери купе. Можно создавать одинарные или
парные (при помощи параметра Double Doors (Двойные дверцы)) двери,
регулировать размер дверной коробки (параметры Width (Ширина) и Depth
(Глубина) в области Frame (Рама)), определять параметры самих объектов —
15
Height (Высота), Width (Ширина), Depth (Глубина) — и даже толщину стекол
— Glass Thickness (Толщина стекла). Параметр Open (Открытие) позволяет
указать, насколько двери открыты.
Затем нужно макет комнаты, зайдя в раздел GeometryCompound
ObjectsProBoolean нужно использовать функцию Start Picking, а затем
использовать эту функцию на объект Box.
Рисунок 2.5 – Создание дверей
Точно по такому же принципу происходит вырезание еще двух
проемов на других стенах для дверей.
Далее имеется возможность установить окна и двери. Необходимо
импортировать двери и окна, далее следует вставить их в соответствующие
проемы, и подогнать под размеры этих же самых проемов.
Теперь пришло время установки плинтуса и карниза. Опять же
приходиться импортировать формы плинтуса и карниза. Используем заранее
скопированные объекты shape, дальше выделяется один их объектов shape, и
16
к нему применяется модификатор Bevel Profile, затем происходит выбор
функции Pick Profile и данный объект shape принимает форму плинтуса.
После, имеется возможность импортировать форму карниза и после,
повторить последнее действие, но на этот раз использовать форму карниза,
таким образом на сцене имеются плинтус и карниз, и дальше необходимо
опустить и поднять полученные плинтус и карниз на пол и потолок
соответственно.
§ 2.4 Создание стола
Перейдем к созданию объектов необходимых для офиса.
Создаем ChamferBox с
Geometry,
выбираем Extended
нужными
параметрами:
Primitives вместо Standart
Жмем Create
-
Primitives далее
жмем на ChamferBox и создаем его в окне перспективы. Задаем параметры:
Length 200cm; Width 100cm; Height 3cm; Fillet (фаска) 0,2cm. Цвет выбираем
коричневый.
Рисунок 2.6 – Создание стола
Копируем (перемещаем вниз с нажатой клавишей Shift), указываем
нужные размеры (переходим во вкладку Modify), ставим на место ножки
17
Рисунок 2.7 – Создание стола
Снова копируем (передвигаем нажатой клавишей Shift), сдвигая ближе
к центру стола:
Рисунок 2.8 – Создание стола
Теперь нам потребуется повернуть объект ровно на 90 градусов. Как это
сделать... вверху нажать на кнопку правой кнопкой мыши (как указано на
скриншоте),
вы
попадаете
на Grid
and
Snap
Settings. Напротив Angle вписать 5, 10 или 15 градусов. Далее если кнопка
будет нажата, то поворачивая объекты они будут поворачиваться на градус
кратный указанному. Т.е. если вы указали 10 градусов, то повернуть объект
вы сможете на 10-20-30-40-50-60-70-80-90-100 и так далее градусов. Указать
можно любое число как будет удобно.
18
Рисунок 2.9 – Создание стола
Теперь с нажатой клавишей Shift поворачиваем box на 90 градусов, вновь
указываем нужные размеры и ставим между двумя предыдущими боксами,
что бы получилась нижняя полка:
Рисунок 2.10 – Создание стола
Копируем нашу полку вверх (перемещаем с нажатой клавишой Shift), в
появившемся меню указываем количество копий (Numbers of Copies) 3 или 4,
как угодно. Тип копирования ставим Instance.
19
Рисунок 2.11 – Создание стола
После того как создали копии полос с типом копирования Instance,
можно масштабировать одну из полок, при этом будут одинаково
масштабировать и остальные копии.
Копируем боковую ножку стола на другой край:
Рисунок 2.13 – Создание стола
Таким образом наш стол готов.
20
§ 2.5 Создание дивана
Переходим в вид Top (клавиша T на клавиатуре), заходим в группу
Extended Primitives (расширенные примитивы) и создаём объект Chamfer Box
– это будет основой нашего будущего дивана. Далее выставляем для этого
объекта нужные размеры. Также выставляем нужное количество сегментов.
Расположите объект в начале координат, для этого возьмем инструмент
Select and Move и внизу в числовых полях введим значения: 0 по Х, 0 по Y и
по Z введим 20 мм. для ножек.
Рисунок 2.14 – Создание дивана
Следующим шагом делаем диванные подушки. Переходим в вид Top,
выбираем опять объект Chamfer Box из расширенных примитивов и строим
его. Далее выбираем инструмент Select and Move, в координатных полях
задаём следующие значения (-350, -150, 270).
21
Рисунок 2.15 – Создание дивана
Скопируем нашу подушку, для этого, возьмём инструмент Select and
Move, и нажав и удерживая клавишу Shift перемещаем объект по координате
X для копирования его. В появившимся окне Clone Options выберем вариант
клонирования Instance, после сего нажмите OK, как показано на рисунке
ниже.
Рисунок 2.16 – Создание дивана
Основа с двумя подушками у нас уже есть, теперь создадим заднюю
спинку для нашего дивана. Для это переходит в вид Top, далее переходим на
вкладку Create (Создание) в Standard Primitives (Стандартные примитивы),
выбираем объект Box и рисуем его. После этого выбираем инструмент
перемещения Select and Move и перемещаем данный объект к задней части
дивана, по оси Z можно приподнять нашу спинку на 10 мм, как показано на
рисунке ниже.
22
Рисунок 2.17 – Создание дивана
Далее создадим ещё 2 подушки для нашей спинки. Мы не будем их
создать с самого начала, а просто скопируем 2 наши уже готовые подушки и
с помощью инструмента поворота расположим их в нужном месте.
Итак, выделим две готовые подушки. После этого берём инструмент
поворота Select or Rotate, зажимаем клавишу Shift и поворачиваем наши
подушки тем самым клонируя их, как и в прошлый раз, выбираем режим
клонирования Instance.
Рисунок 2.18 – Создание дивана
После копирования и разворота наших двух объектов осталось
подвинуть их на нужное место так, чтобы они не пересекались с другими
объектами. Выставим спинки так, чтобы они выглядели как на рисунке.
23
Рисунок 2.19 – Создание дивана
Следующим делаем подлокотники для нашего дивана. Для этого
переходим в вид Top и строем новый объект Chamfer Box. Выставляем
данный подлокотник в нужное место и поднимаем его по оси Z на 20 мм.
После выставления данного объекта на место подлокотника, выделим его и
скопируйте в противоположную сторону дивана в режиме Instance. Результат
Вы видите на рисунке ниже.
Рисунок 2.20 – Создание дивана
Создаём ножки для дивана. Для этого, переходим в вид Top, для
удобства переходим в режим отображения Wireframe (клавиша F3), и под
подлокотником рисуем Box. Расположим этот Box под подлокотником с
одного края, затем скопирует его как Instance и расположим у другого края.
После чего выделим сразу две ножки и по оси Х, перенесём и скопирует их
24
под второй подлокотник, сделаем их также Instance. После чего можно
выделить все ножки и назначить им чёрный цвет. Смотрите рисунок ниже.
Рисунок 2.21 – Создание дивана
После чего можно перейти опять в режим Shaded (клавиши F3), также
можно перейти в перспективный вид (клавиша P), чтобы посмотреть, что
получилось.
Рисунок 2.22 – Создание дивана
После того, как диван полностью готов, нужно объединить все объекты
в единую группу. Для этого выделим все объекты в сцене и перейдите в
меню Group->Group, затем ввести имя, например «Диван» и нажать ОК.
После этого все объекты в сцене объединились в единый объект.
25
Рисунок 2.23 – Создание дивана
Наш диван готов.
§ 2.6 Создание стула
Первым делом, открываем 3ds max и в окне Left рисуем набросок
нашего стула. Для быстрого рисования применяем Initial Type=Corner и Drag
Type=Corner, нажав правую клавишу мыши, мы заканчиваем линию.
Рисунок 2.24 – Создание стула
26
Откроем Modify, и там следует выбрать Vertex selection. Теперь
выделим три точки, мы показали их на картинке, фактически необходимо
выбрать те углы, где необходимо их округлить. Для этого необходимо в
выпадающей панели Geometry измените значение Fillet.
Рисунок 2.25 – Создание стула
Выбираем Spline selection и выделяем линию, на сей раз в окне Front.
Теперь нажав Shift, передвигаем линию вправо, достигнув нужной ширины
стула, необходимо остановится.
Рисунок 2.26 – Создание стула
27
Активируем Vertex selection и 3D Snap toggle, опять идем в список
Geometry и выбираем опцию Connect. Теперь действуем как на картинке
снизу. Выбираем точку 1 и перетаскиваем ее на точку 2. Выбираем
следующую точку и перетаскиваем ее на аналогичную на второй плоскости.
И так пока не свяжем все точки между собой, создав единую модель. После
окончания работ еще раз нажмем Connect и выключим 3D Snap Toggle.
Рисунок 2.27 – Создание стула
Теперь выбирем все четыре точки и корректируем Fillet, чтобы снова
создались нужные окружности.
28
Рисунок 2.28 – Создание стула
Теперь у нас есть каркас для стула, но он совсем не похож на трубу,
слишком тонок. Открываем Rendering и там активируем Enable in Renderer,
Enable in Viewport. Значение Thicknes установим на 3.0, а Sides на 8.
Рисунок 2.28 – Создание стула
Мы создали металлический каркас, похожий на настоящий. Теперь
возьмемся за сидение и спинку. Правой клавишей мыши кликнув на объект
29
выбираем Convert to>Convert to Editable Poly. Теперь выбрав Polygon, следует
выделить несколько полигонов симметрично. Выделив полигоны, жмем Edit
Geometry > Detach > Detach As Clone.
Рисунок 2.29 – Создание стула
У нас появились вновь созданные модели, сразу же активируем Modify,
а в окне Top необходимо выбрать 8 вершин, поближе к центру. Теперь
нажмем Select and Uniform Scale, для переворота вершины по горизонтальной
оси. Выбираем Edge и вновь переходим в окно Top. Тут нужно выделить 2
края. Затем используйте Edit Edges > Bridge. Переходим в настройки и
меняем параметр Segments на 10. Автоматически наши края соединятся.
Аналогичные процедуры необходимо проделать и со спинкой стула.
Выбираем Polygon, а теперь выделим все полигоны на спинке, которые
создали действием выше. Переходим Edit Geometry > Detach и убираем все
галочки. Так мы вырежем отсюда выбранные полигоны.
Отрегулировав спинку и сидение, принимаем модификатор Shell для
обоих элементов. Также можно немного изменить модификатор Outer
Amount, хотя можно оставить его по умолчанию.
30
Рисунок 2.30 – Создание стула
Фактически модель готова, осталось подобрать подходящие текстуры и
наложить их.
§ 2.7 Создание колонны
Рассмотрим
элемент
для
создания
холла
в
образовательном
учреждении.
Колонна будет состоять из трех объектов: нижнее основание, сама
колонна, и верхнее основание. Вполне логично начать возведение колонны с
ее основания.
Перейдем на вкладку Create, нажав кнопку Create в правой части
экрана. Затем нажмем чуть ниже кнопку Shapes. Ниже выберем кнопку Line.
Когда эта кнопка нажата, можно начинать рисовать сплайновую форму.
Нам нужно нарисовать половину профиля основания колонны.
Рисовать не сложно, просто ставим точки там, где линия должна изменить
свое направление.
31
Если в процессе рисования случайно поставим вершину не там, где
нужно,- нажмем на клавиатуре кнопку Backspace, и создание этой вершины
отменится.
По завершении создания сплайновой формы оборвем линию, клацнув
правой кнопкой мыши. На этом этапе у вас должна получиться примерно
такая форма, как на рисунке 2.31.
Рисунок 2.31 - Создание колонны
Нужно подправить форму, сделать ее плавной, закруглить углы. Для
этого нужно поработать с вершинами. Чтобы перейти на уровень
редактирования вершин, нажмем сначала кнопку Modify (она правее кнопки
Create), а затем внизу, в настройках редактируемой линии (в разделе
Selection), нажмем кнопку Vertex. Эта кнопка стоит в самом начале раздела и
на ней изображены три красные точки. Когда нажмем, она станет желтой, а
вершины примут вид крестиков. Теперь можно их выделять.
Чтобы перемещать вершины, воспользуемся инструментом Select and
move. В самом верху экрана имеется горизонтальный ряд кнопок, среди них
есть кнопка с изображением крестика из стрелок. Это и есть кнопка
включения инструмента Select and move.
32
Выделим вершину неоправданно грубого угла, клацните на ней правой
кнопкой мыши, и выберем строку Bezier Corner. Возле вершины появятся
вспомогательные объекты. Это желтые векторы с квадратиками на концах.
Если перемещать эти квадратики, кривизна соответствующей линии будет
изменяться.
В тех местах, где нужно сделать фаску (как минимум на всех прямых
углах), выделим вершину, найдем в настройках редактируемой линии кнопку
Fillet и, нажав ее, потянем вершину. Пока тянем,- угол будет скругляться.
Результат должен быть примерно таким, как на рисунке ниже.
Рисунок 2.32 - Создание колонны
Выделим форму, перейдем на вкладку Modify, и в списке Modifier List
(в правой части экрана) выберем модификатор Lathe.
Активируем окно проекции Perspective, используя кнопку Maximize
View port Toggle. В этом окне можно рассмотреть трехмерную форму со всех
сторон. У меня форма получилась странной, потому что ось формы немного
сбита. Чтобы ее выровнять, в настройках модификатора Lathe нажмем
кнопку min. Если объект получился черный,- поставим птичку Flip Normal.
33
Если в центре объекта, то есть там, где проходит ось, видны темные
артефакты,- поставим птичку Weld Core.
От того, какое число стоит в счетчике Segments, зависит, сколько
сторон будет у основания. Его можно сделать как круглым, так и
квадратным, и даже треугольным.
Я сделала основание круглым.
Если внешний вид основания не устраивает, его можно изменить,
перейдя на уровень редактирования вершин в стеке модификаторов, и
подправив форму сплайна.
Основание
готово.
Нажмем
кнопку
Mirror
вверху
экрана.
В
появившемся окне выставим все так, как показано на рисунке 2.33.
Рисунок 2.33 - Создание колонны
Нажмем OK. Появившуюся зеркальную копию переместите вверх.
Скоро мы вставим между основаниями колонну.
Но сначала колонну нужно создать. Там же, где раньше находили
кнопку Line, найдем и активируйте кнопку Star. Да-да, именно со звезды
34
начинается создание нашей колонны. В окне вида сверху растяните звезду.
По умолчанию она шестиконечная, но количество лучей нужно изменить до
30 в счетчике Points. Счетчик этот находится в правой части экрана, в
параметрах звезды.
Так же там есть счетчики Radius 1 и Radius 2. Попробуем изменить в
них значения, и вы поймете, как с их помощью настроить длину лучей.
Длина должна быть очень небольшой.
А с помощью счетчиков Fillet Radius 1 и Fillet Radius 2 можно задать
степень закругления углов на концах лучей и между ними. Настроим все эти
счетчики так, чтобы звезда выглядела как на рисунке 2.34.
Рисунок 2.34 - Создание колонны
Инструментом Select and move положим звезду на верхнюю часть
нижнего основания.
Там же, где выбирали модификатор Lathe, выберем модификатор
Extrude. Внизу появятся настройки. Нам нужно задать нужную высоту в
счетчике Amount. За результатом следим в любом окне проекции, кроме Top.
35
Рисунок 2.35 - Создание колонны
Можно так и оставить, вполне приличная колонна. Но я предлагаю в
образовательных целях немного закрутить колонну.
Под счетчиком Amount есть счетчик Segments. Введите в нем число 30.
Выделите саму колонну и примените к ней модификатор Twist. В
настройках этого модификатора тоже есть счетчик Amount. Чем большее
значение мы в него введем,- тем сильнее закрутится колонна. Чтобы
получить такой результат, как на рисунке 2.36, я ввела значение 200.
Рисунок 2.36 - Создание колонны
36
Колонну также можно сделать другими способами, кому как нравится.
Например, довольно оригинально может получиться колонна, выполненная
методом создания составного объекта loft, с применением различных сечений
на одном пути.
Еще можно поэкспериментировать с формой оснований, с количеством
лучей звезды, из которой создавалась колонна, со степенью закругления
лучей и углов между ними (даже после того, как применен модификатор
Twist, ко всем этим параметрам можно добраться в стеке модификаторов).
§ 2.8 Текстурирование
Далее осуществим наложение текстур на стены, пол, и потолок. Для
начала необходимо открыть редактор материалов Material Editor который
расположен на панели, теперь нужно добавить текстуру для стен, для этого
требуется выбрать пустой дефолт в параметрах материала, в разделе diffuse
выбирается ячейка color Bitmap, открывается папка с текстурами,
выбираем ту которая более соответствует оригинальному изображению
спортзала, добавляем текстуру в дефолт, нажимая и удерживая дефолт левой
кнопкой мыши переносим его на стену и отпустив можно заменить,
изменился цвет стены, и больше ничего, поэтому нужно использовать на
объект модификатор UVW Map, как описывалось выше этот модификатор
используется для указания интенсивности структуры наложенной на объект.
При нажатии модификатора UVW Map становиться видно, что поверхность
стены обретает непривычный для деревянных поверхностей вид.
37
2.37 – Интерьер без текстур
2.38 – Интерьер без текстур
Пока добавленная текстура мало чем напоминает схожий с оригиналом
вид.
38
Рисунок 2.39 – Интерьер без обработки текстур
Потому необходимо изменить настройки текстуры и материала.
В первую очередь необходимо изменить настройки текстуры в разделе
Coordinates и увеличить значения длины и ширины, тем самым растягивая
текстуру. Дальше необходимо менять настройки материала, перейдя в
настройки материала нажав кнопку Go to parent. В разделе Reflection в ячейке
Color требуется изменить цвет с белого на темный, тем самым отражение
материала уменьшается и доводиться до минимума.
Следующее, что требуется поменять в настройках материала, это
изменение распространения бликов по материалу, ячейка
Glossiness
(предпочтительнее назначить стандартную меру для дерева 0.75). И
последнее, что требуется сделать в настройках материалов, придание
материалу некой рельефности, неровности, для этого нужно зайди во вкладку
Maps выбрать эффект Bumр и меняем значения (-5.00 будет достаточно), и на
этом данная текстура готова.
Далее такой же способ наложения текстур применяется ко всем
остальным объектам, а точнее к полу потолку, к дверям и окнам, к плинтусу
и карнизу и т.д. Результатом данных действий будет вид внутренней отделки
интерьера.
39
2.40 – Интерьер холла после текстурирования
2.41 – Интерьер спортивного зала после текстурирования
40
Рисунок 2.41 – Интерьер офиса после текстурирования
Вот окончательные варианты наших моделей, с расстановкой
объектов и текстурирования.
§ 2.9 Хостинг и домен
А теперь перейдем непосредственно к созданию сайта, но вначале
рассмотрим что такое хостинг и домен и для чего они нужны.
При развертывании первого сайта может легко запутаться в большом
количестве новой терминологии и концепциях. Начнем с начала: точное
определение хостинга.
В
двух
словах
веб-хостинг
обслуживает
множество
настроенных
определенным образом компьютеров (серверов).
Хостинги компании относятся к компаниям, которые предоставляют в
аренду место на серверах, чтобы вы могли хранить свой сайт там. Вы
загружаете файлы своего сайта на сервер, а хостинг заботится о том, чтобы
люди могли подключаться к вашему месту на сервере и просматривать ваш
сайт.
41
Хостинг, домен и как они взаимодействуют
Когда вы покупаете хостинг вам выдают аккаунт и определенное
пространство на сервере компании, а также вам присваивается выделенный
IP адрес, чтобы люди могли получить доступ к вашему сайту. К примеру, IP
адрес хостинга главного сайта Google 173.194.68.102. Если в браузере
перейти по этому адресу, вы попадете на сайт Google.
Доменные имена – простые для запоминания названия, которые ссылаются
на IP адрес вашего хостинга. Когда кто-либо набирает в адресной строке
доменное имя вашего сайта, его незаметно перенаправляют на ваш IP адрес.
Так что вместо запоминания 173.194.68.102, нужно просто запомнить
«google.com». Намного проще.
Хостинг и домен: аналогия
Чтобы люди могли найти ваш магазин, ему нужно название типа
«магазин №5, Мега Молл, улица Вишневая, город …». Также можно
сравнить адрес вашего магазина с IP адресом вашего пространства на
хостинге.
Чтобы помочь людям запомнить и найти ваш магазин вы даете ему
название типа «Крутой магазин». Люди легко запоминают такое название и
по нему они находят адрес. Домены работают по похожему принципу,
облегчая
запоминание
вашего
сайта.
И если вы захотите переехать в другое место, ваш адрес изменится, но
название магазина останется прежним «Крутой магазин». Это значит, что
люди все еще могут найти ваш магазин по названию и узнать его адрес. С
хостингом и доменом происходит похожая ситуация. Во время переезда
вашего сайта, ваш IP адрес меняется, но вы можете прикрепить доменное имя
к новому адресу, чтобы люди могли найти вас по названию сайта.
Совет: Обычно компании предоставляют оба вида услуг, и хостинг и
домен. Но по моему мнению и наблюдениям лучше работать с разными
компаниями для
хостинга
и домена.
Компания должна
полностью
42
сфокусироваться на отдельной теме. Так вы не будете хранить «все яйца в
одной корзине».
Виртуальный хостинг
При покупке виртуального хостинг аккаунта вы делите один сервер с
другими покупателями, которые также арендуют тот же сервер.
Плюсы виртуального хостинга
 Самая низкая цена
 Часто спроектированы для новичков
 Минимальное обслуживание
Минусы виртуального хостинга
 Падает производительность, если серверы переполнены, или если
другие пользователи занимают большую часть ресурсов
 Ограниченный объем пространства и пропускной способности
Для своей работы я использую именно виртуальный хостинг.
§ 2.10 Код программы
Здесь мы разберем непосредственно код программы html для создания
нашего сайта.
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<link href="style.css" rel="stylesheet">
<meta charset="utf-8">
<link
href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300"
rel="stylesheet">
</head>
Листинг 1 – Начало программы и определение кодировки
Создаем верхнюю шапку и названия для оглавлений в шапке, как указано в
листинге 2.
<body>
<header><span class="main">модели интерьера</span>
</header>
<div id="navigation">
<ul>
43
<a href="#office"><li>для офисного
помещения</a>
<a href="#ou"><li>для образовательного
учреждения</a>
</ul>
</div>
<div id="content">
<div class="block">
<span id="office"class="title">Офисное
помещение</span>
<div class="bh">
<span class="subtitle">Офис</span>
Листинг 2 – Шапки и оглавления
Создаем кнопки для скачивания файлов, при нажатии на кнопку вы
автоматически переходите на Google disk, где находятся файлы в общем
доступе. Так для каждого помещения. Так же при создании делаем привязку
к изображению, необходимое для демонстрации той или иной модели, как
указано в листинге 3.
<a
href="https://drive.google.com/drive/folders/0B2Qi8kCLMSLmdFJ1YTlvLUVVLTQ"
target="blank">Скачать</a>
</div>
<img src="images/1.jpg">
</div>
<div class="block">
<span id="ou" class="title">Образовательное
учреждение</span>
<div class="bh">
<div class="presubtitle">Первый этаж
главного корпуса:</div>
<div class="subtitle">Холл и
коридоры</div>
<a
href="https://drive.google.com/drive/folders/0B2Qi8kCLMSLmMFFHaV9MUEQwc00"
target="blank">Скачать</a>
</div>
<img src="images/2.jpg">
<img src="images/3.jpg">
<div class="bh">
<div class="presubtitle">Первый этаж
главного корпуса:</div>
<div class="subtitle">Спортивный
зал</div>
<a
href="https://drive.google.com/drive/folders/0B2Qi8kCLMSLmbWtUNmg5RDk1Q2s"
target="blank">Скачать</a>
</div>
<img src="images/4.jpg">
</div>
</div>
Листинг 3 – Прикрепление изображений и ссылок
44
Создаем скрипт, где ставим необходимые разметки, привязку к
документам и завершаем код программы, как в листинге 4.
<script>
$(document).ready(function() {
$('a[href^="#"]').click(function(){
var el = $(this).attr('href');
$('body').animate({
scrollTop: $(el).offset().top}, 1000);
return false;
});
});
</script>
</body>
</html>
Листинг 4 – Завершение кода программы
В работе используется стиль, который был разработан
самостоятельно. Подробное описание кода приводится в Приложении 2. Вся
работа представлена по ссылке: http://a50203m9.bget.ru/Barno/index.html
Рисунок 2.42 – Сайт
Данный сайт фукнционирует и готов к использованию.
45
ЗАКЛЮЧЕНИЕ
Трехмерная графика – это совокупность инструментов и приемов,
которые предназначены для создания объемных объектов. Чаще всего
графика
применяется
в
компьютерных
играх,
на
телевидении,
в
кинематографе, в строительстве, в печатных изданиях и, конечно же, в
рекламе. А сайты помогают просматривать данные модели.
Была достигнута цель работы: реализована 3D модель помещения в
программе Autodesk 3Ds Max. Так же реализован сайт, где можно
просмотреть и скачать эти модели.
В процессе работы были решены следующие задачи:
1. Проведен
анализ
электронных
учебно-методической
изданий
соответствующих
литературы
курсовой
и
работе,
сформулированы основные требования к моделям;
2. Проведен анализ графического приложения и выбрано наиболее
подходящее
средство
для
создания
модели
отдельных
помещений вуза и офиса;
3. Реализовано с помощью 3Ds Max модель отдельных помещений
вуза и офиса;
4. Реализован с помощью языка HTML сайт.
Данная модель может использоваться для просмотра образовательного
учреждения и в качестве выбора планировки помещения в различных
офисах.
46
Список литературы
[1] 3DMax http://www.rg.sumy.ua (Дата обращения 17.05.2017)
[2] http://usu.kz/sozdanie_saita.php (Дата обращения 17.05.2017)
[3] https://nischenko.ru/ (Дата обращения 17.05.2017)
[4] Тимофеев С. М., 3ds Max 2014 в подлиннике, 2014. (Дата обращения
28.05.2017)
[5] Семикопенко А.А., Учебник по HTML, 2009. (Дата обращения 28.05.2017)
[6] http://junior3d.ru/models.html (Дата обращения 15.06.2017)
47
Приложение 1
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<link href="style.css" rel="stylesheet">
<meta charset="utf-8">
<link
href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300"
rel="stylesheet">
</head>
<body>
<header><span class="main">модели интерьера</span>
</header>
<div id="navigation">
<ul>
<a href="#office"><li>для офисного
помещения</a>
<a href="#ou"><li>для образовательного
учреждения</a>
</ul>
</div>
<div id="content">
<div class="block">
<span id="office"class="title">Офисное
помещение</span>
<div class="bh">
<span class="subtitle">Офис</span>
<a
href="https://drive.google.com/drive/folders/0B2Qi8kCLMSLmdFJ1YTlvLUVVLTQ"
target="blank">Скачать</a>
</div>
<img src="images/1.jpg">
</div>
<div class="block">
<span id="ou" class="title">Образовательное
учреждение</span>
<div class="bh">
<div class="presubtitle">Первый этаж
главного корпуса:</div>
<div class="subtitle">Холл и
коридоры</div>
<a
href="https://drive.google.com/drive/folders/0B2Qi8kCLMSLmMFFHaV9MUEQwc00"
target="blank">Скачать</a>
</div>
<img src="images/2.jpg">
<img src="images/3.jpg">
<div class="bh">
<div class="presubtitle">Первый этаж
главного корпуса:</div>
<div class="subtitle">Спортивный
зал</div>
<a
href="https://drive.google.com/drive/folders/0B2Qi8kCLMSLmbWtUNmg5RDk1Q2s"
target="blank">Скачать</a>
</div>
48
<img src="images/4.jpg">
</div>
</div>
<script>
$(document).ready(function() {
$('a[href^="#"]').click(function(){
var el = $(this).attr('href');
$('body').animate({
scrollTop: $(el).offset().top}, 1000);
return false;
});
});
</script>
</body>
</html>
49
Приложение 2
@font-face {
font-family: 'BebasNeueBold'; /* Имя шрифта */
src: url('fonts/BebasBold.otf'); /* Путь к файлу со шрифтом */
font-family: 'BebasNeueRegular'; /* Имя шрифта */
src: url('fonts/BebasLight.otf'); /* Путь к файлу со шрифтом */
font-family: SegoeUIB; /* Имя шрифта */
src: url(fonts/segoeuib.ttf); /* Путь к файлу со шрифтом */
font-family: SegoeUII; /* Имя шрифта */
src: url(fonts/segoeuii.ttf); /* Путь к файлу со шрифтом */
font-family: SegoeUIL; /* Имя шрифта */
src: url(fonts/segoeuil.ttf); /* Путь к файлу со шрифтом */
font-family: SegoeUIZ; /* Имя шрифта */
src: url(fonts/segoeuiz.ttf); /* Путь к файлу со шрифтом */
}
body {
background: #e9e9e9;
font-family: 'Open Sans Condensed', sans-serif;
width: 1200px;
margin: 0 auto;
}
header {
background: rgba( 255, 255, 255, 0.8);
height: 150px;
text-align: center;
padding: 10px 0 0 0}
.main {
font-size: 68pt}
#navigation {
text-align: center;
background: rgba( 0, 0, 0, 0.7);}
#navigation ul{line-height: 3.3;
margin: 0;
padding: 0}
#navigation li {
list-style-type: none;
display: inline;
font-size: 18pt;
color: #fff;
text-transform: uppercase;}
#navigation li a{transition: 0.3s;color: #fff;padding: 20px 100px; fontfamily: 'Open Sans Condensed', sans-serif;}
#navigation li a:hover {color: #59bbea}
#content {margin-bottom: 20px}
.block {margin-top:30px; color: #fff; background: #59bbea; }
.block span {margin-left: 15px; font-size:36pt}
.block a {
transition: 0.3s;
text-decoration: none;
padding: 10px 18px;
background-color: #131313;
color: #fff;
position: absolute;
border: 1px solid #535353;
right: 20px; top: 20%;
}
.block a:hover {border: 1px solid #fff; color: #ffb400}
.block img {width: 100%}
50
.title {display: block; text-align: center;height: 75px;}
.subtitle {font-size: 24pt!important; display: inline-block;
vertical-align: middle;
color: #ffb400;
}
.bh {background: #131313; padding: 10px 15px; position: relative; minheight: 50px;}
.presubtitle {font-size: 15pt;
line-height: 0.3;
margin-top: 10px;
}
1/--страниц
Пожаловаться на содержимое документа