Проблема с динамическим изменением значения параметра в 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;
}


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");
});




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

я хочу, чтобы, когда мышь входит в тело веб-сайта, курсор становился видимым, а когда курсор выводится за пределы веб-страницы, он не должен быть виден

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