Three.js中Canvas与鞋子定制Div无法并排布局的问题求助

问题核心 #

当前代码存在两个关键问题导致布局失败：

• 定制容器使用position: absolute脱离了flex布局流，Canvas容器会占满整个宽度，与定制面板重叠
• Three.js渲染器直接以window.innerWidth设置尺寸，未考虑定制面板的宽度，导致3D画布超出容器且缩放时变形

修改后的代码 #

HTML结构（无需改动）

<div class="wrapper">
    <div class="canvas-container"></div>
    <div class="customizer-container">
        <!-- 鞋子定制功能代码 -->
    </div>
</div>

CSS调整

body {
  margin: 0;
  text-align: center;
  font-family: 'Helvetica', sans-serif;
  text-transform: uppercase;
  height: 100vh;
}

.wrapper {
  display: flex;
  width: 100%;
  height: 100vh; /* 让容器占满整个视口高度 */
}

.canvas-container {
  flex: 1; /* 占据定制面板之外的所有剩余宽度 */
  height: 100vh;
  overflow: hidden; /* 防止Canvas溢出容器 */
}

.customizer-container {
  /* 移除绝对定位，加入flex布局流 */
  width: 500px; 
  height: 100vh;
  background-color: black;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

JavaScript适配

const renderer = new THREE.WebGLRenderer();
const canvasContainer = document.querySelector('.canvas-container');

// 动态更新渲染器尺寸（匹配容器实际大小）
function updateRendererSize() {
  const { clientWidth, clientHeight } = canvasContainer;
  renderer.setSize(clientWidth, clientHeight);
  // 若使用透视相机，需同步更新宽高比与投影矩阵，避免3D对象变形
  // camera.aspect = clientWidth / clientHeight;
  // camera.updateProjectionMatrix();
}

// 初始化渲染器尺寸
updateRendererSize();
canvasContainer.appendChild(renderer.domElement);

// 监听窗口缩放，实时调整渲染器尺寸
window.addEventListener('resize', updateRendererSize);

关键修改说明 #

1. 布局流修复：移除定制容器的绝对定位，让它和Canvas容器共同参与flex布局，wrapper设置height:100vh确保两个容器铺满视口高度
2. Canvas尺寸适配：不再依赖窗口宽度，而是以Canvas容器的实际宽高设置渲染器尺寸，同时添加窗口 resize 监听，保证布局响应式
3. 3D对象防变形：如果使用透视相机，必须同步更新相机的宽高比和投影矩阵，避免窗口缩放时3D模型出现拉伸压缩

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