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;
相关推荐
长江后浪博客10 小时前
陶瓷盘UV喷墨印刷中的Z轴高度测量与防碰撞技术方案
数码相机·uv·陶瓷盘uv打印·uv喷墨印刷·z轴测高·喷头防碰撞·激光位移传感器
Highcharts.js2 天前
Highcharts 渲染方式解析:SVG 默认渲染与 Boost 模块的 WebGL 加速,以及它与其他可视化库的不同
svg·webgl·可视化·canvas·highcharts·渲染方式
大衛說3 天前
02 · 环境搭建:uv 包管理与现代 IDE
ide·uv
UWA5 天前
GPM 2.0 WebGL 监测能力扩容|覆盖 Unity/Cocos/LayaAir 多引擎微信 & 抖音小游戏
unity·微信·性能优化·小游戏·webgl
像我这样帅的人丶你还5 天前
🚀苹果的液态玻璃咋做?🚀
前端·webgl·three.js
2601_962860156 天前
AI生成3D模型后还能继续编辑、贴图和绑定吗?从网格、材质到自动绑骨的处理流程
人工智能·3d·贴图
用户83134859306986 天前
Cesium实现动态流动火烧云晚霞效果(可用slider调整火烧云浓度)
vue.js·webgl·cesium
IT爱学堂6 天前
Three.js可视化企业实战WEBGL课,2023年全新WEB 3D THREEJS技术
前端·javascript·webgl
咋吃都不胖lyh7 天前
使用 uv 根据 requirements.txt 创建并应用虚拟环境
uv
智商偏低7 天前
attribute 与 uniform 本质区别(WebGL)
webgl