threeJS 为模型增加精灵图

前言

之前使用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
    })

效果图

相关推荐
wzyoung几秒前
element-ui让el-form绑定的深层对象也能通过内置的resetFields方法重置
前端·javascript·vue.js
用户7308701179308几秒前
使用 CSS background-blend-mode 创造惊艳的视觉效果
前端
高端章鱼哥1 分钟前
Python 项目快速部署到 Linux 服务器基础教程
前端
李剑一2 分钟前
前端使用Web Cryptography API进行内容加密,几乎无法破解
前端
搬砖码2 分钟前
优雅实现!自定义滚动刻度选择器,精准选择无压力
前端
盏茶作酒293 分钟前
打造自己的组件库(二)CSS工程化方案
前端
mwq301235 分钟前
AI编程工具:Claude Code安装和使用
前端·claude
gnip20 分钟前
项目开发流程之技术调用流程
前端·javascript
答案—answer20 分钟前
three.js编辑器2.0版本
javascript·three.js·three.js 编辑器·three.js性能优化·three.js模型编辑·three.js 粒子特效·three.js加载模型
转转技术团队34 分钟前
多代理混战?用 PAC(Proxy Auto-Config) 优雅切换代理场景
前端·后端·面试