如何实现Three.js Canvas容器与鞋类定制器容器并排布局？

问题根源分析 #

当前布局异常的核心原因有两个：

• body设置了垂直flex布局（flex-direction: column），限制了子元素的排列方向，导致wrapper内的容器无法水平并排
• Three.js Canvas被直接设置为窗口宽高，撑满了父容器空间，触发flex容器的换行逻辑，最终两个容器堆叠显示

具体修复方案 #

1. 调整CSS布局规则

修改body和wrapper的flex配置，确保水平并排的基础逻辑：

/* 重置body布局，避免垂直方向限制 */
body {
  margin: 0;
  padding: 0;
  display: flex;
  height: 100vh;
  overflow: hidden; /* 防止页面滚动 */
}

.wrapper {
  display: flex;
  width: 100%;
  height: 100vh;
  flex-wrap: nowrap; /* 强制子容器不换行，关键设置 */
}

.canvas-container {
  flex: 1; /* 占据剩余所有可用空间 */
  height: 100vh;
  overflow: hidden; /* 防止Canvas溢出容器 */
}

.customizer-container {
  width: 500px; /* 固定宽度 */
  height: 100vh;
  padding: 20px;
  box-sizing: border-box; /* 内边距不占用固定宽度 */
  background-color: #f8f8f8; /* 可选，方便区分容器 */
}

2. 修正Three.js Canvas尺寸绑定

将Canvas尺寸与canvas-container的实际大小绑定，而非直接使用窗口宽高，同时添加窗口 resize 适配：

const canvasContainer = document.querySelector('.canvas-container');
const renderer = new THREE.WebGLRenderer({ antialias: true });

// 初始化并更新Canvas尺寸
function resizeCanvas() {
  const { clientWidth, clientHeight } = canvasContainer;
  renderer.setSize(clientWidth, clientHeight);
  // 若使用相机，需同步更新相机比例
  // camera.aspect = clientWidth / clientHeight;
  // camera.updateProjectionMatrix();
}

// 初始渲染设置
resizeCanvas();
canvasContainer.appendChild(renderer.domElement);

// 监听窗口尺寸变化
window.addEventListener('resize', resizeCanvas);

3. 确认HTML结构正确性

确保容器嵌套无错误，示例结构如下：

<body>
  <img src="logo.png" alt="品牌logo" class="logo">
  <div class="wrapper">
    <div class="canvas-container"></div>
    <div class="customizer-container">
      <div class="color-selector">颜色选择区</div>
      <div class="fabric-selector">面料选择区</div>
      <select class="size-select">
        <option value="38">38码</option>
        <option value="39">39码</option>
      </select>
      <button class="order-btn">确认下单</button>
    </div>
  </div>
</body>

关键注意事项 #

• wrapper的flex-wrap: nowrap必须设置，防止子容器因空间不足换行
• Canvas尺寸必须绑定父容器大小，避免撑破布局
• body设置height: 100vh和overflow: hidden，消除不必要的滚动条

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