小白学webgl合集-Three.js加载器

THREE.TextureLoader:

• 用途: 加载单个图像文件并将其作为纹理应用到材质上。
• 示例:

• const loader = new THREE.DataTextureLoader();
  loader.load('path/to/data.bin', function (texture) {
      const material = new THREE.MeshBasicMaterial({ map: texture });
      const geometry = new THREE.PlaneGeometry(500, 500);
      const plane = new THREE.Mesh(geometry, material);
      scene.add(plane);
  });
  

THREE.CubeTextureLoader:

• 用途: 加载六个图像文件并将其作为立方体纹理应用到天空盒子或反射/折射环境贴图上。
• 示例:

const loader = new THREE.CubeTextureLoader();
const texture = loader.load([
    'path/to/px.jpg',
    'path/to/nx.jpg',
    'path/to/py.jpg',
    'path/to/ny.jpg',
    'path/to/pz.jpg',
    'path/to/nz.jpg'
]);
scene.background = texture;

THREE.DataTextureLoader:

• 用途: 加载原始二进制数据并将其作为纹理应用。这通常用于特殊用途，如加载 HDR 图像或高度图。
• 示例:

  const loader = new THREE.DataTextureLoader();
  loader.load('path/to/data.bin', function (texture) {
      const material = new THREE.MeshBasicMaterial({ map: texture });
      const geometry = new THREE.PlaneGeometry(500, 500);
      const plane = new THREE.Mesh(geometry, material);
      scene.add(plane);
  });