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;
相关推荐
renwen157919 小时前
Blender简单的UV纹理绘制
blender·uv
cll_86924189121 小时前
DTF墨水、热升华墨水、DTG墨水和UV墨水:主要区别
uv
远离UE42 天前
UE5 UV邻接 Niagara潜水模拟 学习笔记
ue5·uv
用户83134859306983 天前
Vue+Threejs实现人物奔跑场景
vue.js·webgl·three.js
元气少女小圆丶4 天前
unity发布web嵌入到前端页面的接受参数
前端·unity·webgl
FL16238631294 天前
Windows手动下载安装配置uv 0.11.29配置国内源含安装包和安装教程
windows·uv
small-pudding4 天前
3D 麻将贴图开启 Mipmaps 后远处边缘发黑,关闭后又发白,为什么?
3d·贴图
WebGIS开发6 天前
WebGIS开发进阶教程①:WebGL坐标系
gis·webgl·gis开发
大魔王爱学习6 天前
Windows中通过uv工具安装一个默认的全局Python
开发语言·python·uv
Designerpupu6 天前
Photoshop 手机壳印花贴图:3 步快速做出真实产品效果图
gpt·photoshop·贴图·ps·跨境电商·手机壳贴图·贴图样机