three.js 纹理贴图

最新推荐文章于 2025-01-17 12:05:18 发布

原创

最新推荐文章于 2025-01-17 12:05:18 发布 · 1.1k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#贴图 #javascript #html5

这篇博客介绍了如何使用three.js库在3D模型上应用纹理贴图。首先，通过TextureLoader加载单个图片作为纹理，将其设置为MeshLambertMaterial的颜色贴图属性，从而将纹理映射到矩形平面上。接着，展示了如何加载多张图片并分别应用到立方体的各个面，创建了一个多彩的3D立方体模型。内容涵盖了纹理加载、材质设置和网格模型的创建。

three.js 纹理贴图

1.单个图片
通过纹理贴图加载器TextureLoader的load()方法加载一张图片可以返回一个纹理对象Texture，纹理对象Texture可以作为模型材质颜色贴图.map属性的值。

材质的颜色贴图属性.map设置后，模型会从纹理贴图上采集像素值，这时候一般来说不需要再设置材质颜色.color。.map贴图之所以称之为颜色贴图就是因为网格模型会获得颜色贴图的颜色值RGB。

// 纹理贴图映射到一个矩形平面上
var geometry = new THREE.PlaneGeometry(204, 102); //矩形平面
// TextureLoader创建一个纹理加载器对象，可以加载图片作为几何体纹理
var textureLoader = new THREE.TextureLoader();
// 执行load方法，加载纹理贴图成功后，返回一个纹理对象Texture
textureLoader.load('Earth.png', function(texture) {
  var material = new THREE.MeshLambertMaterial({
    // color: 0x0000ff,
    // 设置颜色纹理贴图：Texture对象作为材质map属性的属性值
    map: texture,//设置颜色贴图属性值
  }); //材质对象Material
  var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
  scene.add(mesh); //网格模型添加到场景中

  //纹理贴图加载成功后，调用渲染函数执行渲染操作
  // render();
})

2.多张图片

/**
       * 创建场景对象Scene
       */
      var scene = new THREE.Scene();

      /**
       * 创建网格模型
       */
      var geometry = new

最低0.47元/天解锁文章