К основному контенту

1 мин

Zeroblock

Light

5

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

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

(cвернуть)
Инструкция
particles

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

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

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

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

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

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

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

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

- Количество частиц не изменяется динамически в отличии от цветов, поэтому подобрать нужное значение можно только вставляя на страницу код и проверяя

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

Важно!

undefined
Отчистить поля
Загрузить сохраненные значения
undefined
Поля для точек навигации
undefined
undefined
Боковые слайды
undefined
undefined
Свайп
undefined
undefined
undefined
Скопировать код
<!--Библиотека VORON--><!--3D Фон https://voron-dev.ru/particles_back--> <script type="module"> import { swarmBackground } from 'https://unpkg.com/threejs-toys@0.0.8/build/threejs-toys.module.cdn.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> 
123

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

Примеры работы модификации
Controls
Цвет частиц 1
Цвет частиц 2
Количество частиц
Цвет фона
Recid блока, в котором будет 3D
Смена цвета при клике