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;
相关推荐
阿幸软件杂货间1 天前
Blender自动化展UV插件 UV Factory 4.3 v1 – Powerful Modular Uv Tools
自动化·blender·uv
da_vinci_x1 天前
告别“手绘序列帧”:Substance Designer中的程序化VFX材质工作流
游戏·材质·贴图·技术美术·游戏美术·vfx·substance designer
王维志2 天前
使用Asp.Net WebApi(.net 8)托管Unity WebGL
unity·游戏引擎·webgl
Zuckjet_2 天前
第 7 篇:交互的乐趣 - 响应用户输入
前端·javascript·webgl
xhload3d2 天前
智慧钢厂高炉冶炼仿真分析 | 图扑数字孪生
3d·智慧城市·html5·webgl·数字孪生·可视化·热力图·智慧工厂·工业互联网·工业组态·高炉炼铁·数字工厂·高炉炉体·智慧高炉·高炉
猪哥帅过吴彦祖2 天前
第 8 篇:更广阔的世界 - 加载 3D 模型
前端·javascript·webgl
weixin_464078072 天前
UV环境+UV环境中CUDA安装
uv
猪哥帅过吴彦祖3 天前
第 7 篇:交互的乐趣 - 响应用户输入
前端·webgl
开发游戏的老王3 天前
虚幻引擎虚拟制片入门教程 之 3D渲染基础知识:模型、材质、贴图、UV等
3d·虚幻·材质·模型·着色器·uv
关山月3 天前
如何使用WebGL创建伪3D图像效果
webgl