本文介绍一种轻量、高性能的方案：禁用 canvas 的鼠标事件，使其透明化，并通过监听页面滚动事件动态调整相机 y 轴位置，从而在视觉上实现 canvas 与页面内容的滚动联动。
本文介绍一种轻量、高性能的方案：禁用 canvas 的鼠标事件，使其透明化，并通过监听页面滚动事件动态调整相机 y 轴位置，从而在视觉上实现 canvas 与页面内容的滚动联动。
在基于 Three.js 构建交互式 3D 页面时，一个常见痛点是：当 <canvas></canvas> 元素覆盖在页面内容之上（如使用 position: fixed），其默认会捕获鼠标滚轮事件，导致 OrbitControls 触发缩放而非页面滚动——这破坏了用户对“滚动即翻页”的自然预期。
核心思路并非强行劫持 OrbitControls 的滚轮逻辑，而是解耦交互与视觉表现：
✅ 将 Canvas 设为完全透明且不可点击（pointer-events: none）；
✅ 让底层 HTML 内容正常响应滚动；
✅ 同步监听 window.scrollY，将滚动偏移量映射为相机沿 Y 轴（或 Z 轴）的位置变化，营造“随页面滚动而平移/缩放场景”的视差效果。
✅ 关键实现步骤
1. 渲染器与场景配置（确保透明性）
const renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x000000, 0); // 完全透明背景
scene.background = null;
document.body.appendChild(renderer.domElement);
2. CSS 层级与交互控制
canvas {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 1; /* 低于内容层（如 .content）以允许点击穿透 */
pointer-events: none; /* 关键：让滚轮/点击透传至下方元素 */
}
.content {
position: relative;
z-index: 2; /* 确保文字等内容可被选中和滚动 */
padding: 20px;
}
⚠️ 注意：避免将 Canvas 放入
overflow: hidden或position: absolute的父容器中，否则可能截断滚动事件传播。
3. 滚动驱动相机位移（Y 轴平移示例）
let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 5); // 初始 Z 深度
function onScroll() {
const scrollY = window.scrollY;
// 将滚动距离映射为相机 Y 坐标（向上滚动 → 相机上移 → 场景向下移动，产生跟随感）
camera.position.y = -scrollY * 0.02; // 可调灵敏度系数
// 或改为 Z 轴缩放模拟景深：camera.position.z = 5 + scrollY * 0.01;
}
window.addEventListener('scroll', onScroll);
4. 动画循环中保持渲染
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
? 为什么比“拦截 OrbitControls 滚轮”更优？
- 无冲突：不修改 OrbitControls 源码，保留旋转、平移等全部交互能力；
-
高性能：仅监听
scroll事件并更新一个向量分量，无重绘开销； - 可扩展：可轻松叠加视差滚动（不同图层不同位移系数）、淡入/缩放动画等；
- 无障碍友好：页面仍支持键盘导航、屏幕阅读器滚动等原生行为。
? 最佳实践提示
- 使用
throttle（节流）优化scroll事件处理（尤其在移动端）：const throttledScroll = throttle(onScroll, 16); // ~60fps window.addEventListener('scroll', throttledScroll); - 若需在滚动时暂停 OrbitControls 的缩放，可在
onScroll中临时controls.enabled = false，并在scrollend（或setTimeout）后恢复； - 对于长页面，建议监听
resize并重置renderer.setSize()，避免 Canvas 拉伸失真。
通过该方案，你无需牺牲 Three.js 的交互能力，即可让 3D 场景成为页面自然滚动体验的一部分——既专业，又丝滑。
