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;
相关推荐
庖丁解牛4 小时前
3. Babylonjs 中获取相机方向相关
前端·webgl·游戏开发
康康的幸福生活4 小时前
webgl2 方法解析: createBuffer()
前端·javascript·webgl
weixin_3776348421 小时前
【数据增强】精细化贴图数据增强
人工智能·目标检测·贴图
康康的幸福生活1 天前
webgl2 方法解析: shaderSource()
webgl
九河_1 天前
【blender】使用bpy对一个obj的不同mesh进行不同的材质贴图(涉及对bmesh的操作)
blender·材质·贴图·bpy
魂断蓝桥6662 天前
如何基于three.js(webgl)引擎架构,实现3D医院、3D园区导航,3D科室路径导航
webgl·数字孪生·threejs·3d定位、三维室内定位、3d建筑·three.js路径规划、三维a*算法、javascript三维导航,·3d医院·3d导航·园区导航
康康的幸福生活11 天前
webgl2 方法解析: SCISSOR_TEST
javascript·webgl
茫茫人海一粒沙12 天前
Python 包管理新选择:全面了解 uv(附 Conda 对比)
python·conda·uv
魂断蓝桥66613 天前
如何基于three.js(webgl)引擎架构,实现3D机房园区,数据中心消防系统
webgl·数字孪生·three.js·物联网3d·3d机房·、3d工厂、3d工业园区、智慧制造、智慧工业、智慧工厂·bim管理系·3d消防·消防演习模拟
love530love14 天前
【笔记】解决部署国产AI Agent 开源项目 MiniMax-M1时 Hugging Face 模型下载缓存占满 C 盘问题:更改缓存位置全流程
开发语言·人工智能·windows·笔记·python·缓存·uv