Содержание статьи1 Новости за неделю о дизайне, продуктах и инструментах1.1 Новое1.2 Почитать1.3 Посмотреть1.4 Полезное1.5 Красивое Новости за неделю о дизайне, продуктах и инструментах Новое Google представила обновленное приложения Карты с новым логотипом и возможностями. Стартап Nuro получил разрешение на запуск в США беспилотных фургонов для доставки. Почитать 5 шагов по добавлению моушен-дизайна в дизайн-систему. Посмотреть…
Подробнее2020 только что начался, и вы уже можете обнаружить множество тенденций, включая дизайн веб-сайтов! Все эти новые стили и методы помогают дизайнерам создавать еще лучшие веб-сайты, которые работают и выглядят потрясающе. Но на какие основные тенденции вам нужно обратить внимание? Есть множество трендов и советов, но вы же не можете объединить все это на одном…
ПодробнееКультура компании может означать что-то свое для каждого, в зависимости от того, с какой компанией вы разговариваете. В связи с тем, что некоторые ведущие мировые компании стали лидерами, было гораздо больше дискуссий о том, что именно представляет собой корпоративная культура и какова ее ценность. Мы собираемся взглянуть на некоторые из наиболее значимых подходов к культуре…
Подробнее
Какое бы программное обеспечение 3D вы ни использовали, эти советы сделают вашу типографику невероятной, независимо от того, используете ли вы отдельные буквы, логотипы или целые предложения.
Новая книга от 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
Зависимости: —
