Навигация является одним из наиболее важных элементов веб-сайта, поскольку она направляет пользователей к интересующему их контенту. Более того, учитывая всю важность, мы могли бы даже назвать ее основой сайта. Если вы все хорошо организуете и спроектируете, она обеспечит отличное удобство использования и плавную навигацию для ваших пользователей. А ведь именно этого вы и хотите добиться.…
Эффект пандемии повлиял не только на нашу жизнь и работу, но и на дизайн. Некоторые бренды меняли логотипы. А некоторые агентства спешат запустить новые мобильные приложения, сделать свой «общественный вклад», чтобы отреагировать на вспышку коронавируса. Одной из областей разработки приложений, которую не следует упускать из виду, является дизайн пользовательского интерфейса. Дизайн пользовательского интерфейса — это…
По мере того, как бренды стремятся соединиться со своей аудиторией в мире, насыщенном цифровыми технологиями, иллюстрация стала довольно желанным умением иметь креатив. Помимо добавления человеческого подхода к цифровым продуктам, иллюстрация помогает дифференцировать вас от конкурентов, рассказывать уникальную историю бренда и визуализировать сложные идеи доступным способом. «Иллюстрации продукта направлены на то, чтобы доставить удовольствие пользователю. Он…
Отличный логотип должен бросаться в глаза, иллюстрировать историю вашего бренда и быть запоминающимся. Что может быть лучше, чем для вашего логотипа буквально спрыгнуть со страницы? 3D логотипы добавляют дополнительное «измерение» для того, чтобы их заметили, и они очень хорошо работают на таких платформах, как телевидение и онлайн. По сравнению с более традиционными 2D-логотипами, 3D-дизайн логотипа…
Коллекция кодов three.js (библиотека Javascript 3D) примеров . Обновление коллекции сентября 2018 года. 12 новых предметов.
Этот простой интерактивный фон создается с помощью ThreeJS и геометрии PlaneBufferGeometry, анимированной с помощью симплексного шума.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Отзывчивый: Да
Зависимости: three.js, simplex-noise.js, chroma.js
Простой 3D-эффект раскрытия. Этот простой эффект создается с помощью ThreeJS и TweenMax.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Отзывчивый: Да
Зависимости: bootstrap.css, three.js, tweenmax.js
Ваша мышь (или палец) будет падающей звездой. Вы можете изменить размер, скорость и т. Д., Изменив параметры.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Отзывчивый: Да
Зависимости: three.js, dat.gui.js
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Отзывчивый: нет
Зависимости: three.js
О коде
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Отзывчивый: нет
Зависимости: three.js, tweenmax.js
О коде
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Отзывчивый: нет
Зависимости: three.js, tweenmax.js
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Отзывчивый: нет
Зависимости: three.js
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Отзывчивый: нет
Зависимости: three.js, tweenmax.js
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Отзывчивый: Да
Зависимости: three.js, tweenmax.js
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Отзывчивый: нет
Зависимости: three.js, tweenmax.js, perlin.js
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Отзывчивый: Да
Зависимости: three.js, ccapture.js
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Отзывчивый: Да
Зависимости: three.js, ccapture.js
О коде
3D сосна с тройкой.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: OrbitControls.js, OBJLoader.js, MTLLoader.js, BVHLoader.js
О коде
Три.js OBJ дерево.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: OrbitControls.js, OBJLoader.js, MTLLoader.js
Ripple мышь с тройным фокусом.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: ccapture.js
Большинство вещей здесь — просто самозагрузка. По сути это просто
настраивая ThreeJS так, чтобы он представлял плоскую поверхность для рисования
шейдер Единственное, что здесь можно увидеть — это форма, отправленная
шейдер Кроме того, все волшебство происходит в представлении HTML
под фрагментом шейдера.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: ccapture.js
Текст с измененным размером частиц с Three.js.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: OrbitControls.js, GeometryUtils.js, TweenMax.js
3D city — эксперимент с Three.js.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: constants.js, TweenMax.js
Отзывчивый слайдер частиц (flickity.js) с библиотекой three.js .
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: flickity.css, flickity.js
Raycaster — эксперимент с Three.js.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: TweenMax.js, RectAreaLightUniformsLib.js
Я хотел посмотреть, смогу ли я сделать мини-игру о pac-man с небольшим поворотом, но каким-то образом закончил создание этого кубического лабиринта с искрящимися огнями и цветами. Затем я понимаю, что это можно использовать как игровое меню.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: EffectComposer.js, UnrealBloomPass.js, perlin.js, THREE.MeshLine.js, TweenMax.js
Кристальные земли — еще один эксперимент с библиотекой three.js.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: OrbitControls.js
Экстремальные фрактальные искажения шума. Вроде как коралловые цветы на поверхности темного океана. Двигайте мышью, чтобы увеличить скорость симуляции. Я был бы признателен, если бы вы в конечном итоге использовали этот код в любой производственной ситуации, чтобы вы цитировали меня в своем коде и сообщали мне, для чего вы его использовали. Мне нравится видеть, что люди действительно получают выгоду от того, что я пишу, и я не думаю, что это слишком много, чтобы просить, чтобы я получил цитату из-за моих неприятностей 🙂
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
Изометрическая комната — Three.js.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: jQuery.js
Стабильный шум скручиваемости с помощью трех джойстиков.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: GPUComputationRenderer.js, OrbitControls.js
Маленькие низкополигональные овцы, сделанные с three.js . Нажмите, чтобы прыгать и чувствовать себя сонным:)
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: OrbitControls.js
О коде
Анимация «Плохой / Уолтер Уайт» с three.js . Удерживайте нажатой кнопку, чтобы преобразовать.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
Это моя первая правильная попытка создать что-то в THREE.js ! Вы, вероятно, обнаружите, что большая часть JS небрежна и неоптимизирована.
Переходы выполняются с использованием максимальной шкалы времени GSAP, а 3D-интерфейс построен с использованием моего плагина deepUI JS.
Честно говоря, я понятия не имею, как я получил до конечного продукта. Концепция начиналась как простой слайдер продуктов в THREE JS и в конечном итоге становилась все более и более сложной по мере развития. Игра, к которой, по всей видимости, принадлежит сцена, полностью вымышленная, и, конечно, ничего из этого не будет использовано в производстве.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: font-awesome.css, OrbitControls.js, jquery.js, TweenMax.js
Перетащите изображение или загрузите изображение, чтобы создать 3d-пиксели.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: dat.gui.js, OrbitControls.js, CustomBounce.js, CustomEase.js, TweenMax.js / p>
Ночная прогулка по снежному ландшафту.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: TweenMax.js
О коде
Еще одна теплая зимняя сцена, которая помогает мне поэкспериментировать с освещением, тенями и трехмерными изображениями в пределах Three.js
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: OrbitControls.js, TweenMax.js
Три шейдера JS.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: jQuery.js
Шейдерный переход изображения с помощью three.js . Нажмите и перетащите, чтобы управлять анимацией.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: bas.js, OrbitControls-2.js, TweenMax.js
Демонстрация WebGL с использованием ThreeJs . С обратной кинематикой, физикой и множеством кошачьей психологии 🙂 Этот кот — трехмерный римейк главного персонажа "Babel, кота, который будет королем", детского приложения, которое я сделал некоторое время назад.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: OrbitControls.js, cat.js, TweenMax.min.js
Помогите дракону развести огонь, нажмите как можно быстрее, затем отпустите. Исследование дыма и огня с использованием ThreeJS и TweenMax.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: OrbitControls.js, TweenMax.js
Нажмите и перетащите, чтобы повернуть сцену. Сделано с three.js и TweenMax.js.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
Эксперимент WebGL с использованием ThreeJS . Переместите вентилятор и нажмите, чтобы поднять ветер, лев наверняка оценит.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: OrbitControls.js
Параноидальная птица, окруженная двумя застенчивыми приятелями с бегающим взглядом. Эксперимент WebGL с использованием Three.js и немного TweenMax.js.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: OrbitControls.js, TweenMax.js
Эксперимент WebGL с использованием ThreeJs . Двигайте мышью вправо и влево, сверху и снизу, чтобы изменить скорость и направление.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
В этом обзоре мы хотели показать, как владельцы интернет-магазинов совершенствуют дизайн покупательской корзины на своих сайтах. Такие страницы очень важны для того, чтобы клиент совершил покупку. Однако они часто созданы так, словно они абсолютно никак не влияют на процесс покупки. Да, страницу корзины покупок очень сложно спроектировать должным образом. В идеале, она должна включать…
Хорошо выполненные рекламные кампании на стендах могут быть невероятно мощными. Все рекламные щиты в этой статье выходят за рамки очевидного, чтобы продвигать свои продукты умным, остроумным и инновационным способом. Большие рекламные щиты, размещенные на видном месте, представляют собой огромный холст, предназначенный для публики. Но прорезать окружающий визуальный шум — это действительно искусство. Существует множество способов,…
Как мы выяснили в нашей функции по типу на заказ, тенденция брендинга, охватывающая эстетику ручной работы, придающая вашему бренду атмосферу подлинности, по-прежнему сильна. Тем не менее, при натиске почерков шрифтов, занимающих брендинг, как вы убедитесь, что ваш дизайн выделяется (и по правильным причинам)? Здесь мы рассмотрим четыре файла объявлений, которые использовали типографию на заказ, в…