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;
相关推荐
啦啦9117141 天前
【工具】PixPin 电脑实用截图工具!带免费OCR截图/贴图/录屏/文字识别
ocr·贴图
qiao若huan喜2 天前
9、webgl 基本概念 + 复合变换 + 平面内容复习
前端·javascript·信息可视化·webgl
小明_GLC2 天前
关于新项目在PyCharm中自动构建UV环境的问题
ide·pycharm·uv
我希望的一路生花3 天前
Blender科幻机甲娘莉莉魅魔人物角色3D模型带骨骼动作绑定带贴图
3d·blender·贴图
Alaso_shuang3 天前
Raylib贴图
c语言·图形渲染·贴图·raylib库·c语言项目
qiao若huan喜4 天前
10、webgl 基本概念 + 坐标系统 + 立方体
前端·javascript·信息可视化·webgl
GisCoder5 天前
Cesium教程(9)---编辑Entity图形控制点、拖拽Entity移动、删除Entity
webgl·cesium
Anesthesia丶5 天前
UV工具学习笔记
笔记·学习·uv
geobuilding5 天前
将大规模shp白模贴图转3dtiles倾斜摄影,并可单体化拾取建筑
算法·3d·智慧城市·数据可视化·贴图
qiao若huan喜8 天前
7、webgl 基本概念 + 前置数学知识点(向量 + 矩阵)
线性代数·矩阵·webgl