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;
相关推荐
qiao若huan喜1 天前
7、webgl 基本概念 + 前置数学知识点(向量 + 矩阵)
线性代数·矩阵·webgl
qiao若huan喜3 天前
6、webgl 基本概念 + 四边形纹理
前端·javascript·信息可视化·webgl
爱看书的小沐4 天前
【小沐杂货铺】基于Three.js绘制三维管道Pipe(WebGL、vue、react)
javascript·vue.js·webgl·three.js·管道·pipe·三维管道
da_vinci_x4 天前
Substance Designer“程序化地形”与“Splat Map”生成管线
游戏·aigc·设计师·贴图·技术美术·游戏美术·substance designer
梦凡尘6 天前
webgl 变换矩阵:旋转、平移、缩放
webgl
reddingtons6 天前
ZBrush细节烘焙全“糊”了?Painter“平均法线”+“偏斜贴图”的“无笼”烘焙管线
游戏·设计师·贴图·技术美术·substance painter·游戏美术·zbrush
爬台阶的蚂蚁6 天前
内网麒麟系统安装 uv 的完整步骤
运维·服务器·uv
爬台阶的蚂蚁6 天前
使用 UV 工具管理 Python 项目的常用命令
python·uv
倚剑仙7 天前
Unity-WebGL开发——用IIS(Internet Information Services)部署webGL工程
unity·游戏引擎·webgl
摄影图8 天前
精美酒瓶艺术改造图片:插花雕塑灯具创意展示 从旧酒瓶到生活艺术品:手残党改造灵感
贴图