Threejs系列：贴图

本文重点介绍threejs迷惑大法的基石：贴图
在前面的文章中，我们实际上已经用到了贴图。
比如这种：

这种：

当然了，还有这种高端的：

我们呢平时看到的那些炫酷的效果，其本质，就是各种贴图的叠加。玩过早期的游戏例如cs的同学，应该深有体会。那么借助本文，我们尝试缕一缕threejs的，各种贴图

• 物体贴图
  创建一个球体，贴出了一个地球仪

  const geometry = new THREE.SphereGeometry( 4 ); 
  const texttureLoader = new THREE.TextureLoader()
  const pi = texttureLoader.load('./earth.jpg')
  const material = new THREE.MeshBasicMaterial( {
    map: pi,
  } ); 
  const cube = new THREE.Mesh( geometry, material ); 
  cube.position.x = 1
  cube.position.y = 1
  cube.position.z = 1
  scene.add( cube );

  

• 环境贴图

  // 给场景背景贴图
  const path = './textures/cube/pisa/';
  const format = '.png';
  const urls = [
    path + 'px' + format, path + 'nx' + format,
    path + 'py' + format, path + 'ny' + format,
    path + 'pz' + format, path + 'nz' + format
  ];
  
  const envMapTexture = new THREE.CubeTextureLoader().load( urls );
  scene.background = envMapTexture;

  

加上了环境贴图，瞬间逼真了许多吧。