Кубическое 3D слайдшоу
В данном уроке мы сделаем анимированное кубическое 3D слайдшоу (изображения располагаются на гранях куба). Куб постоянно вращается.
Разметка для нашего урока чрезывачайно проста. Так как мы будем использовать HTML5, то нужно лишь определить элемент canvas
.
<!DOCTYPE html> <html lang="ru" > <head> <meta charset="utf-8" /> <title>Кубическое 3D слайдшоу на HTML5 | Материалы сайта RUSELLER.COM</title> <link href="/css/main.css" rel="stylesheet" type="text/css" /> <script src="/js/script.js"></script> </head> <body> <header> <h2>Кубическое 3D слайдшоу на HTML5</h2> <a href="http://www.ruseller.com" class="stuts" target="_blank">Материалы сайта <span>RUSELLER.COM</span></a> </header> <canvas id="slideshow" width="1280" height="800"></canvas> </body> </html>
Код CSS достаточно примитивен. Если вам интересно, то предлагаю посмотреть исходники к уроку.
Основное действие будет разворачиваться в JavaScript коде. Сначала определяем все вершины и грани (стенки) для нашего куба. Затем правила вращения. И в завершение - выполняется трансформация изображений с помощью методов ‘clip’ и ‘transform’.
// Переменные var canvas, ctx; var aImages = []; var points = []; var triangles = []; var textureWidth, textureHeight; var lev = 3; var angle = 0; // Вершины сцен var vertices = [ new Point3D(-2,-1,2), new Point3D(2,-1,2), new Point3D(2,1,2), new Point3D(-2,1,2), new Point3D(-2,-1,-2), new Point3D(2,-1,-2), new Point3D(2,1,-2), new Point3D(-2,1,-2) ]; // Грани сцен(6 граней) var faces = [[0,1,2,3],[1,5,6,2],[5,4,7,6],[4,0,3,7],[0,4,5,1],[3,2,6,7]]; function Point3D(x,y,z) { this.x = x; this.y = y; this.z = z; this.rotateX = function(angle) { var rad, cosa, sina, y, z rad = angle * Math.PI / 180 cosa = Math.cos(rad) sina = Math.sin(rad) y = this.y * cosa - this.z * sina z = this.y * sina + this.z * cosa return new Point3D(this.x, y, z) } this.rotateY = function(angle) { var rad, cosa, sina, x, z rad = angle * Math.PI / 180 cosa = Math.cos(rad) sina = Math.sin(rad) z = this.z * cosa - this.x * sina x = this.z * sina + this.x * cosa return new Point3D(x,this.y, z) } this.rotateZ = function(angle) { var rad, cosa, sina, x, y rad = angle * Math.PI / 180 cosa = Math.cos(rad) sina = Math.sin(rad) x = this.x * cosa - this.y * sina y = this.x * sina + this.y * cosa return new Point3D(x, y, this.z) } this.projection = function(viewWidth, viewHeight, fov, viewDistance) { var factor, x, y factor = fov / (viewDistance + this.z) x = this.x * factor + viewWidth / 2 y = this.y * factor + viewHeight / 2 return new Point3D(x, y, this.z) } } // Массив фотографий var aImgs = [ 'images/pic1.jpg', 'images/pic2.jpg', 'images/pic3.jpg', 'images/pic4.jpg' ]; for (var i = 0; i < aImgs.length; i++) { var oImg = new Image(); oImg.src = aImgs[i]; aImages.push(oImg); oImg.onload = function () { textureWidth = oImg.width; textureHeight = oImg.height; } } window.onload = function(){ // Создаем объект canvas canvas = document.getElementById('slideshow'); ctx = canvas.getContext('2d'); // Готовим точки for (var i = 0; i <= lev; i++) { for (var j = 0; j <= lev; j++) { var tx = (i * (textureWidth / lev)); var ty = (j * (textureHeight / lev)); points.push({ tx: tx, ty: ty, nx: tx / textureWidth, ny: ty / textureHeight, ox: i, oy: j }); } } // Готовим треугольники ---- var levT = lev + 1; for (var i = 0; i < lev; i++) { for (var j = 0; j < lev; j++) { triangles.push({ p0: points[j + i * levT], p1: points[j + i * levT + 1], p2: points[j + (i + 1) * levT], up: true }); triangles.push({ p0: points[j + (i + 1) * levT + 1], p1: points[j + (i + 1) * levT], p2: points[j + i * levT + 1], up: false }); } } drawScene(); }; function drawScene() { // Очищаем контекст ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); // Вращаем сцену var t = new Array(); for (var iv = 0; iv < vertices.length; iv++) { var v = vertices[iv]; var r = v.rotateY(angle); //var r = v.rotateX(angle).rotateY(angle); var prj = r.projection(ctx.canvas.width, ctx.canvas.height, 1000, 3); t.push(prj) } var avg_z = new Array(); for (var i = 0; i < faces.length; i++) { var f = faces[i]; avg_z[i] = {"ind":i, "z":(t[f[0]].z + t[f[1]].z + t[f[2]].z + t[f[3]].z) / 4.0}; } // Обходим все сцены for (var i = 0; i < faces.length; i++) { var f = faces[avg_z[i].ind]; if (t[f[3]].z+t[f[2]].z+t[f[1]].z+t[f[0]].z > -3) { ctx.save(); // Рисуем поверхности ctx.fillStyle = "rgb(160,180,160)"; ctx.beginPath(); ctx.moveTo(t[f[0]].x,t[f[0]].y); ctx.lineTo(t[f[1]].x,t[f[1]].y); ctx.lineTo(t[f[2]].x,t[f[2]].y); ctx.lineTo(t[f[3]].x,t[f[3]].y); ctx.closePath(); ctx.fill(); // Рисуем растянутые изображения if (i < 4) { var ip = points.length; while (--ip > -1) { var p = points[ip]; var mx = t[f[0]].x + p.ny * (t[f[3]].x - t[f[0]].x); var my = t[f[0]].y + p.ny * (t[f[3]].y - t[f[0]].y); p.px = (mx + p.nx * (t[f[1]].x + p.ny * (t[f[2]].x - t[f[1]].x) - mx)) + p.ox; p.py = (my + p.nx * (t[f[1]].y + p.ny * (t[f[2]].y - t[f[1]].y) - my)) + p.oy; } var n = triangles.length; while (--n > -1) { var tri = triangles[n]; var p0 = tri.p0; var p1 = tri.p1; var p2 = tri.p2; var xc = (p0.px + p1.px + p2.px) / 3; var yc = (p0.py + p1.py + p2.py) / 3; ctx.save(); ctx.beginPath(); ctx.moveTo((1.05 * p0.px - xc * 0.05), (1.05 * p0.py - yc * 0.05)); ctx.lineTo((1.05 * p1.px - xc * 0.05), (1.05 * p1.py - yc * 0.05)); ctx.lineTo((1.05 * p2.px - xc * 0.05), (1.05 * p2.py - yc * 0.05)); ctx.closePath(); ctx.clip(); // Трансформации var d = p0.tx * (p2.ty - p1.ty) - p1.tx * p2.ty + p2.tx * p1.ty + (p1.tx - p2.tx) * p0.ty; ctx.transform( -(p0.ty * (p2.px - p1.px) - p1.ty * p2.px + p2.ty * p1.px + (p1.ty - p2.ty) * p0.px) / d, // m11 (p1.ty * p2.py + p0.ty * (p1.py - p2.py) - p2.ty * p1.py + (p2.ty - p1.ty) * p0.py) / d, // m12 (p0.tx * (p2.px - p1.px) - p1.tx * p2.px + p2.tx * p1.px + (p1.tx - p2.tx) * p0.px) / d, // m21 -(p1.tx * p2.py + p0.tx * (p1.py - p2.py) - p2.tx * p1.py + (p2.tx - p1.tx) * p0.py) / d, // m22 (p0.tx * (p2.ty * p1.px - p1.ty * p2.px) + p0.ty * (p1.tx * p2.px - p2.tx * p1.px) + (p2.tx * p1.ty - p1.tx * p2.ty) * p0.px) / d, // dx (p0.tx * (p2.ty * p1.py - p1.ty * p2.py) + p0.ty * (p1.tx * p2.py - p2.tx * p1.py) + (p2.tx * p1.ty - p1.tx * p2.ty) * p0.py) / d // dy ); ctx.drawImage(aImages[i], 0, 0); ctx.restore(); } } } } // Сдвигаем угол и перерисовываем сцену angle += 0.3; setTimeout(drawScene, 40); }
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/WI3FIg7m-vQ/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-04-22 » Комментирование кода и генерация документации в PHP
- 2024-04-22 » SEO в России и на Западе: в чем основные отличия
- 2024-04-22 » SEO для международного масштабирования
- 2024-04-22 » Как использовать XML-карты для продвижения сайта
- 2024-04-22 » Цифровой маркетинг: инструменты для продвижения и рекламы в 2024 году
- 2024-04-22 » Что такое CSS-модули и зачем они нам?
- 2024-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
Большинство людей, стремящихся к цели, способны скорее сделать одно большое усилие, чем упорно идти избранной дорогой; из-за лени и непостоянства они часто утрачивают плоды лучших своих начинаний и дают обогнать себя тем, кто отправился в путь позднее, чем они, и шел медленней, но зато безостановочно Лабрюйер Жан де (1645-1696) - французский писатель, мастер афористической публицистики |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.