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;
相关推荐
cooldream20093 小时前
Python 包管理新时代:深入了解 `uv` 的使用与实践
python·uv·包管理器
远离UE46 小时前
blender uv小技巧
blender·uv
Hi_kenyon6 小时前
UV的使用总结
python·uv
zhu_zhu_xia20 小时前
cesium添加原生MVT矢量瓦片方案
javascript·arcgis·webgl·cesium
charlee4420 小时前
WebGL简易教程——结语
教程·webgl·三维可视化·前端开发·计算机图形学
心前阳光1 天前
Unity WebGL文本输入
unity·游戏引擎·webgl
三月的一天1 天前
React Three Fiber 实现 3D 模型点击高亮交互的核心技巧
3d·webgl·threejs·reactthreefiber
康康的幸福生活1 天前
webgl2 方法解析: bufferSubData()
webgl
千鼎数字孪生-可视化2 天前
Web技术栈重塑HMI开发:HTML5+WebGL的轻量化实践路径
前端·html5·webgl
Data_Adventure3 天前
推荐几款开源 Canvas 和 WebGL 图形库
前端·webgl·canvas