Three.js-toys neonCursor 无法动态更新参数实现鼠标进出页面时光标显隐

嘿，我来帮你搞定这个问题～ 你遇到的核心卡点是：直接修改neonInstance的属性（比如shaderPoints）不会生效，因为这些参数是初始化时用来创建Three.js粒子系统的，之后修改属性不会自动同步到场景里的渲染对象上。

下面给你两个实用的解决方案，选一个适合你的就行：

方案一：直接控制光标粒子的可见性（最简单高效） #

这个方法不用纠结修改参数，直接操作Three.js的粒子网格对象的可见性，逻辑清晰又省心：

1. 初始化时保持shaderPoints:10（正常显示的粒子数量），然后获取光标对应的粒子网格；
2. 初始状态下隐藏粒子，再通过mouseenter/mouseleave事件切换可见性。

修改后的完整代码如下：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<h1>Your Neon Text</h1>
<a href="#">Your Link</a>
<canvas></canvas>

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

  let neonInstance = neonCursor({
    el: document.body,
    shaderPoints: 10,
    curvePoints: 40,
    curveLerp: 0.7,
    radius1: 3,
    radius2: 19,
    velocityTreshold: 1,
    sleepRadiusX: 0,
    sleepRadiusY: 0,
    sleepTimeCoefX: 0.00,
    sleepTimeCoefY: 0.00
  });

  // 获取光标粒子的网格对象（两种方式，选一个即可）
  // 方式1：直接取实例的points属性（如果存在的话）
  let cursorMesh = neonInstance.points;
  // 方式2：从场景中查找Points类型的对象（更稳妥，不怕属性名变化）
  // let cursorMesh = neonInstance.scene.children.find(child => child.type === 'Points');

  // 初始隐藏光标（页面加载时鼠标可能不在页面上）
  cursorMesh.visible = false;

  // 鼠标进入页面时显示光标
  document.body.addEventListener("mouseenter", function() {
    console.log("mouseenter triggered");
    cursorMesh.visible = true;
  });

  // 鼠标离开页面时隐藏光标
  document.body.addEventListener("mouseleave", function() {
    console.log("mouseleave triggered");
    cursorMesh.visible = false;
  });
</script>

方案二：动态修改shaderPoints并触发更新（适合需要调整粒子数量的场景） #

如果你一定要通过修改shaderPoints来实现显隐，那需要重新生成粒子的几何体（因为shaderPoints控制的是粒子数量，初始化后修改不会自动更新几何体），步骤如下：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<h1>Your Neon Text</h1>
<a href="#">Your Link</a>
<canvas></canvas>

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

  let neonInstance = neonCursor({
    el: document.body,
    shaderPoints: 0, // 初始隐藏
    curvePoints: 40,
    curveLerp: 0.7,
    radius1: 3,
    radius2: 19,
    velocityTreshold: 1,
    sleepRadiusX: 0,
    sleepRadiusY: 0,
    sleepTimeCoefX: 0.00,
    sleepTimeCoefY: 0.00
  });

  // 定义更新粒子数量的函数
  function updateCursorParticleCount(count) {
    if (!neonInstance) return;
    // 更新实例的参数
    neonInstance.shaderPoints = count;
    neonInstance.config.shaderPoints = count;
    
    // 重新生成粒子几何体（核心步骤，否则修改不会生效）
    const positions = new Float32Array(count * 3);
    neonInstance.points.geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
  }

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

  document.body.addEventListener("mouseleave", function() {
    console.log("mouseleave triggered");
    updateCursorParticleCount(0);
  });
</script>

为什么之前的方法没用？ #

你之前直接修改neonInstance.shaderPoints或者neonInstance.config里的值，但这些参数只是初始化时的配置，threejs-toys的neonCursor并没有监听这些属性的变化，所以修改后不会自动更新Three.js的场景对象。必须直接操作Three.js的底层对象（比如粒子网格的可见性，或者重新生成几何体）才能让改动生效。

备注：内容来源于stack exchange，提问作者IceyXsm