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;
相关推荐
sinat_3671045617 小时前
windows安装uv
uv
大江东去浪淘尽千古风流人物1 天前
【UV-SLAM 】彻底吃透UV-SLAM:创新原理、工程实现与直线几何核心代码详解
数据库·人工智能·python·机器学习·oracle·uv
mxwin2 天前
Unity Shader 屏幕空间 UVScreen Space UV 完全指南
unity·游戏引擎·uv
摄影图2 天前
智慧城市数字孪生素材 多元风格适配各类创作需求
信息可视化·aigc·智慧城市·贴图·插画
mxwin2 天前
Unity Shader 径向模糊与径向 UV 变形速度感 · 冲击波效果完全指南
unity·游戏引擎·shader·uv
bigcarp2 天前
告别pip,拥抱uv
pip·uv
threelab2 天前
从工厂模式到简化封装:三维引擎架构演进之路 threejs设计
javascript·3d·架构·webgl
qiao若huan喜2 天前
13、webgl基本概念 + 绘制狮子座星空
前端·javascript·信息可视化·webgl
mxwin3 天前
Unity URP 法线贴图:世界空间 vs 切线空间 深度解析两种法线贴图格式在实时渲染中的核心差异、适用场景与性能权衡
unity·游戏引擎·贴图
CG_MAGIC3 天前
零基础学 UV:简单解决贴图拉伸
3d·贴图·uv·效果图·建模教程·渲云渲染