threejs ShapeGeometry 自定义贴图的uv坐标

问题描述:

由于一些原因,要绘制一个长方形,但是这个长方形并不是 PlaneGeometry,而是一个ShapeGeometry。但是同样的贴图,同样的形状,贴图贴在PlaneGeometry上时可以正常显示,但是贴在ShapeGeometry中却不可以正常显示。所以判断是贴图uv坐标问题。

问题排查:

PlaneGeometry默认顶点坐标和uv坐标对应关系如下,其中点1,2,3,4为geometry的vertex顺序

ShapeGeometry默认顶点坐标和uv坐标对应关系如下:

我们看到,uv是这样的,和他的顶点坐标是一致的,但是实际上,我们希望uv的对应关系和PlaneGeometry是一致的。所以我们手动修改uv和顶点的对应关系

解决办法:

javascript 复制代码
const uvs = [];

uvs.push(0, 1);
uvs.push(1, 1);
uvs.push(1, 0);
uvs.push(0, 0);

groud.geometry.setAttribute('uv', new THREE.Float32BufferAttribute(new Float32Array(uvs), 2));
groud.geometry.getAttribute('uv').needsUpdate = true;
相关推荐
中防喷墨9 小时前
选UV喷码机还是激光喷码机,哪款更适合流水线?
人工智能·uv
Martina_03211 天前
AI生成的模块场景一烘焙就有黑边?用6步检查Lightmap UV、纹素密度与Padding
人工智能·游戏·3d·aigc·uv·游戏策划·关卡设计
西红柿炖牛腩3541 天前
Web3D 加载卡顿:GLB 几何重、贴图大、格式散,本地 3D 模型压缩怎么选
3d·贴图
jayhgq2 天前
新一代Python包与项目管理工具——UV
开发语言·python·uv
玖石书3 天前
linux 安装uv(python虚拟环境管理)
linux·python·uv
DP DPharness3 天前
从 uv 装到技能蒸馏:memsearch 的六步配置路径
uv
Data analyse4563 天前
Cookie过期引发UV上涨的复核方法
服务器·前端·数据分析·uv
八荒启·交互动画4 天前
Web特效025—用 Canvas 2D 做Web特效的定义与边界:这支画笔能做到哪一步
前端·webgl·网页特效·八荒启-交互动画·八荒启
ysu_03145 天前
uv实战指南-从Python版本虚拟环境到pyproject依赖管理
开发语言·python·pip·uv·虚拟环境·包管理·依赖管理
Bruce_Liuxiaowei5 天前
网页版 DeepSeek “harness desktop“ WebGL 上下文创建失败排查实录
开发语言·javascript·webgl