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;
相关推荐
闲猫4 小时前
Python依赖管理:uv与pip混用避坑( pyproject.toml/uv.lock/requirements.txt )
uv
AI_AGENT_DEV_AI8 小时前
数字孪生项目的开发
webgl
Luminbox紫创测控1 天前
太阳模拟器如何模拟真实太阳?积分球与氙灯光源技术解析
人工智能·测试工具·安全性测试·uv·测试标准
supermapsupport1 天前
SuperMap GIS 基础产品 FAQ 集锦(20260807)
webgl·supermap·idesktopx
supermapsupport1 天前
SuperMap iClient3D for WebGL 如何开启实体对象深度检测
webgl
IT小白杨1 天前
2026Shopee多站点运营的浏览器隔离与移动端云手机方案
经验分享·社交电子·webgl·安全架构·指纹浏览器
如何原谅奋力过但无声2 天前
现代化Python工具:uv、Ruff、Pyright、Rich(只讲重点版)
vscode·python·uv
程小雾2 天前
Blender贴图与材质参数终极总结手册(新手永久备查)
blender·材质·贴图
echoVic2 天前
同一个 bug,我在 WebGPU 渲染器里犯了两轮:一帧内多次写同一块 buffer
前端·webgl·图形学
10mAh3 天前
Python 环境彻底不乱:uv、pip、venv、Conda 怎么选?Windows 项目迁移与锁版本实战
python·pip·uv