ThreeJS 立方体贴图

• 2020 年 3 月 12 日
• 笔记

前言

什么要贴图？

在上一篇《ThreeJS 掏洞术》中，利用ThreeBSP完成了在‘墙’上掏出‘门’或‘窗户’洞的效果。但那个所谓的‘墙’一点也不像，试想谁家的墙是绿色的呀，而且就算换成其他颜色也是不行的，因为色彩太单调了，实际上在我们现实世界中，物体表面的色彩通常都是丰富的。所以要让几何体看起来真实、精致就需要贴图。

其实简单一句话形容就是：就像家里装修时要给大白墙贴上壁纸一样。

那么本文将‘简单描述’一下给立方体贴图的过程，我之所以说‘简单描述’是因为这里涉及的领域比较多，所以文中的内容就不做过多扩展描述了，只简述关于《ThreeJS 立方体贴图》的干货。

示例

什么是贴图？

贴图学名叫做 Texture Mapping ，译作 纹理映射、纹理贴图、材质贴图。

简单说就是：把一张图片贴到几何体的表面上。

那么下面开始写代码！

必要操作：使用TextureLoader对象的load函数，将图片加载为纹理对象，并使用该纹理对象创建一个MeshBasicMaterial (基本材质)。以下素材，下载可以右键点击另存为。

let mesh = new THREE.Mesh(          new THREE.BoxGeometry(300, 300, 300),          new THREE.MeshBasicMaterial( {              map: new THREE.TextureLoader().load('./crate.jpg') }          )      );  scene.add(mesh);

这样就将图片覆盖到了立方体的6个面上，以下是效果图

如果你想6个面分别贴不同的图的话也好办，最简单的方法是，Mesh构造函数的第二个参数，可以直接传一个Material数组，所以我们可以创建对应6个面的MeshBasicMaterial数组，那么现在演示如何将下面6个图片分别贴到6个面上。

//创建纹理加载器对象  let textureLoader = new THREE.TextureLoader();  let mesh = new THREE.Mesh(      new THREE.BoxGeometry(300, 300, 300),      [          //下标0：右面材质          new THREE.MeshBasicMaterial({              map: textureLoader.load('./img/tietu_demo_5.jpg')          }),          //下标1：左面材质          new THREE.MeshBasicMaterial({              map: textureLoader.load('./img/tietu_demo_6.jpg')          }),          //下标2：上面材质          new THREE.MeshBasicMaterial({              map: textureLoader.load('./img/tietu_demo_7.jpg')          }),          //下标3：下面材质          new THREE.MeshBasicMaterial({              map: textureLoader.load('./img/tietu_demo_8.jpg')          }),          //下标4：前面材质          new THREE.MeshBasicMaterial({              map: textureLoader.load('./img/tietu_demo_9.jpg')          }),          //下标5：后面材质          new THREE.MeshBasicMaterial({              map: textureLoader.load('./img/tietu_demo_10.jpg')          }),      ]  );  scene.add(mesh);

效果如下图：

本文到此结束，有时间会写一篇关于UV Mapping的贴图方式，比这个稍微复杂点，其实也很简单，今天就先到这里，欢迎评论，提意见！

转发请注明本文链接。