Probleme beim dynamischen Ändern des Parameterwerts in js ⇐ HTML

[Guest]

Ich versuche, die an die neonInstance übergebenen Werte zu aktualisieren. Ich habe versucht, den Wert mit verschiedenen Ansätzen zu ändern. Der Wert wird zwar geändert, aber die neonInstance übernimmt die angegebenen Werte nicht als Eingabe.Der Code funktioniert einwandfrei, aber in der Mitte der Seite verbleibt ein kleiner Punkt, der den Cursor-Startpunkt darstellt. Ich möchte nicht, dass er sichtbar ist, wenn sich der Cursor nicht auf der Seite befindet, also wenn ich den Wert ändere des Parameters „shaderPoints“ auf 0 Der Cursor-Startpunkt verschwindet und wenn der Wert auf 10 gesetzt ist, wird der Cursor sichtbar (das ist, wenn ich die Werte manuell ändere). Ich möchte, dass, wenn eine Person den Cursor über die Seite bewegt, der Wert der ShaderPoints auf 10 gesetzt wird und sobald der Cursor die Seite verlässt, wird der Wert auf 0 gesetzt, also nur, wenn die Person auf die Seite kommt, nur dann wird der Cursor angezeigt. Ich habe ein paar Ansätze ausprobiert, um einen Weg zu finden, dies zu tun, aber auf Kein Erfolg, wenn mich jemand weiterleiten könnte Was ich falsch mache und wie ich das erreichen kann, auch wenn es einen anderen Ansatz gibt, dem ich folgen kann.

Code: Select all

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]

Was ich möchte ist, dass der Cursor sichtbar wird, wenn die Maus in den Hauptteil der Website eintritt, und wenn der Cursor die Webseite verlässt, sollte er nicht sichtbar sein