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;
相关推荐
魔士于安18 小时前
unity 低多边形 无人小村 木质建筑 晾衣架 盆子手推车,桌子椅子,罐子,水井
游戏·unity·游戏引擎·贴图·模型
user_admin_god19 小时前
opencode使用报错ENAMETOOLONG: name too long, uv_spawn
uv
魔士于安19 小时前
unity 骷髅人 连招 武器 刀光 扭曲空气
游戏·unity·游戏引擎·贴图·模型
qiao若huan喜19 小时前
12、webgl 基本概念 +满天星星眨眼睛
前端·信息可视化·webgl
CG_MAGIC1 天前
Blender×酒店设计|《Cozy Gold》完整呈现
3d·blender·贴图·效果图·建模教程
米猴设计师1 天前
PS图案融合到褶皱布料上怎么弄?贴图教程
图像处理·人工智能·贴图·ps·nanobanana
Dshuishui2 天前
学习一下 Python 包管理器 uv
开发语言·python·uv
threelab2 天前
Vue3 + Trilab:打造高扩展性三维可视化插件化框架实战指南
javascript·3d·webgl
qq_12084093712 天前
Vue3 + Three.js 入门实战:从 0 到 1 搭建可交互的 3D 场景(含模型加载与性能优化)
javascript·3d·vue3·交互·webgl·gltf
a1117762 天前
Three.js 的前端 WebGL 页面合集(日本 开源项目)
前端·javascript·webgl