three.js加载hdr贴图

要加载HDR贴图，首先需要确保three.js的版本大于等于r84。

接下来，我们需要使用THREE.RGBELoader来加载hdr贴图。在加载完成后，我们需要将其转换为THREE.DataTexture并将其用作环境贴图。

以下是完整的示例代码，它将加载一个hdr贴图并将其用作环境贴图：

const renderer = new THREE.WebGLRenderer();
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// 加载hdr贴图
const loader = new THREE.RGBELoader();
loader.load('path/to/hdr.hdr', (texture) => {
  // 将hdr贴图转换为DataTexture
  const pmremGenerator = new THREE.PMREMGenerator(renderer);
  pmremGenerator.compileEquirectangularShader();
  const envMap = pmremGenerator.fromEquirectangular(texture).texture;
  scene.background = envMap;
  scene.environment = envMap;
  texture.dispose();
  pmremGenerator.dispose();
});

// 添加一个球体
const geometry = new THREE.SphereGeometry(1, 32, 32);
const material = new THREE.MeshStandardMaterial({ metalness: 1, roughness: 0 });
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

// 渲染场景
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();

在这里，我们加载了一个hdr贴图，并将其用作场景的背景和环境贴图。然后，我们添加了一个球体，并使用标准材质将其渲染出来。

最后，我们设置了渲染器的大小并将其添加到页面中，然后启动了一个循环，以在场景中渲染球体。