Как сделать фон с 3D частицами для Zero-блок?

Этот скрипт позволит тебе сделать для зероблока эффект 3D фона с частицами и панаромированием. Пример работы модификации внизу cтраницы

1 мин.

three.js

Zeroblock

Обновление от 31.12.23 - В слайдер были добавлены новые поля, а также recid теперь нужно писать без приставки "#rec", поэтому если вдруг что-то не работает, то см. видео, а также текстовую инструкцию ниже↓

!

1. Добавь в зеро, где будешь делать 3D фон шейп и убери у него цвет

2. Задай шейпу класс

3. Задай количество частиц (см. Важно)

4. Укажи цвета частиц

5. Укажи recid зеро блока, в котором у тебя шейп с классом particles

6. Выбери изменять ли цвет частиц при клике по шейпу

7. Скопируй код и вставь в блок т123

Инструкция

Важно!

- Не ставь чрезмерно большое значение количества частиц, т.к. в некоторых случаях это может нагрузить видеокарту и быстродействие модификации может быть снижено.
- Количество частиц не изменяется динамически в отличии от цветов, поэтому подобрать нужное значение можно только вставляя на страницу код и проверяя

(Развернуть)

particles

Скопировать

Скопировать код

В этой модификации поля для генератора кода находятся справа сверху, чтобы можно было редактировать их сразу видя результат на странице

<!--Библиотека VORON--><!--3D Фон https://voron-dev.ru/particles_back-->
<script type="module">
import { swarmBackground } from 'https://unpkg.com/lil-gui@0.17.0/dist/lil-gui.umd.min.js'

const bg = swarmBackground({
  el: document.querySelector('.particles'),
  eventsEl: document.querySelector('.particles'),
  gpgpuSize: 128,
  colors: ['#ffffff', '#ffffff'],
  geometry: 'default'
})

bg.three.camera.position.set(0, 0, 200)
bg.three.renderer.setClearColor( '#000000', 1 )

 document.querySelector('#rec538438370').addEventListener('click', (element) => {
  bg.setColors([Math.random() * 0xffffff, Math.random() * 0xffffff])
})

var interact = false
document.querySelector('#rec538438370').addEventListener('dblclick', (element) => {
  if (interact === false) {
  interact = true
  document.querySelector('.particles').classList.add('interact')
  }
  else {
   interact = false  
   document.querySelector('.particles').classList.remove('interact')
  }
})
</script>
<style>
    canvas[data-engine="three.js r140"] {
        position: absolute;
        z-index: -1;
        top: 0px;
        left: 0px;
        overflow: hidden;
        height: unset !important;
    }
    .interact {
        pointer-events: auto !important;
    }
    .particles {
        pointer-events: none;
    }
    .unselect {
        user-select: none;
    }
</style>

Пример работы модификации

- Нажми два раза и покрути, чтобы включить\выключить панаромирование в 3D
- Нажми один раз, чтобы изменить цвет на случайный
- Измени параметры чтобы увидеть изменения