<!--WebGL Bubbles-->
<!--https://designation.site/liquid_bubble-->
<div class="GumWebGL"></div>

<!--Rainbow-->
<script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/86/three.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/simplex-noise/2.3.0/simplex-noise.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.0/gsap.min.js"></script>
<script>
!(function () {
"use strict";
function GumGum() {
const GumColor = 0xFFFFFF, // Цвет сферы
AmbientColor = 0xFFFFFF, // Окружающее освещение (оттенок)
LightColor = 0xFFFFFF, // Общее освещение
SecondLightColor = 0xFFFFFF, // Цвет линейного освещения (сверху вниз)
ThirdLightColor = 0xFFFFFF, // Цвет линейного освещения (снизу вверх)
FourthLightColor = 0xFFFFFF, // Цвет линейного освещения (спереди)
FifthLightColor = 0xFFFFFF, // Цвет линейного освещения (слева)
SixthLightColor = 0xFFFFFF, // Цвет линейного освещения (справа)
GumContainer = "GumWebGL"; // ID контейнера со сферой
// --------
var vw = window.innerWidth,
vh = window.innerHeight;
const scene = new THREE.Scene(),
renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }),
camera = new THREE.PerspectiveCamera(45, vw / vh, 0.1, 1000),
ambient = new THREE.AmbientLight(AmbientColor),
light = new THREE.DirectionalLight(LightColor),
secondLight = new THREE.DirectionalLight(SecondLightColor), 
thirdLight = new THREE.DirectionalLight(ThirdLightColor),
fourthLight = new THREE.DirectionalLight(FourthLightColor),
fifthLight = new THREE.DirectionalLight(FifthLightColor), 
sixthLight = new THREE.DirectionalLight(SixthLightColor), 
geometry = new THREE.SphereGeometry(24, 200, 200),
material = new THREE.MeshPhysicalMaterial({
roughness: 0.1, // Шероховатость материала
metalness: 0.1, // Металичность материала
side: THREE.FrontSide,
color: GumColor, 
}),
sphere = new THREE.Mesh(geometry, material),
noise = new SimplexNoise();
ambient.intensity = 0.3; // Установите более низкую интенсивность для окружающего освещения
light.intensity = 0.4; // Интенсивность основного света
secondLight.intensity = 0.3; // Интенсивность света сверху
thirdLight.intensity = 0.3; // Интенсивность света снизу
fourthLight.intensity = 0.3; // Интенсивность света спереди
fifthLight.intensity = 0.3; // Интенсивность света слева
sixthLight.intensity = 0.3; // Интенсивность света снизу
var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
canvas.width = 1256; // Ширина холста
canvas.height = 1256; // Высота холста
var image = new Image();
image.crossOrigin = "anonymous"; 
image.onload = function () {
var textureWidth = 1256; // Ширина текстуры
var textureHeight = 1256; // Высота текстуры
context.drawImage(image, 0, 0, textureWidth, textureHeight);
material.map = new THREE.CanvasTexture(canvas);
material.needsUpdate = true;
animate();
};
image.src = "https://static.tildacdn.com/tild6638-6636-4330-b465-636636616332/Frame_6757777.jpg"; // Текстура поверх сфферы (заменить на своё)
context.fillRect(0, 0, canvas.width, canvas.height);
// --------
scene.autoUpdate = true;
scene.background = null;
renderer.setClearColor(0x000000, 0); // Цвет фона (0 - прозрачность)
renderer.setSize(vw, vh);
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 100;
camera.lookAt(scene.position);
sphere.position.x = 0;
sphere.position.y = 0;
sphere.position.z = 0;
sphere.castShadow = true;
sphere.receiveShadow = false;
light.position.set(0, 0, 10);
light.castShadow = true;
light.shadow.mapSize.width = 1024;
light.shadow.mapSize.height = 1024;
light.shadow.camera.near = 0.9;
light.shadow.camera.far = 500;
secondLight.position.set(0, 200, 50);
secondLight.castShadow = true;
secondLight.shadow.mapSize.width = 1024;
secondLight.shadow.mapSize.height = 1024;
secondLight.shadow.camera.near = 0.5;
secondLight.shadow.camera.far = 500;
thirdLight.position.set(0, -200, 50);
thirdLight.castShadow = true;
thirdLight.shadow.mapSize.width = 1024;
thirdLight.shadow.mapSize.height = 1024;
thirdLight.shadow.camera.near = 0.5;
thirdLight.shadow.camera.far = 500;
fourthLight.position.set(0, 0, 50);
fourthLight.castShadow = true;
fourthLight.shadow.mapSize.width = 1024;
fourthLight.shadow.mapSize.height = 1024;
fourthLight.shadow.camera.near = 0.5;
fourthLight.shadow.camera.far = 500;
fifthLight.position.set(-300, 0, 50);
fifthLight.castShadow = true;
fifthLight.shadow.mapSize.width = 1024;
fifthLight.shadow.mapSize.height = 1024;
fifthLight.shadow.camera.near = 0.5;
fifthLight.shadow.camera.far = 500;
sixthLight.position.set(300, 0, 50);
sixthLight.castShadow = true;
sixthLight.shadow.mapSize.width = 1024;
sixthLight.shadow.mapSize.height = 1024;
sixthLight.shadow.camera.near = 0.5;
sixthLight.shadow.camera.far = 500;
light.shadow.camera.left = -100;
light.shadow.camera.right = 100;
light.shadow.camera.top = 100;
light.shadow.camera.bottom = -100;
light.shadow.bias = -0.001;
secondLight.shadow.camera.left = -100;
secondLight.shadow.camera.right = 100;
secondLight.shadow.camera.top = 100;
secondLight.shadow.camera.bottom = -100;
secondLight.shadow.bias = -0.001;
thirdLight.shadow.camera.left = -100;
thirdLight.shadow.camera.right = 100;
thirdLight.shadow.camera.top = 100;
thirdLight.shadow.camera.bottom = -100;
thirdLight.shadow.bias = -0.001;
fourthLight.shadow.camera.left = -100;
fourthLight.shadow.camera.right = 100;
fourthLight.shadow.camera.top = 100;
fourthLight.shadow.camera.bottom = -100;
fourthLight.shadow.bias = -0.001;
fifthLight.shadow.camera.left = -100;
fifthLight.shadow.camera.right = 100;
fifthLight.shadow.camera.top = 100;
fifthLight.shadow.camera.bottom = -100;
fifthLight.shadow.bias = -0.001;
sixthLight.shadow.camera.left = -100;
sixthLight.shadow.camera.right = 100;
sixthLight.shadow.camera.top = 100;
sixthLight.shadow.camera.bottom = -100;
sixthLight.shadow.bias = -0.001;
// --------
scene.add(camera);
scene.add(sphere);
scene.add(ambient);
scene.add(light);
scene.add(secondLight);
scene.add(thirdLight);
scene.add(fourthLight);
scene.add(fifthLight);
scene.add(sixthLight);
// --------
document.getElementsByClassName(GumContainer)[0].appendChild(
renderer.domElement
);
var sgeom = sphere.geometry,
offset = sgeom.parameters.radius * 1,
f = { x: 0.00001, y: 0.00001, z: 0.00050, a: 2, frequency: 2 }; // a - амплитуда, frequency - частота искажения
var targetPosition = { x: 0, y: 0 };
var scale = 1; 
var color = new THREE.Color();
var colorOffset = 0;
function distort(v, t) {
v.normalize();
v.multiplyScalar(offset + noise.noise3D(v.x * f.frequency + t * f.x, v.y * f.frequency + t * f.y, v.z * f.frequency + t * f.z) * f.a);
}
this.update = function () {
var t = Date.now();
sgeom.vertices.forEach(function (v, i) {
distort(v, t); 
colorOffset = (i / sgeom.vertices.length) * Math.PI * 2;
color.setHSL(colorOffset, 1, 0.5);
sgeom.colors[i] = color;
});
sgeom.verticesNeedUpdate = true;
sgeom.normalsNeedUpdate = true;
sgeom.computeVertexNormals();
sgeom.computeFaceNormals();
sphere.scale.set(scale, scale, scale);
renderer.render(scene, camera);
};
this.resize = function () {
vw = window.innerWidth;
vh = window.innerHeight;
camera.aspect = vw / vh;
camera.updateProjectionMatrix();
renderer.setSize(vw, vh);
};
this.updateSpherePosition = function (clientX, clientY) {
if (window.innerWidth > 480) { // Проверяем разрешение окна
var rect = renderer.domElement.getBoundingClientRect();
targetPosition.x = ((clientX - rect.left) / rect.width) * 2 - 1;
targetPosition.y = -((clientY - rect.top) / rect.height) * 2 + 1;
}
};
this.animateSpherePosition = function () {
var currentX = sphere.position.x;
var currentY = sphere.position.y;
var targetX = targetPosition.x * 50;
var targetY = targetPosition.y * 50;
var easing = 0.01;
var dx = targetX - currentX;
var dy = targetY - currentY;
currentX += dx * easing;
currentY += dy * easing;
sphere.position.x = currentX;
sphere.position.y = currentY;
};
this.animateSphereScale = function () {
var scrollPosition = window.scrollY; 
var maxScale = 1; 
var minScale = 1; 
var scrollRange = 1500; 
var scrollFactor = (maxScale - minScale) / scrollRange; 
scale = minScale + (scrollPosition * scrollFactor);
scale = Math.max(minScale, Math.min(maxScale, scale));
};
// --------
this.camera = camera;
this.sphere = sphere;
this.light = light;
this.secondLight = secondLight;
this.thirdLight = thirdLight;
this.fourthLight = fourthLight;
this.fifthLight = fifthLight;
this.sixthLight = sixthLight;
this.renderer = renderer;
this.scene = scene;
}
GumGum.prototype.constructor = GumGum;
var gum = new GumGum();
function animate() {
requestAnimationFrame(animate);
gum.update();
gum.animateSpherePosition();
gum.animateSphereScale(); 
}
animate();
window.addEventListener("resize", function () {
gum.resize();
});
window.addEventListener("mousemove", function (event) {
gum.updateSpherePosition(event.clientX, event.clientY);
});
window.addEventListener("scroll", function () {
gum.animateSphereScale(); 
});
})();
function startAnimation() {
$(".sphere-fix").addClass('test');
};
</script>