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;
相关推荐
mxwin5 小时前
Unity Shader 细节贴图技术在不增加显存开销的前提下,有效提升近距离纹理细节的渲染质量
unity·游戏引擎·贴图
魔士于安7 小时前
unity 低多边形 动物 带场景 有氛围感
游戏·unity·游戏引擎·贴图
魔士于安9 小时前
unity 动物包 大象 鹿 狐狸
游戏·unity·游戏引擎·贴图·模型
IT空门:门主11 小时前
Anaconda & uv 常用命令速查手册
python·uv
ct97813 小时前
Cesium的Primitive API
gis·webgl·cesium
魔士于安1 天前
unity完整项目走廊
游戏·unity·游戏引擎·贴图·模型
CG_MAGIC1 天前
Blender场景搭建:寻找德尔蒙
3d·blender·贴图·建模教程·渲云渲染
CG_MAGIC1 天前
SketchUp 大图渲染优化:清理废线 + 压缩模型,彻底解决卡顿
3d·blender·贴图·效果图·渲云渲染
qq_339191142 天前
uv 设置系统默认版本, linux设置uv
linux·运维·uv
UTwelve3 天前
【UE】如何正确旋转法线贴图
性能优化·ue5·材质·贴图·着色器