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 小时前
Threejs 自定义片元着色器 做UV动画
3d·图形渲染·webgl·着色器·uv
蜜獾云2 小时前
网站运营数据pv、uv、ip
tcp/ip·负载均衡·uv
UOrb1 天前
WebGL - 初相识 - 缓冲区
前端·webgl
布兰妮甜2 天前
Three.js 基础概念:构建3D世界的核心要素
javascript·3d·webgl·three.js
匹马夕阳2 天前
(二)WebGL的渲染管线初识
3d·webgl
匹马夕阳2 天前
(三)通过WebGL绘制一个简单的三角形来理解渲染管线
webgl
匹马夕阳2 天前
(一)使用 WebGL 绘制一个简单的点和原理解析
3d·webgl
Vec[95]2 天前
如何将光源视角的深度贴图应用于摄像机视角的渲染
c++·算法·3d·贴图
Vec[95]2 天前
将光源视角的深度贴图应用于摄像机视角的渲染
前端·人工智能·贴图
程序员_三木3 天前
使用 Three.js 创建动态粒子效果
开发语言·前端·javascript·数码相机·webgl·three.js