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;
相关推荐
魔士于安16 小时前
Unity windows 同步 异步 打开文件文件夹工具
游戏·unity·游戏引擎·贴图·模型
魔士于安17 小时前
unity lowpoly 风格 城市 建筑 道路 交通标志
游戏·unity·游戏引擎·贴图·模型
魔士于安1 天前
Unity UI图片 复活节UI,卡通风格
游戏·ui·unity·游戏引擎·材质·贴图
魔士于安1 天前
unity 卡通风整套资源 小鸟N套带动作+一套卡通风村落 和 相关道具+落叶粒子效果 buildin
游戏·unity·游戏引擎·贴图·模型
CG_MAGIC2 天前
幕后花絮:用Blender打造自己的建筑
3d·blender·贴图·uv·建模教程·渲云渲染
青木9602 天前
前后端开发调试运行技巧
linux·服务器·前端·后端·npm·uv
魔士于安3 天前
Unity类似博物馆场景
前端·unity·游戏引擎·贴图·模型
cxxcode4 天前
认识 WebGL:基本用法与核心 API
webgl
Ice星空5 天前
使用 uv 进行 python 项目管理
开发语言·python·uv
sinat_367104566 天前
windows安装uv
uv