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;
相关推荐
咋吃都不胖lyh2 小时前
使用 uv 根据 requirements.txt 创建并应用虚拟环境
uv
智商偏低10 小时前
attribute 与 uniform 本质区别(WebGL)
webgl
进哥AI研习社1 天前
WebGL 与视频背景——首屏视觉层的性能博弈
性能优化·webgl·gpu·canvas·shader·帧率·视频背景
欧叶冲冲冲2 天前
uv Python 环境管理笔记
笔记·python·uv
hqzing2 天前
几个主流的环境管理器(rustup、uv、nvm、fnm)已经在鸿蒙 PC 上可用
uv
vortex53 天前
从Conda到UV:Python项目依赖管理的现代演进
python·conda·uv
杨丰玮4184 天前
从零手写Java飞机躲障碍游戏|Swing绘图、鼠标跟随、计时器碰撞检测实战(五)
java·python·游戏·游戏引擎·图形渲染·动画·贴图
zoujiahui_20186 天前
Python 包与环境管理工具 uv
开发语言·python·uv
eagle_Annie6 天前
Python/torch/深度学习——Miniforge+uv环境安装
python·深度学习·uv
天天进步20157 天前
Pixelle-Video 源码解析 #4:快速启动流程:uv、Streamlit、ffmpeg 分别负责什么?
ffmpeg·uv