Проблема с динамическим изменением значения параметра в js ⇐ Html

[Anonymous]

Я хочу: когда мышь попадает в тело веб-сайта, курсор становится видимым; и когда он находится за пределами веб-страницы, он не должен быть виден.
Я пытаюсь обновить значения, передаваемые в neonInstance. Я пробовал изменить значение, используя разные подходы; он меняет значение, но neonInstance не принимает заданные значения в качестве входных данных.
Код работает нормально, но в середине страницы остается маленькая точка, которая является начальная точка курсора. Я не хочу, чтобы оно было видно, когда курсора нет на странице. Когда я меняю значение параметраshaderPoints на 0, начальная точка курсора исчезает; когда установлено значение 10, курсор становится видимым (это когда я меняю значения вручную).
Я хочу, чтобы, когда человек наводит курсор на страницу, значениеshaderPoints получает значение 10, и как только курсор покидает страницу, значение устанавливается в 0. Таким образом, курсор появляется только тогда, когда человек наводит курсор на страницу. Я пробовал несколько подходов для достижения этой цели, но безуспешно.
Если бы кто-нибудь мог подсказать мне, что я делаю неправильно и как я могу этого добиться, или предложить другой подход, я мог бы ему следовать. , буду признателен.

Код: Выделить всё

body,
html {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
touch-action: none;
}

body {
color: #ffffff;
font-family: 'Montserrat', sans-serif;
text-align: center;
text-shadow: 0 0 5px #ffffff, 0 0 20px #000, 0 0 30px #000;
}

h1 {
--fontSize: 60px;
--lineHeight: 80px;
width: auto;
height: calc(2 * var(--lineHeight));
line-height: var(--lineHeight);
margin: calc(50vh - var(--lineHeight)) auto 0;
font-size: var(--fontSize);
text-transform: uppercase;
}

a {
margin-top: 10px;
display: inline-block;
text-decoration: none;
color: #fff;
}

canvas {
display: block;
position: fixed;
z-index: -1;
top: 0;
}

.as-console-wrapper { left: auto!important; bottom: 0; width: 60%; max-height: 100px!important; }

Код: Выделить всё

Your Neon Text
[url=#]Your Link[/url]



import {
neonCursor
} from "https://unpkg.com/threejs-toys@0.0.8/build/threejs-toys.module.cdn.min.js";

// Ensure that neonCursor is properly initialized
let neonInstance = neonCursor({
el: document.body, // Target the entire body
shaderPoints: 10, // Initial shaderPoints when cursor is outside
curvePoints: 40,
curveLerp: 0.7,
radius1: 3,
radius2: 19,
velocityTreshold: 1,
sleepRadiusX: 0,
sleepRadiusY: 0,
sleepTimeCoefX: 0.00,
sleepTimeCoefY: 0.00
});

console.log(neonInstance); // Debugging: check if neonInstance is initialized properly

document.body.addEventListener("mouseenter", function() {
console.log("mouseenter triggered");

if (neonInstance) {
var before = neonInstance.shaderPoints;
console.log("Before:", before);
// Update the neonInstance properties
neonInstance.shaderPoints = 10;
neonInstance.curvePoints = 40;
neonInstance.curveLerp = 0.7;
neonInstance.config.radius1 = 3;
neonInstance.config.radius2 = 19;
neonInstance.velocityTreshold = 1;
neonInstance.sleepRadiusX = 0;
neonInstance.sleepRadiusY = 0;
neonInstance.sleepTimeCoefX = 0.00;
neonInstance.sleepTimeCoefY = 0.00;

var after = neonInstance.shaderPoints;
console.log("After:", after);
} else {
console.log("neonInstance is not defined");
}
});

document.body.addEventListener("mouseleave", function() {
console.log("mouseleave triggered");
});

Подробнее здесь: https://stackoverflow.com/questions/793 ... eter-in-js