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;
相关推荐
图扑软件6 小时前
50ms 级实时数字孪生|汽车先进制造车间工艺流程
3d·数据采集·webgl·数字孪生·可视化·opc ua·汽车制造
子兮曰12 小时前
SuperSplat 深度解析:7.6K Stars 的浏览器端 3D 高斯泼溅编辑器 — 在 Web 上编辑现实
前端·javascript·webgl
狐狐生风19 小时前
Python UV 完整安装教程
开发语言·python·uv
IT里的交易员2 天前
【系统】Windows 安装 uv
windows·uv
RReality2 天前
【Unity Shader URP】视差贴图 实战教程
ui·平面·unity·游戏引擎·图形渲染·贴图
CG_MAGIC2 天前
3ds Max FloorGenerator 插件:快速生成地板木纹
3d·贴图·uv·建模教程·渲云渲染
深耕AI2 天前
【VS Code避坑指南】点击Python图标提示“没有Python环境”,选择安装uv后这堆输出到底是什么意思?
开发语言·python·uv
在下胡三汉3 天前
3dmax直接导入加载glb,gltf格式模型插件,支持导入动画材质贴图纹理,可以批量导入
3d·材质·贴图·gltf·glb
Dshuishui4 天前
我用 Claude Code 做了一个学术论文搜索工具
开发语言·人工智能·python·pip·uv
UTwelve4 天前
【UE】如何手搓一个完美贴合地形的 Mesh Decal(面片贴花)
ue5·材质·贴图·着色器