three.js CSS3DObject在非全屏场景下浏览器缩放尺寸导致位置偏移问题（vue）

问题视频

问题原因

经过多次测试，在flex布局或者百分比布局下，threejs场景盒子左侧的盒子宽度会出现小数的情况，猜测three.js在进行CSS3DObject定位操作的时候会因为小数问题导致精度丢失。

解决方案

1、不使用flex布局或者百分比布局，使用精确的宽度进行布局

2、使用js设置精准的盒子宽度

完整代码

<template>
  <div ref="box" style="display: flex">
    <div
      ref="leftBox"
      style="height: 1000px; background-color: aqua; vertical-align: top"
    ></div>
    <div ref="centerBox&