Инструкция:
В 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>