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;
相关推荐
Luminbox紫创测控4 小时前
可调UV宽光谱高功率的LED太阳能模拟器
人工智能·测试工具·汽车·安全性测试·uv·测试标准
joopthd8 小时前
打破进口垄断:TDLAS/UV-DOAS/FTIR 全光谱检测国产器件全产业链布局(江苏旭海光电技术梳理)
运维·人工智能·uv·激光气体检测
ZENERGY-众壹8 小时前
延时 5 秒怎么调优:光伏 SCADA 实时画面与 WebGL 拓扑集成的性能复盘
性能优化·webgl·scada·光伏运维·api集成
用户83134859306981 天前
Vue+Three.js实现PCB电路板3D交互:元器件点击高亮、部件显隐、模型自动旋转
vue.js·webgl·three.js
牧艺2 天前
cos-design BubbleField:用 Canvas 做一个「会呼吸」的深海气泡场
前端·webgl·canvas
xier_ran3 天前
uv 与 conda 详解:Python 环境管理的两条路线
python·conda·uv
接针3 天前
UV 常用命令
python·uv
用户83134859306983 天前
Cesium 实现行政区内部遮罩
vue.js·webgl·cesium
小猴子爱上树4 天前
跨境电商图片自动翻译实现方案
贴图
lxw18449125145 天前
Python uv 完整使用教程
python·conda·pip·uv