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;
相关推荐
廖菌4 小时前
DATASPACE3D 产品介绍:面向数字孪生与 Web3D 场景的一体化可视化搭建平台
前端·webgl
真鬼12318 小时前
【Unity WebGL】内嵌网页与双向通信
unity·游戏引擎·webgl
图扑软件1 天前
WebGIS 零碳智能港口态势感知与 VR 远控系统
物联网·自动化·vr·webgl·数字孪生·3d 渲染
winfredzhang1 天前
WebGL 2 实战:单文件移植与扩展 Heartfelt 玻璃雨滴折射效果
webgl·雨滴·hml·水雾
数码打印机测评3 天前
多材质通用UV打印机:适配哪些材料?满足多场景印刷需求
材质·uv
山河木马5 天前
渲染管线-计算得到gl_Position(顶点着色器)之后续GPU流程
javascript·webgl·图形学
山河木马7 天前
矩阵专题3-怎么创建投影矩阵(uProjectionMatrix)
javascript·webgl·计算机图形学
山河木马8 天前
矩阵专题2-怎么创建视图矩阵(uViewMatrix)
javascript·webgl·计算机图形学
山河木马13 天前
矩阵专题1-怎么创建模型矩阵(uModelMatrix)
javascript·webgl·计算机图形学
山河木马14 天前
矩阵专题0-webGL中的矩阵
javascript·webgl·计算机图形学