Установка:

• Добавляем HTML-элемент, в котором будет находиться анимация (canvas будет добавлен как его дочерний элемент и иметь его ширину и высоту).
  Во всех примерах это <div id="vanta"></div>
  Этот элемент может иметь дочерние, они будут отображаться как содержимое переднего плана, поверх анимации.
• Добавляем скрипт основной библиотеки three.js
• Добавляем скрипт нужной анимации (у каждого примера свой)
• Подключаем скрипт к нужному элементу (у каждого примера свой)

Общие настройки:

Каждый эффект имеет свои собственные параметры и настройки (они указаны в примерах), а общие для всех:

• el - селектор элемента, в котором будет находиться анимация
• mouseControls - по умолчанию true, значение false отключит управление мышью.
• touchControls по умолчанию true, значение false отключит сенсорное управление.
• gyroControls по умолчанию false, значение true разрешит гироскопу имитировать мышь.

Пример:

Управление после инициализации:

Инициализируем через константу:

Смена настроек:

Перерисовка анимации, например при изменении размера экрана:

Удаление анимации:

Примеры:

Волны

• Скрипт анимации vanta.clouds.min.js
• Инициализация и настройки:
  VANTA.WAVES({ el: '#vanta', minHeight: 200, minWidth: 200, scale: 1, scaleMobile: 1, color: '#337ab7', shininess: 32, waveHeight: 14, waveSpeed: 0.8, zoom: 1 })

  1 2 3 4 5 6 7 8 9 10 11 12

  VANTA.WAVES({ el: '#vanta', minHeight: 200, minWidth: 200, scale: 1, scaleMobile: 1, color: '#337ab7', shininess: 32, waveHeight: 14, waveSpeed: 0.8, zoom: 1 })

Облака 1

• Скрипт анимации vanta.clouds.min.js
• Инициализация и настройки:
  VANTA.CLOUDS({ el: '#vanta', minHeight: 200, minWidth: 200, skyColor: '#6cbede', cloudColor: '#b4c7e3', cloudShadowColor: '#1a3956', sunColor: '#f49620', sunGlareColor: '#ff6835', sunlightColor: '#f99632', speed: 1 })

  1 2 3 4 5 6 7 8 9 10 11 12

  VANTA.CLOUDS({ el: '#vanta', minHeight: 200, minWidth: 200, skyColor: '#6cbede', cloudColor: '#b4c7e3', cloudShadowColor: '#1a3956', sunColor: '#f49620', sunGlareColor: '#ff6835', sunlightColor: '#f99632', speed: 1 })

Облака 2

• Скрипт анимации vanta.clouds2.min.js
• Инициализация и настройки:
  VANTA.CLOUDS2({ el: '#vanta', minHeight: 200, minWidth: 200, scale: 1, backgroundColor: '#332f2f', skyColor: '#55a2c7', cloudColor: '#354f81', lightColor: '#ffffff', speed: 0.9, texturePath: 'noise.png' })

  1 2 3 4 5 6 7 8 9 10 11 12

  VANTA.CLOUDS2({ el: '#vanta', minHeight: 200, minWidth: 200, scale: 1, backgroundColor: '#332f2f', skyColor: '#55a2c7', cloudColor: '#354f81', lightColor: '#ffffff', speed: 0.9, texturePath: 'noise.png' })

• В настройках используется текстура noise.png

Глобус

• Скрипт анимации vanta.globe.min.js
• Инициализация и настройки:
  VANTA.GLOBE({ el: '#vanta', minHeight: 200, minWidth: 200, scale: 1, scaleMobile: 1, color: '#bfe2ff', color2: '#ffffff', backgroundColor: '#337ab7' })

  1 2 3 4 5 6 7 8 9 10

  VANTA.GLOBE({ el: '#vanta', minHeight: 200, minWidth: 200, scale: 1, scaleMobile: 1, color: '#bfe2ff', color2: '#ffffff', backgroundColor: '#337ab7' })

Клетки

• Скрипт анимации vanta.cells.min.js
• Инициализация и настройки:
  VANTA.CELLS({ el: '#vanta', minHeight: 200, minWidth: 200, scale: 1, color1: '#3379b7', color2: '#bfe2ff', size: 1.4, speed: 1.1 })

  1 2 3 4 5 6 7 8 9 10

  VANTA.CELLS({ el: '#vanta', minHeight: 200, minWidth: 200, scale: 1, color1: '#3379b7', color2: '#bfe2ff', size: 1.4, speed: 1.1 })

Сеть

• Скрипт анимации vanta.net.min.js
• Инициализация и настройки:
  VANTA.NET({ el: '#vanta', minHeight: 200, minWidth: 200, scale: 1, scaleMobile: 1, color: '#bfe2ff', backgroundColor: '#337ab7', points: 12, spacing: 12 })

  1 2 3 4 5 6 7 8 9 10 11

  VANTA.NET({ el: '#vanta', minHeight: 200, minWidth: 200, scale: 1, scaleMobile: 1, color: '#bfe2ff', backgroundColor: '#337ab7', points: 12, spacing: 12 })