前言
之前使用css3DRender创建图片弹框,在旋转模型到背面时,弹框也背对模型,这与UI要求的效果有出入。考虑将css3DRender换成css2Drender,但是可能是模型的问题,将弹框加入到模型的子集,旋转模型时弹框发生比较明显的偏移,最终考虑使用css3Dspirits来实现功能。
解决方案
typescript
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
})
效果图
![](https://i-blog.csdnimg.cn/direct/4c7f31c390b14d66b8264373eb3b74fa.png)