如何在 Three.js 鞋子定制器中实现 Canvas 与自定义面板并排布局-js教程-PHP中文网

如何在 Three.js 鞋子定制器中实现 Canvas 与自定义面板并排布局

本文详解如何通过 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 方案（已验证兼容性与可维护性）：

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 的实际尺寸：

dmap-jsapi-skill

DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。

下载

// 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 渲染	画面清晰无拉伸，旋转/缩放操作流畅，视角不偏移
自定义面板	所有颜色块、下拉框、按钮垂直排列，支持内部滚动