Космический фон
Zero Block
Click "Block Editor" to enter the edit mode. Use layers, shapes and customize adaptability. Everything is in your hands.
Tilda Publishing
create your own block from scratch
Инструкция:
В HTML элемент вставить в зеро блоке:
<canvas id='particles' style='width:100%; height:100%'></canvas>


Оставшейся код ниже вставляем в блок Т123:
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

<script>
const params = {
bgColor: "#002983", // цвет заднего фона
fogColor: "#002983", // цвет тумана
fogIntensity: 0.0008, // интенсивность тумана
count: 1000, // кол-во частиц
color: "#BACEFC", // цвет частиц
sprite: 'https://static.tildacdn.com/tild3132-3866-4365-b330-336137396639/circle_05.png', // спрайт ( растровое изображение его можно менять) частиц
size: 15, // размер частиц
camX: 0.05, // скорость вращения камеры по X
camY: 0.05, // скорость вращения камеры по Y
objX: 0, // скорость вращения сцены по X
objY: 1, // скорость вращения сцены по Y
objZ: 0 // скорость вращения сцены по Z
}

document.addEventListener('DOMContentLoaded', () => {
t_onReady(function() {
t_onFuncLoad('t396_init', function () {
(function () {
let camera, scene, renderer, parameters;
let mouseX = 0, mouseY = 0;
let vertices = [];
let windowHalfX = window.innerWidth / 2;
let windowHalfY = window.innerHeight / 2;

const materials = [];
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.z = 1000;

scene = new THREE.Scene();
scene.background = new THREE.Color(params.bgColor);
scene.fog = new THREE.FogExp2(params.fogColor, params.fogIntensity);

const geometry = new THREE.BufferGeometry();
const textureLoader = new THREE.TextureLoader();
const sprite = textureLoader.load( params.sprite );

for ( let i = 0; i < params.count; i ++ ) {
const x = Math.random() * 2000 - 1000;
const y = Math.random() * 2000 - 1000;
const z = Math.random() * 2000 - 1000;
vertices.push( x, y, z );
}

geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
materials[0] = new THREE.PointsMaterial( { color: params.color, size: params.size, map: sprite, blending: THREE.AdditiveBlending, depthTest: false, transparent: true } );
const particles = new THREE.Points( geometry, materials[0] );
scene.add( particles );


const canvas = document.querySelector('#particles');
let width = canvas.offsetWidth,
height = canvas.offsetHeight;

renderer = new THREE.WebGLRenderer({canvas});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(width, height);

document.body.addEventListener( 'pointermove', onPointerMove );
window.addEventListener( 'resize', onWindowResize );

function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = canvas.offsetWidth / canvas.offsetHeight;
camera.updateProjectionMatrix();
renderer.setSize( canvas.offsetWidth, canvas.offsetHeight );
}

function onPointerMove( event ) {
if ( event.isPrimary === false ) return;
mouseX = event.clientX - windowHalfX;
mouseY = event.clientY - windowHalfY;
}

animate();

function animate() {
requestAnimationFrame( animate );
render();
}

function render() {
const time = Date.now() * 0.00005;
camera.position.x += ( mouseX - camera.position.x ) * params.camX;
camera.position.y += ( - mouseY - camera.position.y ) * params.camY;
camera.lookAt( scene.position );
const object = scene.children[0];

if ( object instanceof THREE.Points ) {
object.rotation.x = time * params.objX;
object.rotation.y = time * params.objY;
object.rotation.z = time * params.objZ;
}

renderer.render( scene, camera );
}
})();
})
})
});
</script>
Student Account
Предоставляется для создания учебных проектов. Не предназначен для коммерческого использования
This site was made on Tilda — a website builder that helps to create a website without any code
Create a website
Student