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;
相关推荐
WebGISer_白茶乌龙桃1 天前
基于 Cesium 的 GLB 建筑模型分层分房间点击拾取技术实现
前端·javascript·vue.js·webgl·cesium
sin°θ_陈1 天前
前馈式3D Gaussian Splatting 研究地图(路线一):像素对齐高斯的起点——pixelSplat 与 latentSplat 在解决什么
python·深度学习·3d·aigc·webgl·3dgs·空间智能
就是个名称1 天前
Chrome使用cesium.js或者three.js报错不支持webGL
javascript·chrome·webgl
龙井茶Sky2 天前
uv 极速上手指南:安装、换源、更新与依赖管理
uv·python虚拟环境
这个名有人用不2 天前
解决 uv 虚拟环境使用 pip 命令提示command not found的办法
python·pip·uv·claude code
魔士于安2 天前
Unity太空战舰完整工程,包含战损,实时战损
游戏·unity·游戏引擎·贴图·模型
CG_MAGIC2 天前
硬表面建模布线逻辑:机械与道具通用规范
3d·blender·贴图·效果图·建模教程
烛阴2 天前
Three.js 场景完全入门指南:让你的 3D 场景不在乱成一团
webgl·three.js
QYR_Jodie3 天前
全球UV打印机市场洞察:规模增长与竞争格局演变
uv·市场报告
mxwin3 天前
Unity Shader 渲染管线深度解析 — Shader 三阶段
unity·游戏引擎·shader·uv