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;
相关推荐
万里沧海寄云帆7 小时前
Windows下uv环境硬链接失败问题
windows·uv
花姐夫Jun1 天前
WebGL学习-夹角的归一化
学习·webgl
曾阿伦2 天前
Python项目管理从Poetry迁移到uv:极速体验与实操指南
开发语言·python·uv
一拳不是超人2 天前
Three.js一起学-如何通过官方例子高效学习 Three.js?手把手带你“抄”出一个3D动画
前端·webgl·three.js
qq_283720053 天前
WebGL基础教程(十四):网络图片纹理映射渲染完整实战(新手也能轻松上手)
网络·webgl
Balrog-v3 天前
2026最新保姆级教程:Windows 下使用 uv 从零配置 Python (OpenCV) 环境指南
windows·python·uv
Qeesun5 天前
UV 环境管理指南 / 如何将旧项目接入 UV
linux·python·uv
溪海莘5 天前
如何使用uv创建并管理一个新的空白的python项目?
开发语言·python·uv
叶智辽6 天前
【Three.js 与 Shader】编写你的第一个自定义着色器,让模型拥有灵魂
webgl·gpu·three.js
CG_MAGIC6 天前
3D 软件文件格式详解:OBJ/FBX/USD 导出与导入规范
3d·blender·贴图·建模教程·渲云渲染