<!--WebGL Bubbles-->
<!--https://mt-webdesign.ru/bubble-gl-->
<div class="GumWebGL"></div>

<!--Rainbow-->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<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);
if (vw <= 375) {
scale = 0.3;
} else {
scale = 1;
}
sphere.scale.set(scale, scale, scale);
};
this.animateSphereScale = function () {
var maxScale = 1;
var minScale = 1;
scale = Math.max(minScale, Math.min(maxScale, scale));
};
}
GumGum.prototype.constructor = GumGum;
var gum = new GumGum();
function animate() {
requestAnimationFrame(animate);
gum.update();
gum.animateSphereScale();
gum.resize();
}
animate();
window.addEventListener("load", function () {
gum.resize();
});
window.addEventListener("resize", function () {
gum.resize();
});
window.addEventListener("mousemove", function (event) {
gum.updateSpherePosition(event.clientX, event.clientY);
});
})();
</script>

<!--Black Hole-->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<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 = 0x000000, // Цвет сферы
AmbientColor = 0xF3D8D1, // Окружающее освещение (оттенок)
LightColor = 0xFEC1B1, // Общее освещение
SecondLightColor = 0xC6ACF9, // Цвет линейного освещения (сверху вниз)
ThirdLightColor = 0xFEC1B1, // Цвет линейного освещения (снизу вверх)
FourthLightColor = 0xFEC1B1, // Цвет линейного освещения (спереди)
FifthLightColor = 0xC6ACF9, // Цвет линейного освещения (слева)
SixthLightColor = 0x95B2FF, // Цвет линейного освещения (справа)
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.5, // Шероховатость материала
metalness: 0.5, // Металичность материала
side: THREE.FrontSide,
color: GumColor, 
}),
sphere = new THREE.Mesh(geometry, material),
noise = new SimplexNoise();
ambient.intensity = 0.1; // Установите более низкую интенсивность для окружающего освещения
light.intensity = 0.1; // Интенсивность основного света
secondLight.intensity = 0.1; // Интенсивность света сверху
thirdLight.intensity = 5; // Интенсивность света снизу
fourthLight.intensity = 5; // Интенсивность света спереди
fifthLight.intensity = 5; // Интенсивность света слева
sixthLight.intensity = 5; // Интенсивность света снизу
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 = ""; // Текстура поверх сфферы (заменить на своё)
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(20, 50, 100);
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(50, -50, -40);
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, 50, -120);
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, -20, -40);
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(30, -30, -80);
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(-30, 0, -80);
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: 0.5, frequency: 1 }; // 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);
if (vw <= 375) {
scale = 0.3;
} else {
scale = 1;
}
sphere.scale.set(scale, scale, scale);
};
this.animateSphereScale = function () {
var maxScale = 1;
var minScale = 1;
scale = Math.max(minScale, Math.min(maxScale, scale));
};
}
GumGum.prototype.constructor = GumGum;
var gum = new GumGum();
function animate() {
requestAnimationFrame(animate);
gum.update();
gum.animateSphereScale();
gum.resize();
}
animate();
window.addEventListener("load", function () {
gum.resize();
});
window.addEventListener("resize", function () {
gum.resize();
});
window.addEventListener("mousemove", function (event) {
gum.updateSpherePosition(event.clientX, event.clientY);
});
})();
</script>

<!--Sunrise Glow-->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<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.7, // Шероховатость материала
metalness: 0.2, // Металичность материала
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/tild6437-3334-4362-b532-393332306265/Frame_1315572.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: 0.5 }; // 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);
if (vw <= 375) {
scale = 0.3;
} else {
scale = 1;
}
sphere.scale.set(scale, scale, scale);
};
this.animateSphereScale = function () {
var maxScale = 1;
var minScale = 1;
scale = Math.max(minScale, Math.min(maxScale, scale));
};
}
GumGum.prototype.constructor = GumGum;
var gum = new GumGum();
function animate() {
requestAnimationFrame(animate);
gum.update();
gum.animateSphereScale();
gum.resize();
}
animate();
window.addEventListener("load", function () {
gum.resize();
});
window.addEventListener("resize", function () {
gum.resize();
});
window.addEventListener("mousemove", function (event) {
gum.updateSpherePosition(event.clientX, event.clientY);
});
})();
</script>