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;
相关推荐
GDAL12 小时前
使用 uv 管理 Python 版本
python·uv·版本
GTA村长团队MOD21 小时前
村长团队GTA5模组开发Blender 4.2 + Sollumz 多张贴图烘焙成单张贴图教程
人工智能·blender·贴图
CG_MAGIC1 天前
摄像机与渲染输出:焦距、景深与Cycles/Eevee渲染设置
数码相机·3d·贴图·效果图·建模教程·渲云渲染
CG_MAGIC2 天前
从光影到物理渲染:Substance Sampler 照片转材质
3d·材质·贴图·uv·建模教程·渲云渲染
nnsix2 天前
Unity 贴图压缩格式 笔记
笔记·unity·贴图
GDAL2 天前
uv 完整教程:下一代 Python 包管理工具
python·uv
kke_884 天前
一年12个月,小程序UV的季节性波动规律
大数据·小程序·uv
Esaka_Forever4 天前
uv init 完整用法(Python 最快包管理器)
服务器·python·uv
摄影图5 天前
高考冲刺插画素材 助力高考宣传氛围感拉满
贴图·高考
mxwin5 天前
Unity Shader 法线贴图跟切线空间有什么关系
unity·游戏引擎·贴图·shader