three.js加载hdr背景的完成代码，以及需要引用的扩展库

要加载hdr背景，需要使用three.js的扩展库THREE.HDRCubeTextureLoader和THREE.RGBELoader。

完整的代码如下：

var scene = new THREE.Scene();

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.set(0, 0, 5);

// 加载hdr纹理
var hdrCubeLoader = new THREE.HDRCubeTextureLoader();
hdrCubeLoader.setPath( 'textures/hdr/' );
var hdrCubeMap = hdrCubeLoader.load( [
    'px.hdr', 'nx.hdr',
    'py.hdr', 'ny.hdr',
    'pz.hdr', 'nz.hdr'
] );

// 创建天空盒
var skybox = new THREE.Mesh( 
    new THREE.BoxGeometry( 100, 100, 100 ), 
    new THREE.MeshBasicMaterial( {
        envMap: hdrCubeMap,
        side: THREE.BackSide
    } )
);
scene.add( skybox );

// 创建物体
var sphere = new THREE.Mesh(
    new THREE.SphereGeometry(1, 32, 32),
    new THREE.MeshStandardMaterial({
        color: 0xffffff,
        metalness: 1,
        roughness: 0.1,
        envMap: hdrCubeMap
    })
);
scene.add(sphere);

var light = new THREE.PointLight( 0xffffff, 1, 100 );
light.position.set( 0, 0, 1 );
scene.add( light );

function animate() {
    requestAnimationFrame( animate );
    renderer.render( scene, camera );
}
animate();

需要引用的扩展库：

<script src="https://cdn.jsdelivr.net/npm/three@0.123.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three/examples/js/loaders/RGBELoader.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three/examples/js/loaders/HDRCubeTextureLoader.js"></script>