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;
相关推荐
小彭努力中2 天前
20. gui调试3-下拉菜单、单选框
前端·3d·webgl
还是大剑师兰特2 天前
webGL 综合教程100+【目录】
webgl·webgl教程·webgl 示例
战术摸鱼大师2 天前
OpenGL(四) 纹理贴图
贴图·opengl
xiangshangdemayi5 天前
WebGL系列教程八(GLSL着色器基础语法)
webgl·基础·shader·着色器·语法·glsl
wjs04065 天前
WebGL入门:将3D世界带入网页的魔法
javascript·3d·webgl·前端开发
xiangshangdemayi6 天前
WebGL系列教程六(纹理映射与立方体贴图)
webgl·贴图·uv·立方体·纹理坐标·纹理映射
gameckisme7 天前
Selfloss,官方中文,解压即玩,
游戏·unity·游戏程序·图形渲染·cocos2d·贴图·游戏策划
refineiks8 天前
three.js使用3DTilesRendererJS加载3d tiles数据
前端·3d·图形渲染·webgl
Ian102510 天前
Three.js new THREE.TextureLoader()纹理贴图使用png图片显示为黑色
前端·javascript·webgl·three.js·贴图·三维
DBBH11 天前
记录一下blender烘焙贴图黑边的一个坑
blender·贴图