通过滚轮控制Three.js网格细分聚合分离效果的实现咨询

需要移除的代码部分 #

原示例通过时间自动循环切换效果，需删除自动动画逻辑：

1. 找到animate函数中基于时间计算factor的代码：

   time = performance.now() * 0.001;
   factor = Math.sin( time ) * 0.5 + 0.5;
   

   直接删除这两行。
2. 保留animate函数的核心渲染循环，无需自动更新factor：

   function animate() {
     requestAnimationFrame( animate );
     render();
   }
   

需要添加的代码部分 #

1. 在全局作用域初始化控制参数factor，默认设为1（对应文本聚合状态）：

   let factor = 1;
   

2. 添加鼠标滚轮事件监听，根据滚动方向调整效果：

   // 监听滚轮事件
   window.addEventListener('wheel', (event) => {
     // 控制参数变化步长，可根据灵敏度调整
     const step = 0.05;
     
     // 滚轮向上滚动 → 聚合文本
     if (event.deltaY < 0) {
       factor = Math.min(factor + step, 1); // 限制最大值为1
     } 
     // 滚轮向下滚动 → 分离网格
     else {
       factor = Math.max(factor - step, 0); // 限制最小值为0
     }
   
     // 更新修改器和材质参数，同步效果
     modifier.separateFaces = (factor < 0.5);
     modifier.modify(mesh);
     material.uniforms.displacementScale.value = 10 * factor;
   });
   

可选调整 #

• 若希望页面默认显示分离状态，把factor初始值改为0即可。
• 调整step值可以改变滚动控制的灵敏度，值越大效果变化越快。

内容的提问来源于stack exchange，提问作者Ian Wang