39 Три примера JS

Вы здесь:
  1. Главная
  2. Статьи по дизайну
  3. 39 Три примера JS

  

О коде

  

Text Morphing Text

  

Текст с измененным размером частиц с Three.js.

  

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

  

Зависимости: OrbitControls.js, GeometryUtils.js, TweenMax.js

Демонстрационное изображение: City 3D "title =" City 3D "/> </figure> <div class=     

      

Автор

      

  • Виктор Вергара

    •         

    •       

  
  
  

  

О коде

  

Город 3D

  

3D city — эксперимент с Three.js.

  

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

  

Зависимости: constants.js, TweenMax.js

Демонстрационное изображение: Particle Slider "title =" Particle Slider "/> </figure> <div class=     

      

Автор

      

  • Чиен-Джу Пэн

    •         

    •       

  
  

    

Сделано с

    

  • HTML / CSS (SCSS) / JavaScript (Babel)

    •     

  

  

О коде

  

Слайдер частиц

  

Отзывчивый слайдер частиц (flickity.js) с библиотекой three.js .

  

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

  

Зависимости: flickity.css, flickity.js

Демонстрационное изображение: Raycaster "title =" Raycaster "/> </figure> <div class=     

      

Автор

      

  • Виктор Вергара

    •         

    •       

  
  
  

  

О коде

  

Raycaster

  

Raycaster — эксперимент с Three.js.

  

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

  

Зависимости: TweenMax.js, RectAreaLightUniformsLib.js

Демонстрационное изображение: Pacman Concept "title =" Pacman Concept "/> </figure> <div class=     

      

Автор

      

  • Иван Хуарес Н.

    •         

    •       

  
  
  

  

О коде

  

Концепция Пакмана

  

Я хотел посмотреть, смогу ли я сделать мини-игру о pac-man с небольшим поворотом, но каким-то образом закончил создание этого кубического лабиринта с искрящимися огнями и цветами. Затем я понимаю, что это можно использовать как игровое меню.

  

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

  

Зависимости: EffectComposer.js, UnrealBloomPass.js, perlin.js, THREE.MeshLine.js, TweenMax.js

Демонстрационное изображение: Cristal Lands "title =" Cristal Lands "/> </figure> <div class=     

      

Автор

      

  • Никита Скарговский

    •         

    •       

  
  
  

  

О коде

  

Кристальные Земли

  

Кристальные земли — еще один эксперимент с библиотекой three.js.

  

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

  

Зависимости: OrbitControls.js

Демонстрационное изображение: Coral Blooms "title =" Coral Blooms "/> </figure> <div class=     

      

Автор

      

  • Лиам Иган

    •         

    •       

  
  

    

Сделано с

    

  • HTML / CSS (SCSS) / JavaScript (Babel)

    •     

  

  

О коде

  

Коралловые Цветы

  

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

  

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

  

Зависимости: —

Демонстрационное изображение: Изометрическая комната "title =" Изометрическая комната "/> </figure> <div class=     

      

Автор

      

  • Алексия Перессон

    •         

    •       

  
  
  

  

О коде

  

Изометрическая комната

  

Изометрическая комната — Three.js.

  

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

  

Зависимости: jQuery.js

Демонстрационное изображение: стабильный шум скручивания "title =" Устойчивый шум скручиваемости "/> </figure> <div class=     

      

Автор

      

  • Тим Севериен

    •         

    •       

  
  
  

  

О коде

  

Стабильный шум скручиваемости

  

Стабильный шум скручиваемости с помощью трех джойстиков.

  

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

  

Зависимости: GPUComputationRenderer.js, OrbitControls.js

Демонстрационное изображение: Лиза Кобразова "title =" Лиза Кобразова "/> </figure> <div class=     

      

Автор

      

  • Лиза Кобразова

    •         

    •       

  
  

    

Сделано с

    

  • HTML (мопс) / CSS / JavaScript

    •     

  

  

О коде

  

Лиза Кобразова

  

Маленькие низкополигональные овцы, сделанные с three.js . Нажмите, чтобы прыгать и чувствовать себя сонным:)

  

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

  

Зависимости: OrbitControls.js

Демонстрационное изображение: «Анимация плохого / Уолтера Уайта» title = «Анимация плохого / Уолтера Уайта» /> </figure> <p>  </p> <h4 class= О коде

  

Анимация Вальтера Уайта

  

Анимация «Плохой / Уолтер Уайт» с three.js . Удерживайте нажатой кнопку, чтобы преобразовать.

  

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

  

Зависимости: —

Демонстрационное изображение: Экран выбора иммерсивного слайдера Three JS Game Style "title =" Экран выбора иммерсивного слайдера Three JS Game Style "/> </figure> <div class=     

      

Автор

      

  • Джейми Коулт

    •         

    •       

  
  

    

Сделано с

    

  • HTML (Haml) / CSS (SCSS) / JavaScript

    •     

  

  

О коде

  

Экран выбора ползунка Three JS Game Style

  

Это моя первая правильная попытка создать что-то в THREE.js ! Вы, вероятно, обнаружите, что большая часть JS небрежна и неоптимизирована.
Переходы выполняются с использованием максимальной шкалы времени GSAP, а 3D-интерфейс построен с использованием моего плагина deepUI JS.
Честно говоря, я понятия не имею, как я получил до конечного продукта. Концепция начиналась как простой слайдер продуктов в THREE JS и в конечном итоге становилась все более и более сложной по мере развития. Игра, к которой, по всей видимости, принадлежит сцена, полностью вымышленная, и, конечно, ничего из этого не будет использовано в производстве.

  

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

  

Зависимости: font-awesome.css, OrbitControls.js, jquery.js, TweenMax.js

Демонстрационное изображение: 3D Pixels "title =" 3D Pixels "/> </figure> <div class=     
  
  

    

Сделано с

    

  • HTML / CSS (Less) / JavaScript

    •     

  

  

О коде

  

3D Pixels

  

Перетащите изображение или загрузите изображение, чтобы создать 3d-пиксели.

  

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

  

Зависимости: dat.gui.js, OrbitControls.js, CustomBounce.js, CustomEase.js, TweenMax.js / p>

Демонстрационное изображение: Ночной проезд "title =" Ночной проезд "/> </figure> <div class=     
  
  

    

Сделано с

    

  • HTML / CSS (меньше) / JavaScript (Babel)

    •     

  

  

О коде

  

Ночной Драйв

  

Ночная прогулка по снежному ландшафту.

  

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

  

Зависимости: TweenMax.js

Демонстрационное изображение: 3D Campfire "title =" 3D Campfire "/> </figure> <p>  </p> <h4 class= О коде

  

3D Campfire

  

Еще одна теплая зимняя сцена, которая помогает мне поэкспериментировать с освещением, тенями и трехмерными изображениями в пределах Three.js

  

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

  

Зависимости: OrbitControls.js, TweenMax.js

Демонстрационное изображение: Water Shader "title =" Water Shader "/> </figure> <div class=     

      

Автор

      

  • Джонатан Блэр

    •         

    •       

  
  
  

  

О коде

  

Водный шейдер

  

Три шейдера JS.

  

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

  

Зависимости: jQuery.js

Демонстрационное изображение: переход изображения Three.js "title =" Переход изображения Three.js "/> </figure> <div class=     

      

Автор

      

  • Сзения Задворных

    •         

    •       

  
  
  

  

О коде

  

Three.js Image Transition

  

Шейдерный переход изображения с помощью three.js . Нажмите и перетащите, чтобы управлять анимацией.

  

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

  

Зависимости: bas.js, OrbitControls-2.js, TweenMax.js

Демонстрационное изображение: Кошка против шерстяного шарика "title =" Кошка против шерстяного шарика "/> </figure> <div class=     

      

Автор

      

  • Карим Маалул

    •         

    •       

  
  
  

  

О коде

  

Кошка против шерстяной клубок

  

Демонстрация WebGL с использованием ThreeJs . С обратной кинематикой, физикой и множеством кошачьей психологии 🙂 Этот кот — трехмерный римейк главного персонажа "Babel, кота, который будет королем", детского приложения, которое я сделал некоторое время назад.

  

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

  

Зависимости: OrbitControls.js, cat.js, TweenMax.min.js

Демонстрационное изображение: «Чихание дракона» title = «Чихание дракона» /> </figure> <div class=     

      

Автор

      

  • Карим Маалул

    •         

    •       

  
  
  

  

О коде

  

Чихание Дракона

  

Помогите дракону развести огонь, нажмите как можно быстрее, затем отпустите. Исследование дыма и огня с использованием ThreeJS и TweenMax.

  

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

  

Зависимости: OrbitControls.js, TweenMax.js

Демонстрационное изображение: Бегущая корова "title =" Бегущая корова "/> </figure> <div class=     

      

Автор

      

  • Карим Маалул

    •         

    •       

  
  
  

  

О коде

  

Святая бегущая корова

  

Нажмите и перетащите, чтобы повернуть сцену. Сделано с three.js и TweenMax.js.

  

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

  

Зависимости: —

Демонстрационное изображение: Chill the Lion "title =" Chill the Lion "/> </figure> <div class=     

      

Автор

      

  • Карим Маалу

    •         

    •       

  
  
  

  

О коде

  

Холод Льва

  

Эксперимент WebGL с использованием ThreeJS . Переместите вентилятор и нажмите, чтобы поднять ветер, лев наверняка оценит.

  

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

  

Зависимости: OrbitControls.js

Демонстрационное изображение: Paranoid vs Shy Birds "title =" Параноик vs Shy Birds "/> </figure> <div class=     

      

Автор

      

  • Карим Маалул

    •         

    •       

  
  
  

  

О коде

  

Параноид против застенчивых птиц

  

Параноидальная птица, окруженная двумя застенчивыми приятелями с бегающим взглядом. Эксперимент WebGL с использованием Three.js и немного TweenMax.js.

  

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

  

Зависимости: OrbitControls.js, TweenMax.js

Демонстрационное изображение: Mighty Fish "title =" Mighty Fish "/> </figure> <div class=     

      

Автор

      

  • Карим Маалул

    •         

    •       

  
  
  

  

О коде

  

Могучая рыба

  

Эксперимент WebGL с использованием ThreeJs . Двигайте мышью вправо и влево, сверху и снизу, чтобы изменить скорость и направление.

  

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

  

Зависимости: —

Category: Статьи по дизайну
Теги: 

Пожалуйста, поставьте рейтинг статье:
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...
Поделиться этой записью
Share with Google+Share with PinterestShare with LinkedInShare with WhatsApp

Связанные записи

Go to Top

Поделитесь статьей!

close-link