Современные информационные технологии. 4 курс. Лабораторное занятие №4. 3D-панорама с динамическим сценарием
Рекомендованная тема для выполнения задания: Contempo 1 с отключенной фоновой картинкой.
Для создания 3D-панорамы вам потребуется:
I) рендер графики с шестью фото разных ракурсов. У меня это: left, right, front, back, top и bottom. В моем случае разрешение каждой из фотографий - 1350х1350рх. Каждое из ваших фото вам необходимо загрузить на google sites.
II) Далее нам необходимо указать параметры стилей панорамы в CSS:
1) Вращение рендера на экране с градусами поворота, используя keyframes:
@-webkit-keyframes roll {
0% {
-webkit-transform: rotateX(0) rotateY(0) rotateZ(0);
}
50% {
-webkit-transform: rotateX(0) rotateY(360deg) rotateZ(0);
}
100% {
-webkit-transform: rotateX(360deg) rotateY(360deg) rotateZ(0);
}
}
@-moz-keyframes roll {
0% {
-moz-transform: rotateX(0) rotateY(0) rotateZ(0);
}
50% {
-moz-transform: rotateX(0) rotateY(360deg) rotateZ(0);
}
100% {
-moz-transform: rotateX(360deg) rotateY(360deg) rotateZ(0);
}
}
@keyframes roll {
0% {
transform: rotateX(0) rotateY(0) rotateZ(0);
}
50% {
transform: rotateX(0) rotateY(360deg) rotateZ(0);
}
100% {
transform: rotateX(360deg) rotateY(360deg) rotateZ(0);
}
}
2) Ширина и высота объекта - можно оставить значения по умолчанию:
html {
width: 100%;
height: 100%;
}
body {
min-width: 740px;
font-family: Verdana, Sans-serif;
-webkit-font-smoothing: antialiased;
width: 100%;
height: 100%;
}
3) Кнопка запуска панорамы. Цвет шрифта текста и цвет самой кнопки запуска укажите свои. Положение кнопки можно регулировать меняя отступы слева и сверху.
#control_panel {
padding: 10px;
}
#control_panel > button {
display: inline-block;
font: normal 20px/40px Verdana, Sans-serif;
text-align: center;
margin-left: 750px;
margin-top: 220px;
padding: 0 20px;
color: ?;
background: ?;
cursor: pointer;
}
#control_panel > button:hover, #control_panel > button.active {
-webkit-filter: saturate(2);
}
4) Интерфейс окна панорамы:
#pano_viewer {
position: absolute;
width: 700px;
height: 400px;
left: 50%;
top: 50%;
margin-left: -350px;
margin-top: -200px;
cursor: move;
overflow: hidden;
}
5) Расположение объектов рендера в панораме:
#cube_box {
-moz-perspective: 750px;
-webkit-perspective: 750px;
perspective: 750px;
-moz-transform-origin: 3000px 3000px 0 50%;
-ms-transform-origin: 3000px 3000px 0 50%;
-webkit-transform-origin: 3000px 3000px 0 50%;
transform-origin: 3000px 3000px 0 50%;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
width: 6000px;
height: 6000px;
margin-left: -2650px;
margin-top: -2800px;
}
#cube {
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
cursor: move;
position: relative;
width: 6000px;
height: 6000px;
}
#cube.animate {
-webkit-animation: roll 30s linear infinite;
-moz-animation: roll 30s linear infinite;
animation: roll 30s linear infinite;
}
6) Движение каждой из картинок в рендере:
#cube img {
position: absolute;
opacity: 1;
top: 1500px;
left: 1500px;
width: 3000px;
height: 3000px;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#cube img.front {
-moz-transform: translate3d(0, 0, -1499px);
-ms-transform: translate3d(0, 0, -1499px);
-webkit-transform: translate3d(0, 0, -1499px);
transform: translate3d(0, 0, -1499px);
}
#cube img.left {
-moz-transform: rotate3d(0, 1, 0, 90deg) translate3d(0, 0, -1499px);
-ms-transform: rotate3d(0, 1, 0, 90deg) translate3d(0, 0, -1499px);
-webkit-transform: rotate3d(0, 1, 0, 90deg) translate3d(0, 0, -1499px);
transform: rotate3d(0, 1, 0, 90deg) translate3d(0, 0, -1499px);
}
#cube img.right {
-moz-transform: rotate3d(0, 1, 0, -90deg) translate3d(0, 0, -1499px);
-ms-transform: rotate3d(0, 1, 0, -90deg) translate3d(0, 0, -1499px);
-webkit-transform: rotate3d(0, 1, 0, -90deg) translate3d(0, 0, -1499px);
transform: rotate3d(0, 1, 0, -90deg) translate3d(0, 0, -1499px);
}
#cube img.back {
-moz-transform: rotate3d(0, 1, 0, 180deg) translate3d(0, 0, -1499px);
-ms-transform: rotate3d(0, 1, 0, 180deg) translate3d(0, 0, -1499px);
-webkit-transform: rotate3d(0, 1, 0, 180deg) translate3d(0, 0, -1499px);
transform: rotate3d(0, 1, 0, 180deg) translate3d(0, 0, -1499px);
}
#cube img.top {
-moz-transform: rotate3d(1, 0, 0, -90deg) translate3d(0, 0, -1499px);
-ms-transform: rotate3d(1, 0, 0, -90deg) translate3d(0, 0, -1499px);
-webkit-transform: rotate3d(1, 0, 0, -90deg) translate3d(0, 0, -1499px);
transform: rotate3d(1, 0, 0, -90deg) translate3d(0, 0, -1499px);
}
#cube img.bottom {
-moz-transform: rotate3d(1, 0, 0, 90deg) translate3d(0, 0, -1499px);
-ms-transform: rotate3d(1, 0, 0, 90deg) translate3d(0, 0, -1499px);
-webkit-transform: rotate3d(1, 0, 0, 90deg) translate3d(0, 0, -1499px);
transform: rotate3d(1, 0, 0, 90deg) translate3d(0, 0, -1499px);
}
III) Далее потребуется Javascript сценариев движения:
7) Функция движения с переменными:
(function() {
var x1,
y1,
moving = false,
$viewer = $('#pano_viewer'),
$cube = $('#cube'),
w_v = $viewer.width(), // width of viewer
h_v = $viewer.height(), // height of viewer
c_x_deg = 0, // current x
c_y_deg = 0, // current y
perspective = 450;
$viewer.on('mousedown', function(e) {
x1 = e.pageX - $(this).offset().left;
y1 = e.pageY - $(this).offset().top;
moving = true;
e.preventDefault();
});
8) Сценарий движения мыши:
$(document).on('mousemove', function(e) {
if( moving === true ) {
x2 = e.pageX - $viewer.offset().left;
y2 = e.pageY - $viewer.offset().top;
var dist_x = x2 - x1,
dist_y = y2 - y1,
perc_x = dist_x / w_v,
perc_y = dist_y / h_v,
deg_x = Math.atan2(dist_y, perspective) / Math.PI * 180,
deg_y = -Math.atan2(dist_x, perspective) / Math.PI * 180,
i,
vendors = ['-webkit-', '-moz-', ''];
c_x_deg += deg_x;
c_y_deg += deg_y;
c_x_deg = Math.min(90, c_x_deg);
c_x_deg = Math.max(-90, c_x_deg);
c_y_deg %= 360;
deg_x = c_x_deg;
deg_y = c_y_deg;
for(i in vendors) {
$cube.css(vendors[i] + 'transform', 'rotateX(' + deg_x + 'deg) rotateY(' + deg_y + 'deg)');
}
x1 = x2;
y1 = y2;
}
9) Управление анимацией:
e.preventDefault();
}).on('mouseup', function(e) {
moving = false;
e.preventDefault();
});
$('#control_panel > button').on('click', function() {
$(this).toggleClass('active');
}).parent()
.find('.animation').on('click', function() {
$('#cube').toggleClass('animate');
});
})();
10) Загружаете на свою страницу в sites.google.com минимальные требования библиотеки jQuery. Их можно взять здесь: https://sites.google.com/site/konoplevmedia/panoramaminjq.js
IV) Теперь переходите непосредственно к HTML:
11) Открываете хэдер и указываете в нем библиотеки скриптов и стилей - те, что по умолчанию:
<html lang="en">
<head>
<title>Page title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet"></link>
12) Встраиваете CSS напрямую в тело HTML-документа
13) Затем подключаете стандарт библиотеки JS:
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
14) Закрываете хэдер:
</head>
15) Внутри тега <body> создаете соответствующий CSS объект с вашими фото из рендера в виде картинок-классов, то есть:
<div id="pano_viewer">
<div id="cube_box">
<div id="cube">
<img class="front" src="https://sites.google.com/site/konoplevmedia/front.png" width="1350" height="1350">
<img class="left" src="https://sites.google.com/site/konoplevmedia/left.png" width="1350" height="1350">
<img class="right" src="https://sites.google.com/site/konoplevmedia/right.png" width="1350" height="1350">
<img class="back" src="https://sites.google.com/site/konoplevmedia/back.png" width="1350" height="1350">
<img class="top" src="https://sites.google.com/site/konoplevmedia/top.png" width="1350" height="1350">
<img class="bottom" src="https://sites.google.com/site/konoplevmedia/bottom.png" width="1350" height="1350">
16) Закрываете все открытые параметры:
</div>
</div>
</div>
17) Создаете секцию кнопки и анимации по кнопке:
<section id="control_panel">
<button id="btn_animation" class="animation">play</button>
</section>
18) Встраивайте минимальный стандарт библиотеки Javascript
19) Встраиваете библиотеку AJAX:
<script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js'></script>
20) Подключаете ваш Javascript
21) Закрываете теги страницы:
</body>
</html>
Панорама должна работать как при управлении мышью, так и при нажатии на кнопку. Как выглядит работающая панорама можно посмотреть здесь: https://konoplevdesign2.blogspot.com/2020/11/3d-panorama.html
Ссылки на выполненное задание принимаются в комментариях к этому посту до 15:00 24 ноября.
https://dmitrykvasha1.blogspot.com/2020/11/garden-button.html
ОтветитьУдалитьОценка "отлично"
Удалитьhttps://natalyaz789.blogspot.com/2020/11/3d-panorama-button.html
ОтветитьУдалитьОценка "отлично"
Удалитьhttps://vkar15.blogspot.com/2020/11/blog-post_19.html
ОтветитьУдалитьОценка "отлично"
Удалитьhttps://auditoriasmidz19.blogspot.com/2020/11/panorama_24.html
ОтветитьУдалитьОценка "отлично"
Удалить