Новая книга от GraphicDesign & призывает британскую публику прислушиваться друг к другу, представляя аргументы обеих сторон дебатов в ЕС, надеясь «поощрить сочувствие, а не передумать». Автор Молли Лонг 7 февраля 2020 г. 15:45 7 февраля 2020 г. 15:45 Трудно представить себе время, когда британская общественность раскололась так стойко, как в годы, предшествовавшие референдуму ЕС в…
Коллекция кодов 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
Зависимости: —
Когда вы являетесь дизайнером, то ваше портфолио — ваша индивидуальность, по крайней мере, на начальном этапе. Потенциальные клиенты и заказчики тратят всего несколько минут на ваше портфолио, поэтому чрезвычайно важно, чтобы вы представили свою работу в упрощенной форме, которая показывает вас как талантливого дизайнера. Поэтому цель создания вашего дизайнерского портфолио должна быть единственной — продемонстрировать…
Самозваный пивоваренный завод «панк» Brewdog представил новую идентичность бренда, которая является графическим эквивалентом того, чтобы вынуть свою серьгу и сделать разумную стрижку. В банках с новым внешним видом все сразу возвращается, заменяя суетливый фон жирным шрифтом, блокируя цвета и формы, поворачивая типографику, чтобы она находилась на правильном пути, и удаляя шероховатый стиль в пользу чего-то…
Сообщество тиктокеров быстро растёт и расширяется, в саму соцсеть стремится всё больше блогеров и рекламодателей, а значит возникает необходимость автоматизировать работу с TikTok. TikTok Tool — это софт для работы с TikTok, который позволяет поставить работу в соцсети на поток. Рассказываем о его функционале, принципе работы и преимуществах относительно облачных сервисов. Обзор…
Рано или поздно дизайнер задумывается о будущем в своей профессии. Путей много: устроиться в корпорацию, уйти во фриланс, расти вширь (учить код, моушн, 3D и т.д.), расти ввысь (стать лидером команды дизайнеров, продакт-менеджером и т.п.), строить свой проект, либо устроиться в иностранный проект. Я выбрал последний вариант и решил поделиться своим опытом поиска удалённой работы…
Качественного контента по визуализации данных на русском языке крайне мало. Те, кто серьезно изучает эту тему, неизбежно обращаются к зарубежным источникам. Там на них обрушивается огромный поток информации в виде ссылок на обучающие курсы и рейтинги формата «50 лучших экспертов». При таком обилии материала требуется время, чтобы понять, что будет действительно полезным и может использоваться…
Карты Google появились 15 лет назад, избавляя от необходимости фиксировать маршруты в вашей долговременной памяти и провоцируя продажи дорожных карт стремительно падать. Чтобы отметить свой день рождения, Google полностью перестроил платформу с совершенно новым внешним видом, множеством новых функций и блестящим новым значком приложения. Значок Google Maps в последний раз обновлялся в 2015 году и…
За картинку спасибо Karthick Krishnamoorthy Тема иммиграции всегда была для меня интересна, так же как и работа за валюту, постоянный удаленный работодатель, путешествия несмотря на падение рубля. Поэтому решила выпустить серию статей о моем опыте работы с иностранцами, чтобы рассказать о моих инсайтах, как найти работодателя, подготовиться к собеседованию, показать уровень сложности тестовых заданий, как…
Опыт бренда охватывает практически все аспекты восприятия вашего бренда потребителями. По сути, это довольно большое дело. Чтобы по-настоящему понять, что делает бренд успешным, важно понять, как опыт связан с другими ключевыми элементами брендинга, такими как идентичность бренда и голос бренда. В этой статье мы сделаем именно это и предложим несколько полезных советов по созданию собственного…