Three.js + CSS3DSprite 首帧精灵图模糊问题排查、解决

一、 现象

页面初次加载，浮窗模糊；

用户一旦缩放/旋转/平移，相机矩阵刷新 → 浮窗就清晰。

二、 相关代码

        showAreaModel(item, operateModel) {
            // 显示区块浮窗
            const infoDiv = document.getElementById(`operateModel-${item.tenantId}`);
            if (infoDiv) {
                const bbox = new THREE.Box3().setFromObject(operateModel);
                const center = new THREE.Vector3();
                bbox.getCenter(center);

                let sprite = new CSS3DSprite(infoDiv);
                sprite.position.set(center.x, 0.92, center.z);
                sprite.hdType = '区块浮窗';
                // 原尺寸太大，缩小浮窗
                sprite.scale.multiplyScalar(0.0014);

                this.scene.add(sprite);
                sprite.mainModel = operateModel;
                operateModel.blockCardModel = sprite;
            }
        },

三、经过排查、调研， 最终有效方案

核心思路：避免使用threejs的scale缩放，避免直接用 sprite.scale 缩放，改为 DOM 内层缩放。

实现方式：

给浮窗 DOM 加一层 外包装容器（three.js 控制定位）。

内层 DOM 用 transform: scale() 缩放元素。

创建精灵图时 sprite 保持 scale = 1，不再使用 threejs的scale 缩放。

示例：

<div class="sprite-wrapper">

   <div class="sprite-inner">浮窗文字</div>

</div>

.sprite-wrapper {

   display: inline-block; /* three.js 控制它 */

}

.sprite-inner {

   transform: scale(0.0014) translate(-50%, -50%); ;    /* 再缩小 */

   transform-origin: top left;  /* 保持对齐 */

}

四、 结论

不要使用threejs 极小缩放精灵图，在dom里使用css缩放元素。