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;
相关推荐
平行云8 小时前
实时云渲染信创架构解析:从GPU池化到全栈适配的技术演进
linux·unity·docker·ue5·webgl·数字孪生·实时云渲染
一直走下去-明11 小时前
在 Windows 上安装 uv
windows·uv
<花开花落>1 天前
Python 项目迁移到 uv:经验小结与可复用工作流
python·uv
Hello Mr.Z1 天前
microduck_rl(MuJoCo+PPO+WandB+UV训练机器人)
机器人·uv·rl·ppo·microduck
m0_614523551 天前
故障排查:移动物体表面贴图为什么会漂移?从稳定纹理到连续帧验收
网络·人工智能·贴图
yyt3630458412 天前
KLineChartQuant:GLSL 的精度问题及 RTC 解法
前端·vue.js·react.js·交互·图形渲染·webgl·数据可视化
灵境(虚幻知音)3 天前
WebGL 不支持>1px的线绘制,那 Cesium 的带宽度的线是怎么画出来的?
webgl·cesium·着色器
云登指纹浏览器4 天前
浏览器指纹检测原理演进:从Canvas到WebGL的4轮风控升级
webgl
Rina GO4 天前
PS怎么把文字贴在圆柱体上?2种实用方法教程附不规则物体贴图
人工智能·贴图·ps插件·不规则物体贴图·文字贴图·ai贴图
点心的游戏开发世界5 天前
UnityShaderGraph滚动UV笔记
笔记·uv