Don't Rotate HDR Background

When HDR is inserted, the HDR file also needs to rotate 360 degrees, but on my screen, only object rotate and the HDR is stopped.


import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';



let renderer, scene, camera, controls;

const canvas = document.createElement("canvas");
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
document.body.appendChild(canvas);

function init() {

  renderer = new THREE.WebGLRenderer({canvas:canvas, antialias : true});
  renderer.shadowMap.enabled = true; 
  renderer.shadowMap.type = THREE.VSMShadowMap; 

  scene = new THREE.Scene();
  const loader = new RGBELoader();
  loader.load("../public/HDRI/kloofendal_28d_misty_puresky_8k.hdr", 
   texture=> 
      { texture.mapping = THREE.EquirectangularReflectionMapping;
       scene.background = texture;});

  camera = new THREE.PerspectiveCamera();
  camera.fov=32;
  camera.position.set(0,0,10);
  camera.aspect = window.innerWidth/window.innerHeight;
  camera.updateProjectionMatrix();
 
  


  controls = new OrbitControls(camera,canvas);
  const Dlight = new THREE.DirectionalLight(0xffffff,0.75);
  Dlight.position.set(2,2,2);
  Dlight.castShadow = true;
  Dlight.shadow.blursample =30;
  Dlight.shadow.radius = 12;
  scene.add(Dlight);

  const Hlight = new THREE.HemisphereLight(0xffffff,0x000000,0.25);
  scene.add(Hlight);

  const Mat01 = new THREE.MeshPhongMaterial();
  const geo01 = new THREE.SphereGeometry(1,24,24);
  const obj01 = new THREE.Mesh(geo01,Mat01);
  obj01.castShadow = true;
  scene.add(obj01); 

  const FloorGO01 = new THREE.PlaneGeometry(10,10);
  const Floor01 = new THREE.Mesh(FloorGO01,Mat01);
  Floor01.position.set(0,-1,0);
  Floor01.rotation.set(Math.PI *-0.5,0,0);
  Floor01.receiveShadow = true;
  scene.add(Floor01);

  render();

}


function render() {
  requestAnimationFrame(render);
  renderer.render( scene, camera );
  controls.update();

  
}

init();

It is my code.
This is the result of three days of learning by a 3D modeler who doesn’t know how to code.

I am not an English speaker. Sorry!

Got to know what the problem is. HDR works flat.

Be sure to set texture.mapping = THREE.EquirectangularRefractionMapping (and or THREE.EquirectangularReflectionMapping, depending on which way you’d like it to bend) for both scene.background and scene.environment to make them render with spherical coordinates (if the texture doesn’t render correctly, you can also add texture.needsUpdate = true after setting the mapping, in case texture was already uploaded to the GPU.)