如何实现Three.js模型的DOM分层显示与区块背景设置（React项目）

核心思路 #

默认的<Scroll html>会把所有DOM内容渲染在ThreeJS画布上层，要实现特定section背景在模型后、文字在前，需将DOM拆分为两个独立层级：

• 背景层：放在ThreeJS画布下层，仅包含目标section的背景图
• 内容层：保留在画布上层，包含所有section的文字内容及其他需在模型前的元素

具体实现步骤 #

1. 拆分DOM结构 #

把原<Scroll html>中的内容拆分：

• 单独提取目标section的背景图，放在Canvas之外的容器中，设置为绝对定位铺满对应区块
• 所有文字内容保留在<Scroll html>内，确保始终处于模型前方

2. 控制层级与定位 #

• 给ThreeJS画布容器设置position: relative; z-index: 1
• 背景层容器设置position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0，通过滚动监听同步背景图与目标section的位置
• 目标section的文字内容设置position: relative; z-index: 2，确保在模型和背景图之上

3. 关键代码片段 #

// 背景层容器，放在Canvas之外
<div style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', zIndex: 0 }}>
  {/* 目标section的背景图，通过滚动控制位置 */}
  <div 
    id="target-bg"
    style={{ 
      position: 'absolute', 
      left: 0, 
      width: '100%',
      backgroundImage: 'url(your-bg-image.jpg)',
      backgroundSize: 'cover'
    }}
  />
</div>

<Canvas style={{ position: 'relative', zIndex: 1 }}>
  {/* 你的3D模型内容 */}
  <Scroll html>
    {/* 目标section，文字层级高于画布 */}
    <section id="target-section" style={{ position: 'relative', zIndex: 2 }}>
      <h2>目标区块标题</h2>
      <p>这部分文字会显示在模型前方</p>
    </section>
    {/* 其他普通section */}
    <section>
      <h2>普通区块标题</h2>
      <p>同样显示在模型前方</p>
    </section>
  </Scroll>
</Canvas>

4. 滚动同步处理 #

通过原生滚动监听，实时调整背景图的位置与尺寸，匹配目标section的滚动状态：

useEffect(() => {
  const syncBackground = () => {
    const targetSection = document.getElementById('target-section');
    const targetBg = document.getElementById('target-bg');
    if (targetSection && targetBg) {
      const rect = targetSection.getBoundingClientRect();
      targetBg.style.top = `${rect.top + window.scrollY}px`;
      targetBg.style.height = `${rect.height}px`;
    }
  };

  window.addEventListener('scroll', syncBackground);
  return () => window.removeEventListener('scroll', syncBackground);
}, []);

注意事项 #

• 严格控制各层级z-index：背景层 < 画布 < 文字内容
• 背景图需设置backgroundSize: cover/contain保证铺满区块
• 无需修改<Scroll>组件核心逻辑，仅通过DOM层级拆分即可实现需求

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