Loading HDRIs with RGBELoader

🧑‍💻 Technical Support
1

Hello everyone!

I try to add a HDRI to a scene with following code

const rgbeLoader = new THREE.RGBELoader()
rgbeLoader.load(require('...'), (hdri) => {})

Eventually I’ve faced with following problem

THREE.RGBELoader is not a constructor

Is there any way to add an RGBELoader dependency to a project like for vanilla threejs?

import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';

const rgbeLoader = new RGBELoader()
rgbeLoader.load(require('...'), (hdri) => {})
2

For reflections on 3D models you can reference the example project here:

3

Regarding loading three addons (for v160+), you need to add an importmap in head.html and a <script type="module"> to store the object(s) on the window.

<!-- Three.js 160+ requires the use of import maps to use the Three.js renderer in projects -->
<script type="importmap">
  {
    "imports": {
      "three": "https://unpkg.com/three@0.160.0/build/three.module.min.js",
      "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/"
    }
  }
</script>

<script type="module">
  import * as THREE from 'three';
  import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

  window.THREE = THREE;
  window.GLTFLoader = GLTFLoader;
</script>
4

This topic was automatically closed 4 days after the last reply. New replies are no longer allowed.