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;
相关推荐
叶智辽2 天前
Three.js多视口渲染:如何在一个屏幕上同时展示三个视角
webgl·three.js·数据可视化
叶智辽6 天前
【Three.js与WebGPU】下一代3D技术到底强在哪?
webgl·three.js
波哥学开发7 天前
# Three.js 进阶:如何绘制"像素大小固定"的箭头?三种方案全解析
webgl·gpu
Panzer_Jack9 天前
如何用 WebGL 去实现一个选取色彩背景图片透明化小工具 - Pick Alpha
前端·webgl
烛阴9 天前
Three.js 零基础入门:手把手打造交互式 3D 几何体展示系统
javascript·webgl·three.js
叶智辽11 天前
【ThreeJS调试技巧】那些让 Bug 无所遁形的“脏套路”
webgl·three.js
叶智辽11 天前
【ThreeJS急诊室】一个生产事故:我把客户的工厂渲染“透明”了
webgl·three.js
AI能见度12 天前
硬核:如何用大疆 SRT 数据实现高精度 AR 视频投射?
ar·无人机·webgl
SCBAiotAigc12 天前
2026.2.25:conda与uv并存时,如何取消base激活
人工智能·python·conda·uv
x***r15112 天前
Snipaste截图贴图工具实用步骤详解(附截图、贴图与取色教程)
贴图