ThreeJS Loader Add HDR

Questions
, ,
1

Hi, Iā€™m loading gltf object to the scene with drag-drop it seems weird I think its need HDR. How can I add hdr to my scene? Thanks :slight_smile:

Here is mo code flor load:

  const loadGltf = (file) => {
    const fileReader = new FileReader();
    const onload = (event) => {
      const data = event.currentTarget.result;
      const gltfLoader = new GLTFLoader();
      const dracoLoader = new DRACOLoader();
      dracoLoader.setDecoderPath(
        "....."
      );
      gltfLoader.setDRACOLoader(dracoLoader);
      gltfLoader.parse(data, "", (gltf) => {
     
        var gltfObject = gltf.scene;
        gltfObject.scale.set(1, 1, 1);
        gltfObject.position.y = 0; //Position (y = up+, down-)
        gltfObject.position.z = 0; // Position (z = front +, back-)*/
        scene.add(gltfObject);
        render();
      });
    };

    const onerror = (error) => {
    };

    fileReader.onload = onload;
    fileReader.onerror = onerror;
    fileReader.readAsArrayBuffer(file);
  };
2

Please use the same approach like in: three.js webgl - glTF loader

  • Use RGBELoader to load a HDR environment map.
  • Before applying it to the asset, prepare it with PMREMGenerator.
  • Ensure to configure the correct output encoding and tone mapping for the renderer.
1 Like