本文详解如何通过 CSS Flex 布局将 Three.js 渲染画布（.canvas-container）与鞋子配置面板（.customizer-container）水平并排显示，解决常见堆叠错位问题，并确保响应式适配与渲染尺寸准确。
本文详解如何通过 css flex 布局将 three.js 渲染画布（`.canvas-container`）与鞋子配置面板（`.customizer-container`）水平并排显示，解决常见堆叠错位问题，并确保响应式适配与渲染尺寸准确。
在开发鞋子定制器这类交互式 3D 应用时，一个典型痛点是：Three.js 的 <canvas></canvas> 元素无法与右侧控制面板正确并排，反而垂直堆叠或被压缩——这通常源于容器未启用行内弹性布局、尺寸未显式约束，或 renderer.setSize() 未适配父容器宽度。
✅ 正确的布局结构与 CSS 关键点
核心在于 .wrapper 必须启用 display: flex，且两个子容器需明确分配水平空间。原代码中 .canvas-container 缺少固定宽度，导致其默认行为受 flex: 1 影响但未配合父容器高度策略，而 .customizer-container 虽设 width: 500px，却未与 canvas 共享等宽逻辑，破坏了并排前提。
推荐采用以下 CSS 方案（已验证兼容性与可维护性）：
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
body {
margin: 0;
font-family: 'Helvetica', sans-serif;
text-transform: uppercase;
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* 全屏高度，避免 body 内容塌陷 */
overflow: hidden; /* 防止双滚动条 */
}
.wrapper {
display: flex;
width: 100%;
height: 100vh;
max-width: 1600px; /* 可选：限制总宽度，提升大屏体验 */
gap: 0; /* 移除间隙，确保严丝合缝 */
}
.canvas-container,
.customizer-container {
width: 50%; /* 等分宽度，保证左右严格对半 */
height: 100%; /* 继承 wrapper 高度，避免内容溢出 */
position: relative;
}
.customizer-container {
background-color: #000;
color: white;
display: flex;
flex-direction: column;
justify-content: flex-start; /* 从顶部开始排列，避免居中挤压 */
align-items: flex-start;
padding: 24px;
overflow-y: auto; /* 允许内部滚动，防止内容被截断 */
}
/* 优化内部控件间距 */
.color-palette-container,
.size-container {
margin-bottom: 24px;
}
.size-container label {
display: block;
margin-bottom: 8px;
}
#orderButton {
margin-top: auto; /* 推到底部 */
padding: 12px 24px;
font-size: 1rem;
}✅ JavaScript 渲染适配：按容器尺寸初始化 Canvas
Three.js 的 renderer.setSize() 不应直接使用 window.innerWidth（会导致 canvas 拉伸覆盖整个窗口，而非仅占左半区）。应改为读取 .canvas-container 的实际尺寸：
// main.js 中修改渲染初始化部分
const canvasContainer = document.querySelector('.canvas-container');
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
// ✅ 关键：按容器尺寸设置 canvas 大小
function updateRendererSize() {
const rect = canvasContainer.getBoundingClientRect();
renderer.setSize(rect.width, rect.height);
camera.aspect = rect.width / rect.height;
camera.updateProjectionMatrix();
}
// 初始化 + 响应式监听
updateRendererSize();
window.addEventListener('resize', updateRendererSize);
// 将 canvas 插入容器
canvasContainer.appendChild(renderer.domElement);同时，确保 PerspectiveCamera 构造后立即调用 updateProjectionMatrix()，并在 resize 回调中同步更新。
⚠️ 注意事项与常见陷阱
-
避免
text-align: center在 body 上：它会干扰 flex 子项的对齐逻辑，已移至.customizer-container内部局部控制； -
禁用
overflow: hidden在.wrapper：否则可能隐藏右侧滚动条或 canvas 边缘； -
OrbitControls目标 DOM 必须是.canvas-container内的 canvas 元素，而非容器本身； - 若使用
CSS 3D transforms或z-index，需确认.canvas-container的z-index高于其他层（默认为auto，通常无需调整）； - 开发阶段建议临时添加
border: 1px solid red到两个容器，直观验证布局是否真正并排。
✅ 最终效果验证要点
| 检查项 | 合格标准 |
|---|---|
| 布局方向 | 左侧 canvas 占 50% 宽度，右侧 customizer 占另 50%，无换行 |
| 高度一致性 | 两者均铺满视口高度（100vh），无滚动或空白间隙 |
| Canvas 渲染 | 画面清晰无拉伸，旋转/缩放操作流畅，视角不偏移 |
| 自定义面板 | 所有颜色块、下拉框、按钮垂直排列，支持内部滚动 |
通过以上结构化调整，你将获得一个专业级、响应式、易扩展的鞋类 3D 定制界面——Canvas 专注可视化，Customizer 专注交互控制，二者真正协同工作，而非相互遮挡。
