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;
相关推荐
天天进步20157 小时前
Pixelle-Video 源码解析 #4:快速启动流程:uv、Streamlit、ffmpeg 分别负责什么?
ffmpeg·uv
IT小白杨1 天前
链上任务与海外社媒多账号:环境隔离工具技术横评
经验分享·webgl·chrome devtools·安全架构·指纹浏览器
小猴子爱上树4 天前
跨境电商图片翻译工具推荐:跨马翻译批量处理多语言主图
贴图
源码学社5 天前
DeerFlow Windows 本地运行教程(uv)
windows·uv·沙箱·deerflow·超级智能体·deerflow安装
SNAKEpc121385 天前
OpenGL(十三)- Mip贴图
c语言·c++·图形渲染·贴图
闲猫7 天前
Python依赖管理:uv与pip混用避坑( pyproject.toml/uv.lock/requirements.txt )
uv
AI_AGENT_DEV_AI7 天前
数字孪生项目的开发
webgl
Luminbox紫创测控8 天前
太阳模拟器如何模拟真实太阳?积分球与氙灯光源技术解析
人工智能·测试工具·安全性测试·uv·测试标准
supermapsupport8 天前
SuperMap GIS 基础产品 FAQ 集锦(20260807)
webgl·supermap·idesktopx
supermapsupport8 天前
SuperMap iClient3D for WebGL 如何开启实体对象深度检测
webgl