Классическая 3D-анимация роуминга виртуального компьютерного зала WebGL на основе HTML5

Использование режима от первого лица в 3D относится к использованию режима от первого лица в играх-стрелялках (FPS) — это тип видеоигр, основанный на виде от первого лица, в котором основное внимание уделяется оружию и другому оружию; игрок проходит Испытайте действие глазами главного героя. С момента зарождения этого жанра передовая 3D- и псевдо-3D-графика бросила вызов разработке аппаратного обеспечения, и многопользовательские игры стали незаменимыми.

Скриншот из Doom, одной из самых ярких игр жанра, демонстрирующий типичный ракурс шутера от первого лица.

В настоящее время музеи и компании часто используют 3D-анимацию для создания рекламных видеороликов и т. д. Самым большим преимуществом интерпретации 3D-анимации является то, что она дает людям настоящее ощущение содержания и формы. Он более интуитивен, чем графические работы, и более реалистичен, чем 2D-анимация, поэтому может дать зрителям ощущение присутствия в рекламной среде, что значительно повышает убедительность рекламы. Развитие 3D-технологий даже бросает вызов способности аудитории различать, заставляя ее суждения дрейфовать между виртуальным и реальным.

Более того, применение 3D-спецэффектов предоставляет более широкий мыслительный простор для творчества, становится надежной гарантией творческого исполнения, обогащает форму и стиль творчества. В соответствии с привлекательностью рекламной темы можно создать сказочную и волшебную атмосферу, чтобы стимулировать и произвести впечатление на аудиторию, тем самым достигая цели общения с аудиторией.

3D-анимационный рекламный видеоролик сочетает в себе 3D-анимацию, кадры со спецэффектами, корпоративные видеоролики, фотографии, будущие перспективы и другой контент посредством постпроизводственного синтеза, дубляжа и повествования, образуя интуитивно понятный, яркий и популярный высококачественный корпоративный рекламный видеоролик, позволяющий людям из различные уровни общества, чтобы создать позитивное, позитивное и хорошее впечатление о компании, тем самым установив доброжелательность и доверие к компании, а также доверие к продуктам или услугам компании.

Быстрое развитие 3D сейчас происходит благодаря стремлению человечества к реальности, поэтому умение хорошо использовать 3D является неотъемлемой частью будущего успеха.

Идея примера в этой статье заключается в посещении компьютерного зала. Действие по открытию двери не может быть более динамичным. В сочетании с соответствующими поворотами оно по сути полностью имитирует эффект посещения компьютерного зала людьми. Еще одним преимуществом является то, что если вы хотите продемонстрировать его своему начальнику, не прибегая к нему, ваш начальник будет очень доволен этим крутым эффектом!

http://www.hightopo.com/demo/room-walkthrough/index.html

Кнопки сброса и запуска в интерфейсе — это кнопки, добавляемые непосредственно в тело, а к этим двум кнопкам добавляются события щелчка:

 <div></div><div></div>

Вся сцена построена из 3D-компонентов, инкапсулированных в HT. Для создания такой большой сцены требуется определенный объем кода. Для упрощения я выделил сцену отдельно и использовал инкапсулированный в HT класс ht.JSONSerializer для сериализации сцены в json. В код вводится только сгенерированный json-файл. Чтобы было понятнее, приведу здесь пример, предполагая, что 3D-сцена построена:

 dm = new ht.DataModel();g3d = new ht.graph3d.Graph3dView(dm);//....Создаем сцену dm.serialize();//Вы можете заполнить числовой параметр в виде аббревиатуры пробела. Значение добавлен

Теперь, когда мы настроили среду и преобразовали ее в файл json, управлять кодом сложно. В этом случае мы будем десериализовать модель данных DataModel. Функция этой функции — преобразовать формат json в объект. и десериализовать его. Объект передается в модель данных DataModel. Подробную информацию см. в руководстве по сериализации HT для Web:

 var g3d = window.g3d = new ht.graph3d.Graph3dView(), dataModel = g3d.dm(), view = g3d.getView(), path = null;g3d.setMovableFunc(function(data) { return false;}) ;g3d.setVisibleFunc(function(data) { if (data.getName() === путь) { return false; } return true;});g3d.setEye([523, 5600, 8165]);g3d.setFar(60000);dataModel.deserialize(json);

В настоящее время нам нужно управлять дверью на сцене и маршрутом, по которому мы собираемся идти, пройти по модели данных DataModel и получить эти два данных:

 for (var i = 0; i < dataModel.size(); i++) { var data = dataModel.getDatas().get(i); if (data.getName() === Gate) {//Set в json Имя window.door = data; } if (data.getName() === path) {path = data; if (window.door && path) {//Получить дверь и путь После данных выйдите из цикла }};

Проще говоря, в этом примере всего четыре действия: возврат в исходную точку, начало действия, движение вперед и остановка. Нажмите кнопку «Пуск». В начальном действии мы выполнили только одно действие — открытие двери. После завершения действия мы вызываем функцию «вперед», чтобы двигаться вперед:

 function startAnim() { if (window.isAnimationRunning) { return; } reset(); window.isAnimationRunning = true;//Выполняется ли анимация ht.Default.startAnim({frames: 30, //Количество анимации кадров, используется по умолчанию `ht.Default.animFrames`.interval: 20, //Интервал кадров анимации по умолчанию использует `ht.Default.animInterval`. function() {// Функция, вызываемая после завершения анимации вперед(); }, action: function(t){ // Необходимо предоставить функцию действия для реализации изменений атрибута во время анимации. * Математика ПИ / 180 * t); } });}

Функция сброса здесь — это функция возврата в исходную точку. Эту функцию мы используем для восстановления всех изменений в исходное положение, включая положение двери:

 функция сброса () { if (window.isAnimationRunning) { return; g3d.setCenter([0,0,0]); g3d.setEye([523, 5600, 8165]); window.forwardIndex = 0; (0);}

Для перемещения вам обязательно понадобится пешеходный путь, который мы только что получили. Получите все элементы пути с помощью window.points = path.getPoints()._as; и инициализируйте window.forwardIndex = 0, управляя фронтом и; позади пути. Установите Глаз и Центр на 3D-сцене в двух точках, чтобы создать эффект первого лица:

 var point1 = Points[forwardIndex], point2 = Points[forwardIndex + 1];var distanceX = (point2.x – point1.x), distanceY = (point2.y – point1.y), distance = Math.sqrt(distanceX * расстояниеX + расстояниеY * distanceY)-200;//Расстояние между двумя точками рассчитывается по теореме Пифагора о треугольнике. Я боюсь удариться о стену, поэтому -200g3d.setEye([point1.x, 1600, point1.y]);//Eye. g3d.setCenter([point2 .x, 1600, point2.y]);//I

3D-компонент в HT имеет метод walk(step, anim, firstPersonMode). Эта функция одновременно изменяет положения глаза и центра. То есть глаз и центр перемещаются с одинаковым смещением в направлении вектора, установленном параметром. две точки одновременно. шаг — значение длины вектора смещения. Если параметр firstPersonMode пуст, по умолчанию используется текущее значение Graph3dView#isFirstPersonMode(). Если операция обхода вызывается для режима от первого лица, эта функция будет учитывать граничные ограничения Graph3dView#getBoundaries().

 g3d.walk(distance, {frames: 50, интервал: 30, easing: function(t) {return t; }, FinishFunc: function() { frontIndex += 1; if (points.length - 2 > frontIndex) {/ /points.length = 5 g3d.setCenter([point2.x, 1600, point2.y]);//Изменяем конечную точку на начальную точку g3d.rotate(Math.PI / 2, 0, {frames: 30, интервал: 30, easing: function(t) {return t;}, FinishFunc : function() {forward();} }); else { var LastPoint =points[points.length - 1];//точки пути в json Последняя точка g3d.setCenter([lastPoint.x, 1400, LastPoint.y]); g3d.rotate(-Math.PI / 2, 0, {frames: 30, интервал: 30, FinishFunc: function() { window . isAnimationRunning = ложь } });

Независимо от того, сколько точек имеется на пути, этот оператор оценки все равно может работать. Только последний момент — выйти из функции, вызванной после завершения анимации FinishFunc, и установить для свойства window.isAnimationRunning значение false, чтобы остановить функцию startAnim. . Если это не последняя точка, после поворота пользователя функция пересылки вызывается обратно. К этому моменту все коды объяснены. Такой большой проект был реализован с помощью очень небольшого количества кода!

Вышеупомянутая классическая 3D-анимация роуминга виртуального компьютерного зала WebGL на основе HTML5, представленная редактором. Надеюсь, она будет вам полезна. Если у вас есть какие-либо вопросы, оставьте мне сообщение, и редактор ответит вам вовремя. Я также хотел бы поблагодарить всех за поддержку сайта боевых искусств VeVb!