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;
相关推荐
刘皇叔code1 天前
Three.js后处理UnrealBloomPass的分析
webgl·three.js
掘金安东尼4 天前
用 WebGL + Solid.js 构建混合材质 Shader
前端·webgl
runfarther5 天前
uv与conda的区别及选择指南
语言模型·conda·ai编程·uv
LetsonH5 天前
⭐CVPR2025 给3D高斯穿 “UV 衣” 框架[特殊字符]
3d·uv
CG_MAGIC5 天前
主流 3D 模型格式(FBX/OBJ/DAE/GLTF)材质支持与转换操作指南
3d·渲染·动画·材质·贴图·3d 模型格式·材质支持与转换操作指南
郝学胜-神的一滴6 天前
Three.js 材质系统深度解析
javascript·3d·游戏引擎·webgl·材质
Tetap7 天前
pixijs实现绿幕抠图和视频
前端·webgl
trayvontang7 天前
Python虚拟环境与包管理工具(uv、Conda)
python·conda·uv·虚拟环境·miniconda·miniforge
山西第一大怨种7 天前
我的浏览器下雨了进水了
前端·webgl
sixgod_h10 天前
Threejs源码系列- Object3D
webgl·three.js