Threejs Renderer canvas无法适配指定嵌套div容器的尺寸问题

两个核心问题导致canvas尺寸异常：

1. 尺寸计算时机错误：#buildingDetails初始状态为display:none，此时调用getBoundingClientRect()获取#buildingDisplay的宽高返回值为0，Three.js会使用默认画布尺寸，和容器实际尺寸不匹配。
2. 默认样式冲突：Three.js生成的canvas默认为行内元素，会保留基线对齐的底部空隙，同时flex布局下未设置定位基准时，子元素尺寸计算容易出现偏差，导致画布溢出父容器。

1. 调整容器样式 #

给嵌套的flex容器加定位基准，修正尺寸计算逻辑，修改后的HTML结构关键样式如下：

<div id="parent" style="display:flex; width: 100%; height: 100%;">
    <div id="blastMapID" style="height: 100%;">
        <button type="button" id="expTA" style="margin-top: 100px;"><strong>LoadTargetArea</strong></button>
    </div>
    <!-- 新增position: relative作为内部元素尺寸计算基准 -->
    <div id="buildingDetails" style="display:none; position: relative; width: 100%; height: 100%; border:1px solid black;">      
        <button id="closeDiv">Close</button>
        <!-- 新增position: relative作为canvas的定位容器 -->
        <div id="buildingDisplay" style="position: relative; width: 100%; height: 60%; background-color: rgb(187, 187, 187);">
        </div>
        <div id="statsDisplay" style="width: 100%; height: 40%; background-color: rgb(255, 255, 255);"></div>
    </div>
</div>

2. 调整渲染器初始化时机 #

不要在页面初始加载、#buildingDetails还处于隐藏状态时初始化渲染器或计算尺寸，将初始化逻辑移到容器显示的触发回调中执行，同时修正canvas默认样式：

let renderer, camera
// 示例：点击加载按钮显示容器时再初始化
document.getElementById('expTA').addEventListener('click', () => {
  const buildingDetails = document.getElementById('buildingDetails')
  const container = document.getElementById('buildingDisplay')
  // 先将容器设为可见，此时才能获取正确的布局尺寸
  buildingDetails.style.display = 'block'

  // 获取容器实际宽高
  const { width, height } = container.getBoundingClientRect()

  // 避免重复初始化
  if (!renderer) {
    renderer = new THREE.WebGLRenderer({
      antialias: true
    })
    // 修正canvas默认行内样式导致的溢出
    renderer.domElement.style.display = 'block'
    container.appendChild(renderer.domElement)
  }

  // 设置渲染器尺寸
  renderer.setPixelRatio(window.devicePixelRatio)
  renderer.setSize(width, height)

  // 同步更新相机投影矩阵
  camera.aspect = width / height
  camera.updateProjectionMatrix()
})

3. 增加尺寸监听 #

监听窗口尺寸变化，容器尺寸改变时同步更新渲染器和相机参数：

window.addEventListener('resize', () => {
  const container = document.getElementById('buildingDisplay')
  // 容器隐藏时跳过更新
  if (container.offsetParent === null) return
  const { width, height } = container.getBoundingClientRect()
  renderer.setSize(width, height)
  camera.aspect = width / height
  camera.updateProjectionMatrix()
})

• 不要给canvas手动设置width:100%; height:100%的CSS样式，会导致画布拉伸变形，setSize方法会自动给canvas设置正确的像素宽高属性。
• 如果容器是通过动画等方式渐显，要等动画结束、容器尺寸稳定后再调用setSize，否则还是会拿到错误的尺寸值。

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