enter image description here

I used RGBEloader to load an HDR file.
Wanted it to work three-dimensionally, but it doesn’t.
Spent a lot of time trying to solve this problem, but it remains unresolved.

__webpack_require__.r(__webpack_exports__);
/* harmony import */ var three__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! three */ "./node_modules/three/build/three.module.js");
/* harmony import */ var three_examples_jsm_controls_OrbitControls_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! three/examples/jsm/controls/OrbitControls.js */ "./node_modules/three/examples/jsm/controls/OrbitControls.js");
/* harmony import */ var three_examples_jsm_loaders_RGBELoader_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! three/examples/jsm/loaders/RGBELoader.js */ "./node_modules/three/examples/jsm/loaders/RGBELoader.js");







let renderer, scene, camera, controls;

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

function init() {




  renderer = new three__WEBPACK_IMPORTED_MODULE_0__["WebGLRenderer"]({canvas:canvas, antialias : true});
  renderer.shadowMap.enabled = true; 
  renderer.shadowMap.type = three__WEBPACK_IMPORTED_MODULE_0__["VSMShadowMap"]; 

  // scene
  scene = new three__WEBPACK_IMPORTED_MODULE_0__["Scene"]();
  new three_examples_jsm_loaders_RGBELoader_js__WEBPACK_IMPORTED_MODULE_2__["RGBELoader"]()
  .load('../public/hdr/blue_photo_studio_8k.hdr', function (texture) 
  { texture.mapping = three__WEBPACK_IMPORTED_MODULE_0__["EquirectangularReflectionMapping"];
    scene.background = texture;
    scene.environment = texture;});


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


  //orbit

  controls = new three_examples_jsm_controls_OrbitControls_js__WEBPACK_IMPORTED_MODULE_1__["OrbitControls"](camera,canvas);

  //light
  const Dlight = new three__WEBPACK_IMPORTED_MODULE_0__["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__WEBPACK_IMPORTED_MODULE_0__["HemisphereLight"](0xffffff,0x000000,0.25);
  scene.add(Hlight);

  //매쉬

  const Mat01 = new three__WEBPACK_IMPORTED_MODULE_0__["MeshStandardMaterial"]();
  const geo01 = new three__WEBPACK_IMPORTED_MODULE_0__["SphereGeometry"](1,24,24);
  const obj01 = new three__WEBPACK_IMPORTED_MODULE_0__["Mesh"](geo01,Mat01);
  obj01.castShadow = true;
  scene.add(obj01); 

  //floor

  const FloorGO01 = new three__WEBPACK_IMPORTED_MODULE_0__["PlaneGeometry"](10,10);
  const Floor01 = new three__WEBPACK_IMPORTED_MODULE_0__["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 onWindowResize() {

  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();

  renderer.setSize( window.innerWidth, window.innerHeight );

  render();

}

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

  
}

init();

//# sourceURL=webpack:///./src/index-shadow.js?

I used the HDR code released by THREEjs, but the webpage came out white. I used the codes on the Internet, but they still don’t work.