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