threeJS 为模型增加精灵图

前言

之前使用css3DRender创建图片弹框，在旋转模型到背面时，弹框也背对模型，这与UI要求的效果有出入。考虑将css3DRender换成css2Drender,但是可能是模型的问题，将弹框加入到模型的子集，旋转模型时弹框发生比较明显的偏移，最终考虑使用css3Dspirits来实现功能。

解决方案

    const div = document.createElement("div");
    div.className = "workshop-text";
    div.innerHTML = `<div class='zdjz zzz'></div>`;
    // 创建CSS3DSprite
    const tag = new CSS3DSprite(div);
    tag.scale.set(3, 3, 3); //精灵大小
    tag.position.set(230, 50, 110); // 调整标签位置，根据具体的模型来设置
    group.add(tag);
    modelSprites.push({
        name: item.name,
        spirits: tag
    })

效果图