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;
相关推荐
苜蓿草茸茸1 小时前
UV 快速入门和使用案例
uv
white.tie12 小时前
大模型MCP之UV安装使用
uv
LetsonH12 小时前
Python工具链UV整合环境管理
开发语言·python·uv
像素工坊可视化1 天前
WebGL 开发前沿:探索未来图形渲染的新可能
图形渲染·webgl
三天不学习1 天前
一文讲透 Vue3 + Three.js 材质属性之皮革篇【扫盲篇】
javascript·webgl·three.js·材质
Modify_QmQ2 天前
WebGL图形编程实战【7】:变换流水线 × 坐标系与矩阵精讲
webgl·视图变换·投影变换·ndc变换·视口变换
像素工坊可视化2 天前
WebGL 开发的前沿探索:开启 3D 网页的新时代
3d·webgl
程序猿小三3 天前
python uv的了解与使用
开发语言·python·uv
T0uken3 天前
【Python】UV:单脚本依赖管理
chrome·python·uv
小声读源码3 天前
【技巧】使用UV创建python项目的开发环境
开发语言·python·uv·dify