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缩放元素。