ThreeJS(WebGL)如何使用UV坐标贴图，实现UV旋转偏移？

最新推荐文章于 2024-11-14 17:06:15 发布

from_the_star

最新推荐文章于 2024-11-14 17:06:15 发布

阅读量7.7k

点赞数 1

分类专栏： webgl 文章标签： ThreeJS UV 纹理

本文链接：https://blog.csdn.net/from_the_star/article/details/106594769

版权

本文介绍了在ThreeJS中如何利用UV坐标进行纹理贴图，并详细阐述了UV坐标与顶点坐标的关系，以及如何实现UV的旋转和偏移。通过理解WebGL纹理坐标系统和ThreeJS的纹理对象，开发者可以便捷地调整纹理映射，实现3D模型的动态视觉效果。

摘要由CSDN通过智能技术生成

ThreeJS是WebGL的一种前端框架，UV坐标的原理是一样的。

前置知识

WebGL纹理

如果对WebGL有兴趣，可以去看WebGL贴材质这篇文章简单了解下。本文完整代码地址在GitHub。

纹理坐标系统

uv其实就是纹理坐标，因为xyz已经被顶点坐标占用了，所以uvw就用来表示纹理坐标。它时候贴图影射到模型表面的依据，把表面的点与平面上的像素对应起来，一般取值在0~1；
u：图片在显示器水平的坐标
v：垂直方向
w：垂直于显示器表面
一般情况只是在表面贴图，就涉及不到w，所以常称为uv。

ThreeJS纹理贴图

使用纹理对象贴图

ThreeJS本身做了封装，贴图十分方便，如果大家英文好可以直接去官网，嫌麻烦也可以在中文网站上直接查看教程或对象方法。（⚠️以下非完整代码）

    const w=h=64,textureW=textureH=64;
    var geometry = new THREE.PlaneBufferGeometry(w, h); //矩形平面
    // TextureLoader创建一个纹理加载器对象，可以加载图片作为几何体纹理
    var textureLoader = new THREE.TextureLoader();
    // 执行load方法，加载纹理贴图成功后，返回一个纹理对象Texture
    textureLoader.load('./p.jpg', function (texture) {
   
      texture.wrapS =

最低0.47元/天解锁文章