如何对齐含ThreeJS场景的VueJS组件？适配侧边栏过渡

核心思路 #

通过CSS变量控制侧边栏宽度，配合transition实现平滑过渡效果；同时监听侧边栏状态变化，同步更新Three.js场景的渲染尺寸与相机参数，确保场景自适应布局变化。

具体实现步骤 #

1. 布局结构与CSS配置 #

采用Flex布局组织三个组件，用--plan-width变量控制侧边栏的开合宽度，为过渡效果设置统一时长：

/* 主容器 */
.app-container {
  display: flex;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* Plan侧边栏 */
.plan-sidebar {
  width: var(--plan-width, 0);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden; /* 关闭状态隐藏内容 */
  background-color: #f5f5f5;
  border-right: 1px solid #ddd;
}

/* Scene容器（Three.js场景载体） */
.scene-wrapper {
  flex: 1;
  transition: flex-basis 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Controls组件（固定底部示例） */
.controls-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background-color: #333;
  color: #fff;
}

2. 侧边栏状态切换逻辑 #

通过JavaScript修改CSS变量值，同时触发Three.js场景的尺寸更新：

// 获取DOM元素与Three.js实例
const toggleBtn = document.getElementById('toggle-plan');
const appContainer = document.querySelector('.app-container');
const renderer = yourRendererInstance; // 替换为你的Three.js渲染器
const camera = yourCameraInstance; // 替换为你的相机实例
const sceneWrapper = document.querySelector('.scene-wrapper');

// 切换侧边栏
toggleBtn.addEventListener('click', () => {
  const isOpen = appContainer.style.getPropertyValue('--plan-width') === '320px';
  appContainer.style.setProperty('--plan-width', isOpen ? '0' : '320px');
});

// 监听过渡结束，更新Three.js场景
sceneWrapper.addEventListener('transitionend', () => {
  const { clientWidth, clientHeight } = sceneWrapper;
  // 更新渲染器尺寸
  renderer.setSize(clientWidth, clientHeight);
  // 更新相机宽高比并投影矩阵
  camera.aspect = clientWidth / clientHeight;
  camera.updateProjectionMatrix();
});

3. 关键细节优化 #

• 过渡曲线选择：使用cubic-bezier曲线让过渡更自然，避免生硬的线性动画。
• 溢出处理：侧边栏关闭时设置overflow: hidden，防止内容溢出到Scene区域。
• 事件监听时机：通过transitionend事件确保在过渡完成后再更新Three.js场景，避免中间状态的尺寸偏差。

常见问题排查 #

• 过渡不生效：检查plan-sidebar的width属性是否正确绑定CSS变量，且没有被更高优先级的样式覆盖。
• Three.js场景不更新：确认已正确获取scene-wrapper的实际宽高，且相机aspect更新后调用了camera.updateProjectionMatrix()。

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