Three.js画布与页面内容滚动同步问题求助

要实现画布内外滚动双向同步，核心需要解决两个问题：解除OrbitControls对滚轮事件的拦截，以及修复CSS导致的页面滚动限制。以下是具体实现步骤：

1. 修复CSS滚动限制 #

原CSS中body { overflow: hidden; }完全禁止了页面滚动，#container的固定高度也限制了内容展开，调整如下：

body {
  margin: 0;
  font-family: Arial, sans-serif;
  /* 移除overflow:hidden，恢复页面滚动能力 */
}
#container {
  position: relative;
  width: 100%;
  height: auto; /* 改为自适应高度，让内容撑开容器 */
  perspective: 1000px;
}
canvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999;
  width: 100vw;
  height: 100vh;
  pointer-events: auto; /* 确保画布能接收鼠标事件 */
}
.content {
  padding: 20px;
  margin-top: 100vh; /* 避免内容被fixed画布遮挡，可选 */
}

2. 调整OrbitControls滚轮行为 #

OrbitControls默认会拦截滚轮事件实现场景缩放，我们需要自定义逻辑：按住Ctrl键时滚轮控制场景缩放，普通滚轮触发页面滚动。修改JS代码：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x000000, 0);
scene.background = null;

// 修复原代码重复添加canvas的问题，只挂载一次
document.getElementById('canvas').appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableZoom = false; // 禁用默认滚轮缩放，手动处理

// 自定义滚轮事件
renderer.domElement.addEventListener('wheel', function(e) {
  if (e.ctrlKey) {
    // 按住Ctrl时，手动实现场景缩放
    var scaleFactor = 1 - e.deltaY * 0.001;
    camera.position.z = Math.max(0.1, Math.min(1000, camera.position.z * scaleFactor));
    controls.update();
    e.preventDefault(); // 阻止页面滚动
  }
  // 不按Ctrl时，不阻止默认行为，让浏览器处理页面滚动
}, { passive: false });

// 3D场景初始化
var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

// 动画循环
function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

// 可选：页面滚动时同步3D场景效果
window.addEventListener('scroll', function() {
  var scrollOffset = window.scrollY;
  // 示例：滚动时调整相机Z轴位置，实现场景随滚动变化
  camera.position.z = 5 + scrollOffset * 0.01;
  controls.update();
});

3. 修正HTML脚本顺序 #

原HTML中OrbitControls脚本位置错误，需移到<body>内部且在Three.js之后引入：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Scrolling Example</title>
</head>
<body>
  <div id="container">
    <div id="canvas"></div> <!-- 用div容器承载Three.js生成的canvas -->
  </div>
  <div class="content">
    <h1>Lorem Ipsum</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.</p>
    <!-- 添加更多长内容测试滚动 -->
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.</p>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
  <script>
    // 放入上述修改后的JS代码
  </script>
</body>
</html>

关键说明 #

• 移除body的overflow:hidden是页面能正常滚动的基础；
• 通过自定义滚轮事件，区分修饰键状态，实现“缩放”与“页面滚动”的功能分离；
• 可选的页面滚动监听，可让3D场景随页面滚动产生联动效果，强化“同步”体验。

内容的提问来源于stack exchange，提问作者Diced Mango