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