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;
相关推荐
李伟_Li慢慢6 小时前
ShaderToy-山峦+蓝天+白云
前端·webgl
♡すぎ♡19 小时前
ShaderLab:可互动水面(基于RenderTexture,实时生成动态扰动)
计算机图形学·贴图·opengl·着色器
szial21 小时前
uv 实战指南:用一个工具重塑 Python 开发工作流
开发语言·python·uv
threelab1 天前
Three.js UV 图像变换效果 | 三维可视化 / AI 提示词
javascript·人工智能·uv
爱看书的小沐2 天前
【小沐杂货铺】基于Three.js绘制三维艺术画廊3DArtGallery (Three.js,WebGL)
javascript·3d·webgl·three.js·babylon.js·三维画廊
爱看书的小沐2 天前
【小沐学GIS】基于C++渲染三维飞行仿真Flight Simulation(OpenGL )第十三期
c++·qt·webgl·opengl·飞行仿真·flight
bwz999@88.com2 天前
python安装、使用uv
uv
一直会游泳的小猫4 天前
uv - 极速 Python 包管理器
python·工具·uv·包管理
爱吃巧克力的程序媛4 天前
计算机图形学---在OpenGL中,什么是归一化 UV 坐标?
人工智能·计算机视觉·uv
大江东去浪淘尽千古风流人物4 天前
【UV-SLAM】eLSD/LBD 数据维度 UV-SLAM吸收借鉴
数据库·线性代数·oracle·矩阵·uv·augmented reality