Сцена из тысяч светящихся частиц, которые разлетаются от курсора, с bloom — для hero-фона или промо-страницы.
Замените фрагменты в квадратных скобках своими данными и вставьте промпт в чат с ИИ.
Значения сразу появятся в превью, коде и при копировании.
Ты — creative-разработчик, специализирующийся на WebGL. Создай интерактивное поле частиц на Three.js. Входные данные: - Назначение: [фон hero-секции / мини-игра / промо-страница] - Количество частиц: [15000] - Цвета: [синий и фиолетовый / HEX бренда] - Стек: [чистый Three.js / React Three Fiber] - Поддержка мобильных: [да / нет] Требования: 1. Система Points с BufferGeometry, частицы распределены в объёме как туманность. 2. Собственный ShaderMaterial: мягкое круглое свечение в фрагментном шейдере, additive blending, размер точки зависит от расстояния до камеры. 3. Отталкивание от курсора: переведи координаты мыши в мировые через Raycaster и плоскость; частицы в радиусе [5] единиц отлетают от курсора и плавно возвращаются на исходные позиции (пружина с затуханием). Логику расчёта вынеси в вершинный шейдер через uniform позиции курсора, чтобы не гонять массивы на CPU. 4. Постобработка: EffectComposer с UnrealBloomPass, параметры силы, радиуса и порога вынесены в конфиг. 5. Производительность 60 FPS: devicePixelRatio не выше 2, на мобильных меньше частиц и без bloom, пауза рендера при уходе вкладки или секции из вьюпорта (IntersectionObserver, visibilitychange). 6. Доступность: при prefers-reduced-motion частицы статичны или движутся минимально; canvas помечен aria-hidden, контент страницы не зависит от него. 7. Корректная очистка: dispose геометрии, материалов и рендерера при размонтировании. Формат ответа: полный код компонента или модуля, список параметров для настройки и короткая инструкция по встраиванию в [стек].
```text Ты — creative-разработчик, специализирующийся на WebGL. Создай интерактивное поле частиц на Three.js. Входные данные: - Назначение: [фон hero-секции / мини-игра / промо-страница] - Количество частиц: [15000] - Цвета: [синий и фиолетовый / HEX бренда] - Стек: [чистый Three.js / React Three Fiber] - Поддержка мобильных: [да / нет] Требования: 1. Система Points с BufferGeometry, частицы распределены в объёме как туманность. 2. Собственный ShaderMaterial: мягкое круглое свечение в фрагментном шейдере, additive blending, размер точки зависит от расстояния до камеры. 3. Отталкивание от курсора: переведи координаты мыши в мировые через Raycaster и плоскость; частицы в радиусе [5] единиц отлетают от курсора и плавно возвращаются на исходные позиции (пружина с затуханием). Логику расчёта вынеси в вершинный шейдер через uniform позиции курсора, чтобы не гонять массивы на CPU. 4. Постобработка: EffectComposer с UnrealBloomPass, параметры силы, радиуса и порога вынесены в конфиг. 5. Производительность 60 FPS: devicePixelRatio не выше 2, на мобильных меньше частиц и без bloom, пауза рендера при уходе вкладки или секции из вьюпорта (IntersectionObserver, visibilitychange). 6. Доступность: при prefers-reduced-motion частицы статичны или движутся минимально; canvas помечен aria-hidden, контент страницы не зависит от него. 7. Корректная очистка: dispose геометрии, материалов и рендерера при размонтировании. Формат ответа: полный код компонента или модуля, список параметров для настройки и короткая инструкция по встраиванию в [стек]. ```
{
"messages": [
{
"role": "user",
"content": "Ты — creative-разработчик, специализирующийся на WebGL. Создай интерактивное поле частиц на Three.js.\n\nВходные данные:\n- Назначение: [фон hero-секции / мини-игра / промо-страница]\n- Количество частиц: [15000]\n- Цвета: [синий и фиолетовый / HEX бренда]\n- Стек: [чистый Three.js / React Three Fiber]\n- Поддержка мобильных: [да / нет]\n\nТребования:\n1. Система Points с BufferGeometry, частицы распределены в объёме как туманность.\n2. Собственный ShaderMaterial: мягкое круглое свечение в фрагментном шейдере, additive blending, размер точки зависит от расстояния до камеры.\n3. Отталкивание от курсора: переведи координаты мыши в мировые через Raycaster и плоскость; частицы в радиусе [5] единиц отлетают от курсора и плавно возвращаются на исходные позиции (пружина с затуханием). Логику расчёта вынеси в вершинный шейдер через uniform позиции курсора, чтобы не гонять массивы на CPU.\n4. Постобработка: EffectComposer с UnrealBloomPass, параметры силы, радиуса и порога вынесены в конфиг.\n5. Производительность 60 FPS: devicePixelRatio не выше 2, на мобильных меньше частиц и без bloom, пауза рендера при уходе вкладки или секции из вьюпорта (IntersectionObserver, visibilitychange).\n6. Доступность: при prefers-reduced-motion частицы статичны или движутся минимально; canvas помечен aria-hidden, контент страницы не зависит от него.\n7. Корректная очистка: dispose геометрии, материалов и рендерера при размонтировании.\n\nФормат ответа: полный код компонента или модуля, список параметров для настройки и короткая инструкция по встраиванию в [стек]."
}
]
}