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;
相关推荐
贵州数擎科技有限公司21 小时前
使用 Three.js 实现流光特效
前端·webgl
GAMESLI-GIS1 天前
【WebGL】fbo双pass案例
前端·javascript·webgl
cheungxiongwei.com1 天前
Rust 驱动的 Python 工具革命:Ruff 和 uv 与传统工具的对比分
python·rust·uv
Tiger Z2 天前
R 语言科研绘图第 27 期 --- 密度图-分组
开发语言·程序人生·r语言·贴图
roman_日积跬步-终至千里2 天前
PV和UV的区别
uv
图导物联3 天前
基于WebGIS技术的校园地图导航系统架构与核心功能设计
系统架构·智慧校园·gis·webgl·地图导航·电子地图·校园地图导航
匹马夕阳3 天前
(十七)WebGL中 图像处理的初识
图像处理·人工智能·webgl
2201_759646564 天前
three.js 通用 shaderToy着色器使用,切换
开发语言·前端·javascript·ecmascript·webgl·着色器
Tiger Z8 天前
R 语言科研绘图第 24 期 --- 直方图-高亮
开发语言·程序人生·r语言·贴图
优雅永不过时·11 天前
原生Three.js 和 Cesium.js 案例 。 智慧城市 数字孪生常用功能列表
前端·javascript·低代码·编辑器·智慧城市·webgl·three.js