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;
相关推荐
♡すぎ♡15 小时前
镜面 IBL 预过滤贴图的计算
算法·计算机图形学·贴图·pbr
CG_MAGIC16 小时前
V-Ray灯光系统详解:穹顶灯、面光与IES光域网
3d·贴图·效果图·建模教程·渲云渲染
AIMath~18 小时前
python中的uv命令揭秘
开发语言·python·uv
摄影图19 小时前
量子计算前沿科技素材 满足科普报道多类配图需求
科技·aigc·量子计算·贴图·插画
cooldream20092 天前
使用 uv 管理 Python 虚拟环境:现代 Python 开发的高效实践
python·uv·mcp
H Journey2 天前
python包和项目管理工具uv、conda介绍
python·conda·uv
♡すぎ♡3 天前
二维 uv 与单位球面坐标的相互转化公式
计算机图形学·uv
魔士于安3 天前
unity volumefog带各种demo第一人称 wsad 穿墙控制
游戏·unity·游戏引擎·贴图·模型
魔士于安3 天前
红色文化馆技术文档
前端·unity·游戏引擎·贴图·模型
GISer_Jing3 天前
Three.js着色器编译机制深度解析
javascript·webgl·着色器