Inspire

import { EquirectangularReflectionMapping, HalfFloatType, Texture } from "three"
import { UltraHDRLoader } from "three/examples/jsm/Addons.js"

const loader = new UltraHDRLoader()

// Fix iPhone 15, iOS 18.3: THREE.WebGLRenderer: Unable to use linear filtering with floating point textures. OES_texture_float_linear not supported on this device.
loader.setDataType(HalfFloatType)

const envMap = await new Promise((resolve: (texture: Texture) => void) => {
  loader.load("/assets/envmap.jpg", function (texture) {
    texture.mapping = EquirectangularReflectionMapping
    texture.needsUpdate = true
    resolve(texture)
  })
})

scene.environment = envMap

const hFOV = 2 * Math.atan( Math.tan( camera.fov * Math.PI / 180 / 2 ) * camera.aspect ) * 180 / Math.PI; // degrees

function fovHorizontalToVertical(fovHorizontal, aspect) {
  const fovHorizontalRad = (fovHorizontal * Math.PI) / 180;
  const fovVerticalRad = 2 * Math.atan(Math.tan(fovHorizontalRad / 2) / aspect);
  const fovVertical = (fovVerticalRad * 180) / Math.PI;
  return fovVertical;
}

const fovHorizontal = 50;
const aspect = window.innerWidth / window.innerHeight;

const fovVertical = fovHorizontalToVertical(fovHorizontal, aspect);

camera.fov = fovVertical;
camera.updateProjectionMatrix();