如何让 Three.js 画布与自定义面板并排显示（左右布局）-js教程-PHP中文网

如何让 Three.js 画布与自定义面板并排显示（左右布局）

本文详解如何通过 css flexbox 实现 three.js 渲染画布与鞋履定制面板的水平并排布局，解决常见堆叠错位问题，并确保响应式适配与渲染尺寸精准控制。

本文详解如何通过 css flexbox 实现 three.js 渲染画布与鞋履定制面板的水平并排布局，解决常见堆叠错位问题，并确保响应式适配与渲染尺寸精准控制。

在构建鞋履三维定制器（如 SWEAR 鞋款可视化工具）时，一个典型挑战是：Three.js 的 <canvas></canvas> 渲染容器（.canvas-container）与右侧功能面板（.customizer-container）无法水平并排，反而垂直堆叠或挤压变形。根本原因在于初始 CSS 中 .wrapper 虽设为 display: flex，但子元素未明确宽度分配，且 body 的 flex-direction: column 干扰了整体布局流。

以下是经过验证的专业解决方案，兼顾结构语义、视觉平衡与运行稳定性：

✅ 正确的 HTML 结构（精简关键部分）

  <div class="wrapper">
    <div class="canvas-container"></div>
    <div class="customizer-container">
      <!-- 所有颜色选择器、尺寸下拉框、按钮等 -->
      <h1 id="name">Customizer</h1>
      <div class="color-palette-container">
        <p>Colors</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8483" title="dmap-jsapi-skill"><img
														src="https://img.php.cn/upload/skill/000/000/081/179206214475645.jpg" alt="dmap-jsapi-skill" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill8483" title="dmap-jsapi-skill" class="overflowclass">dmap-jsapi-skill</a>
													<p class="overflowclass">DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill8483" title="dmap-jsapi-skill" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
        <!-- ... -->
      </div>
      <div class="size-container">
        <label for="size">Size</label>
        <select id="size">...</select>
</div>
      <button id="orderButton">Order now</button>
    </div>
  </div>

✅ 关键 CSS 布局规则（核心修复点）

/* 重置 body：移除 column 布局，启用全高视口对齐 */
body {
  margin: 0;
  font-family: 'Helvetica', sans-serif;
  text-transform: uppercase;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 必须设置，否则 flex 对齐无效 */
  overflow: hidden; /* 防止 canvas 溢出触发滚动条 */
}

/* wrapper 作为 flex 容器，子项水平排列 */
.wrapper {
  display: flex;
  width: 100%;
  height: 100vh;
  max-width: 1600px; /* 可选：限制总宽度，提升大屏体验 */
  margin: 0 auto;
}

/* 两个子容器均分宽度，等高铺满视口 */
.canvas-container,
.customizer-container {
  width: 50%;
  height: 100%;
  position: relative;
}

/* 定制面板样式（保持原有逻辑） */
.customizer-container {
  background-color: #000;
  color: white;
  padding: 24px;
  box-sizing: border-box;
  overflow-y: auto; /* 内容超长时可滚动，不撑高容器 */
}

/* Canvas 容器需确保子 canvas 自适应填充 */
.canvas-container {
  background-color: #1a1a1a;
}
.canvas-container canvas {
  display: block;
  width: 100%;
  height: 100%;
}

✅ JavaScript 渲染适配（避免尺寸错乱）

// ✅ 关键：canvas 容器尺寸 = 其父元素实际宽高（非 window.innerWidth）
const canvasContainer = document.querySelector('.canvas-container');
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio); // 提升高清屏清晰度

function resizeRenderer() {
  const rect = canvasContainer.getBoundingClientRect();
  renderer.setSize(rect.width, rect.height);
  camera.aspect = rect.width / rect.height;
  camera.updateProjectionMatrix();
}

// 初始化 & 监听窗口/容器变化
resizeRenderer();
window.addEventListener('resize', resizeRenderer);

// 将 canvas 插入容器（注意：使用 appendChild，非 innerHTML）
canvasContainer.appendChild(renderer.domElement);

⚠️ 注意事项与最佳实践

不要用 window.innerWidth 设置 canvas 尺寸：这会导致画布始终占满整个窗口，而非仅占左半侧。务必基于 .canvas-container 的 getBoundingClientRect() 动态计算。
禁用 body { text-align: center }：该属性对 flex 布局无意义，且可能干扰内联元素；居中应由 justify-content/align-items 控制。
为 .customizer-container 添加 overflow-y: auto：当颜色选项过多时，防止内容溢出破坏布局。
添加 max-width 到 .wrapper：避免超宽屏幕下定制面板过宽影响可读性（例如 max-width: 1600px）。
Three.js 性能提示：启用 antialias: true 和 setPixelRatio 可显著改善边缘锯齿，尤其在 Retina 屏上。