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 天前
WebGL第四十五课:研究一下shader中的随机数
webgl·游戏开发·计算机图形学
烛阴3 天前
ABS - Rhomb
前端·webgl
烛阴4 天前
Smoothstep
前端·webgl
落魄实习生4 天前
UV安装并设置国内源
python·uv
荔枝吻5 天前
【保姆级喂饭教程】Python依赖管理工具大全:Virtualenv、venv、Pipenv、Poetry、pdm、Rye、UV、Conda、Pixi等
python·uv·环境管理
格调UI成品5 天前
元宇宙工厂前端新形态:Three.js与WebGL实现3D产线交互的轻量化之路
前端·javascript·webgl
烛阴6 天前
Mix - Bilinear Interpolation
前端·webgl
魂断蓝桥6666 天前
使用three.js实现3D消防,消防管线,消防教育(课一:消防给水系统01)
webgl·数字孪生·three.js·3d建筑·物联网3d·3d定位、三维室内定位、3d建筑·3d消防·消防演习模拟·消防给水系统
AIGC_北苏7 天前
让UV管理一切!!!
linux·人工智能·uv
烛阴7 天前
Mix
前端·webgl