Статьи с тэгом: JS

Вы здесь:

Главная
Записи с тегом "JS"

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

Статьи по дизайнуАвтор: admin 07.02.2020

Коллекция примеров кода three.js (библиотека Javascript 3D). Обновление коллекции сентября 2018 года. 12 новых предметов. "Title =" Коллекция примеров кода three.js (библиотека Javascript 3D). Обновление коллекции сентября 2018 года. 12 новых предметов. "/>

<h5 class=

22 января 2020 года

Коллекция кодов three.js (библиотека Javascript 3D) примеров . Обновление коллекции сентября 2018 года. 12 новых предметов.

Three.js Games

Демонстрационное изображение: Mobile VR PolarScene "title =" Мобильная VR PolarScene "/> </figure>
<p> </p>
<h4 class=

Демонстрационное изображение: Mobile VR Woods Scene "title =" Мобильная VR Woods Scene "/> </figure>
<p> </p>
<h4 class=

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

О коде

Звездопад

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

Отзывчивый: Да

Зависимости: three.js, ccapture.js

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

О коде

снегопад

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

Отзывчивый: Да

Зависимости: three.js, ccapture.js

Демонстрационное изображение: Pine Tree "title =" Pine Tree "/> </figure>
<p> </p>
<h4 class=

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

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

О коде

Ripple Mouse

Ripple мышь с тройным фокусом.

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

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

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

О коде

Шторм

Большинство вещей здесь — просто самозагрузка. По сути это просто
настраивая ThreeJS так, чтобы он представлял плоскую поверхность для рисования
шейдер Единственное, что здесь можно увидеть — это форма, отправленная
шейдер Кроме того, все волшебство происходит в представлении HTML
под фрагментом шейдера.

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

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

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

О коде

Text Morphing Text

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

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

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

Автор

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

26 апреля 2018 года

О коде

Город 3D

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

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

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

Автор

Чиен-Джу Пэн

20 апреля 2018 года

Сделано с

HTML / CSS (SCSS) / JavaScript (Babel)

О коде

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

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

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

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

Автор

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

19 апреля 2018

О коде

Raycaster

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

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

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

Автор

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

2 апреля 2018

О коде

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

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

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

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

Автор

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

5 февраля 2018

О коде

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

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

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

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

Автор

Лиам Иган

15 декабря 2017 г.

Сделано с

HTML / CSS (SCSS) / JavaScript (Babel)

О коде

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

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

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

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

Автор

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

5 ноября 2017 года

О коде

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

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

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

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

Автор

Тим Севериен

26 мая 2017 года

О коде

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

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

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

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

Автор

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

8 апреля 2017 года

Сделано с

HTML (мопс) / CSS / JavaScript

О коде

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

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

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

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

О коде

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

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

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

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

Автор

Джейми Коулт

14 марта 2017 г.

Сделано с

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

Сделано с

HTML / CSS (Less) / JavaScript

О коде

3D Pixels

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

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

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

Сделано с

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

О коде

Ночной Драйв

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

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

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

О коде

3D Campfire

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

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

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

Автор

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

3 августа 2016 г.

О коде

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

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

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

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

Автор

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

4 мая 2016 г.

О коде

Three.js Image Transition

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

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

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

Автор

Карим Маалул

31 июля 2015 года

О коде

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

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

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

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

Автор

Карим Маалул

11 июля 2015 г.

О коде

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

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

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

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

Автор

Карим Маалул

20 июня 2015 г.

О коде

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

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

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

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

Автор

Карим Маалу

17 июня 2015 года

О коде

Холод Льва

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

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

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

Автор

Карим Маалул

8 июня 2015 года

О коде

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

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

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

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

Автор

Карим Маалул

2 мая 2015 г.

О коде

Могучая рыба

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

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

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

Как скопировать в буфер обмена с помощью JS и API буфера обмена

Статьи по дизайнуАвтор: admin 22.01.2020

20 января 2020 Буфер обмена — это полезная функция, которая помогает переносить данные между окном браузера в другое или в другое приложение операционной системы, используя такие операции, как вырезание, копирование и вставка. В этой статье вы узнаете, как скопировать токен API в буфер обмена с помощью JS и современного API асинхронного буфера обмена. Как…

Крутые эффекты для прокрутки на сайте с помощью CSS и JS

Статьи по дизайнуАвтор: admin 13.12.2019

Привет, друзья! Тут я собрал несколько крутых сниппетов которые помогут реализовать вам крутой сайт с красивой прокруткой! Всё бесплатно, качайте! Рекомендую: Скачать крутые CSS Border эффекты для различных объектов на сайте 10 невероятных примеров CSS анимации Скачать крутые эффекты для текста на CSS и JS совершенно бесплатно Несколько вариантов кнопок для прокрутки вниз See the…

Скачать крутые эффекты для текста на CSS и JS совершенно бесплатно

Статьи по дизайнуАвтор: admin 14.05.2019

Привет, друзья! Сегодня я представляю вам мега крутую подборку с разнообразными эффектами для текста на вашем сайте! Данные эффекты работают на JS и CSS! И очень просто устанавливаются на сайт! Приятного использования! Рекомендую: 10 бесплатных и новейших исходников меню для сайта на CSS Скачать свежайшие слайдеры, меню, кнопки и ещё несколько невероятных JQuery исходников (Плюс…

Нет JS, только приключенческая игра с CSS

Статьи по дизайнуАвтор: admin 26.10.2018

$ rows: 4! global; $ columns: 12! global; $ gameObjects: 22; $ tileSize: 48px; $ walkSpeed: 1 с; $ tilesPerSegment: 3; $ tilesPerSegmentVertical: 7; $ segmentHeight: $ tileSize * $ tilesPerSegmentVertical; $ debug: false; * { box-size: border-box; } @ font-face { font-family: pixles; src: url (https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/04B_03__.TTF); } / * ———————————————— ———————————— Стиль…