Don't Rotate HDR Background

Questions
1

20240711_163357
20240711_1633571920×1169 36.9 KB

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!

2

20240711_185415
20240711_185415388×644 74.8 KB

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

3

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.)

5

Thank you so much. and the HDR issue has been resolved!