小白学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);
    });