Как сделать фон 3D бабочки у
страницы/зероблок
1 мин.
Как сделать фон 3D бабочки у
страницы/зероблок. Пример работы модификации внизу cтраницы
Обновление от 31.12.23 - В слайдер были добавлены новые поля, а также recid теперь нужно писать без приставки "#rec", поэтому если вдруг что-то не работает, то см. видео, а также текстовую инструкцию ниже↓
!
Zeroblock
three.js
1. Убери фон у блоков, где должены быть бабочки на фоне
2. Задай количество бабочек, которые будут на фоне
3. Укажи цвет фона для фона с бабочками
4. Укажи скорость взмахов крылышками у бабочек
5. Скопируй код и вставь в блок т123
2. Задай количество бабочек, которые будут на фоне
3. Укажи цвет фона для фона с бабочками
4. Укажи скорость взмахов крылышками у бабочек
5. Скопируй код и вставь в блок т123
Инструкция
Важно!
Не ставь чрезмерно большое значение числа бабочек т.к. это может нагрузить видеокарту и быстродействие модификации может быть снижено
(Развернуть)
Скопировать код
<!--Библиотека VORON--><!--3D Фон https://voron-dev.ru/3d_butterflies-->
<script type="module">
import { butterfliesBackground } from 'https://cdn.jsdelivr.net/npm/threejs-toys@0.0.8/+esm'
butterfliesBackground ({
el: document.getElementsByTagName('body')[0],
gpgpuSize: 64, // Количество бабочек !ОСТОРОЖНО! БОЛЬШОЕ ЧИСЛО БАБОЧЕК СИЛЬНО НАГРУЖАЕТ УСТРОЙСТВО
background: '#ffffff', // Цвет фона
material: 'basic', // 'basic', 'phong', 'standard'
materialParams: { transparent: true, alphaTest: 0.5 },
texture: 'https://static.tildacdn.com/tild3937-3935-4930-a239-353861336533/butterflies.png',
textureCount: 4,
wingsScale: [1, 1, 1],
wingsWidthSegments: 8, // Количество сегментов для анимации крылышек в ширину
wingsHeightSegments: 8, // Количество сегментов для анимации крылышек в высоту
wingsSpeed: 0.75, // Скорость взмахов крыльями
wingsDisplacementScale: 1.25,
noiseCoordScale: 0.01,
noiseTimeCoef: 0.0005,
noiseIntensity: 0.0025,
attractionRadius1: 100,
attractionRadius2: 150,
maxVelocity: 0.1
})
</script>
<style>
canvas[data-engine="three.js r140"] {
position: absolute;
z-index: -1;
top: 0px;
left: 0px;
}
</style>
123
Пример работы модификации