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;
相关推荐
什么都不会的Tristan4 小时前
UV统计(HyperLogLog技术)
uv
ThreePointsHeat15 小时前
Unity WebGL打包后启动方法,部署本地服务器
unity·游戏引擎·webgl
da_vinci_x2 天前
【场景美术】2D 游戏要做“视差滚动”?智能补全 + 深度切片,5分钟把单图拆成 5 层景深
人工智能·游戏·prompt·aigc·贴图·技术美术·游戏美术
林枫依依2 天前
电脑配置流程(WebGL项目)
webgl
CG_MAGIC3 天前
Blender制作蜘蛛机器人
机器人·blender·贴图·建模教程·渲云渲染
郝学胜-神的一滴3 天前
OpenGL纹理技术详解:从原理到实践
c++·程序人生·游戏程序·图形渲染·贴图
冥界摄政王4 天前
CesiumJS学习第四章 替换指定3D建筑模型
3d·vue·html·webgl·js·cesium
da_vinci_x5 天前
【2D场景】16:9秒变21:9?PS “液态缩放” + AI 补全,零成本适配全面屏
前端·人工智能·游戏·aigc·设计师·贴图·游戏美术
reddingtons5 天前
【品牌包装】告别“贴图怪”!Firefly + Illustrator Mockup,0 建模一键“真”样机
人工智能·aigc·illustrator·传媒·设计师·贴图·样机
温宇飞6 天前
高效的线性采样高斯模糊
javascript·webgl