Can't load potsdamer-platz/potsdamer_platz_1k.hdr

[hcxmj]

It's always easy to fail to load when I use controllers and renderers potsdamer-platz/potsdamer_platz_1k.hdr,The full resource link is https://market-assets.fra1.cdn.digitaloceanspaces.com/market-assets/hdris/potsdamer-platz/potsdamer_platz_1k.hdr；This is not mandatory, but basically it is very easy to encounter this problem when opening the page for the first time；Below is my code and error message：

import React, { Suspense, useLayoutEffect, useRef } from 'react'
import { Canvas } from '@react-three/fiber'
import { OrbitControls, Stage } from '@react-three/drei'
import useStore from '@/utils/store'

export default function Viewer({ shadows, contactShadow, autoRotate, environment, preset, intensity } : any) {
  const scene: any = useStore((store) => store.scene)
  const ref = useRef()
  useLayoutEffect(() => {
    scene.traverse((obj: any) => {
      if (obj.isMesh) {
        obj.castShadow = obj.receiveShadow = shadows
        obj.material.envMapIntensity = 0.8
      }
    })
  }, [scene, shadows])

  return (
    <Canvas style={{ width: '100%', height: '100%' }} gl={{ preserveDrawingBuffer: true }} shadows dpr={[1, 1.5]} camera={{ position: [0, 0, 150], fov: 50 }}>
      <ambientLight intensity={0.25} />
      <Suspense fallback={null}>
        <Stage
          // @ts-ignore
          controls={ref}
          preset={preset}
          intensity={intensity}
          contactShadow={contactShadow}
          shadows
          adjustCamera
          environment={environment}
        >
          <primitive object={scene} />
        </Stage>
      </Suspense>
      {/* @ts-ignore */}
      <OrbitControls ref={ref} autoRotate={autoRotate} />
    </Canvas>
  )
}

import React, { useEffect, useState } from 'react';
import useStore from '@/utils/store';
import { useControls } from 'leva';
import { Mask } from 'antd-mobile';
import { useLocation } from 'react-router-dom';
import Viewer from './Viewer';
import './index.less';

const Rotate = (props: any) => {

    const [visible, setVisible] = useState(true);
    const { scene, animations, generateScene, isLoading, clearScene } = useStore();

    const location: any = useLocation();
    console.log('location', location);
    const { model_url, back_image } = location.state;

    const [config, setConfig] = useControls(() => ({
        types: { value: false, hint: 'Add Typescript definitions' },
        shadows: { value: true, hint: 'Let meshes cast and receive shadows' },
        instanceall: { label: 'instance all', value: false, hint: 'Instance every geometry (for cheaper re-use)' },
        instance: { value: false, hint: ' Instance re-occuring geometry' },
        verbose: { value: false, hint: 'Verbose output w/ names and empty groups' },
        keepnames: { value: false, label: 'keep names', hint: 'Keep original names' },
        keepgroups: { value: false, label: 'keep groups', hint: 'Keep (empty) groups' },
        aggressive: { value: false, hint: 'Aggressively prune the graph (empty groups, transform overlap)' },
        meta: { value: false, hint: 'Include metadata (as userData)' },
        precision: { value: 2, min: 1, max: 8, step: 1, hint: 'Number of fractional digits (default: 2)' },
      }))

    const preview = useControls(
        'preview',
        {
            autoRotate: true,
            contactShadow: true,
            intensity: { value: 1, min: 0, max: 2, step: 0.1, label: 'light intensity' },
            preset: {
            value: 'rembrandt',
            options: ['rembrandt', 'portrait', 'upfront', 'soft'],
            },
            environment: {
            value: 'city',
            options: ['', 'sunset', 'dawn', 'night', 'warehouse', 'forest', 'apartment', 'studio', 'city', 'park', 'lobby'],
            },
        },
        { collapsed: true }
    )

    useEffect(() => {
        setConfig({ verbose: animations })
    }, [animations]);

    useEffect(() => {
        generateScene(model_url)
      }, [model_url]);

    useEffect(() => {
        setVisible(isLoading)
    }, [isLoading]);

    useEffect(() => {
        window.onpopstate = function () {
            console.log('begin');
            clearScene();
        };
        return () => {
          // 回退事件只用于当前组件，则需要在组件销毁时把回退事件销毁
          window.onpopstate = null;
        };
      }, []);

    return (
        <div className="rotate-page">
            {
                !isLoading && <div className="animation">
                    {scene && <Viewer scene={scene} {...config} {...preview} />}
                </div>
            }
            {/* <div className="stage">
                <img src="http://static-d.iqiyi.com/nft/stage.png" alt="" />
            </div> */}
            <Mask visible={visible}>
                <div className="mask">
                    <img src="https://static-d.iqiyi.com/nft/rotatewebp.webp" alt="" className="image" />
                    <p className="desc">资源加载中...</p>
                </div>
            </Mask>
        </div>
    )
}

export default Rotate;

import create from 'zustand';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { Toast } from 'antd-mobile';

const loader = new GLTFLoader();

export const appKAndSaltKey: any = {
  12: 'KCDNoS3gmjypqi1k',
  10: 'YZ6YzcnjfFdtw81u',
}

const useStore = create((set: any, get: any) => ({
  fileName: '',
  buffer: null,
  textOriginalFile: '',
  animations: false,
  code: '',
  scene: null,
  isLoading: true,
  modal_url: '',
  generateScene: async (source_url: string) => {
    try {
      const { modal_url } = get();
      const result: any = await new Promise((resolve, reject) => loader.load(source_url || modal_url, (gltf: any) => {
          const scene = gltf.scene;
          const animations = gltf.animations;
          set({ scene: scene, animations: !!animations.length,});
      }, (xhr: any) => {
        if(xhr.loaded === xhr.total) {
          set({ isLoading: false })
        }
      }, reject))
    } catch(err: any) {
      console.log('GLTFLoader Error:', err);
      Toast.show({
        content: '解析动画资源出错，请重试'
      })
      set({ isLoading: false })
    }
  },
  clearScene: () => {
    set({ scene: null })
  },
  setModalUrl: (modal_url: string | null) => {
    set({ modal_url });
  }
}))

export default useStore

[drcmda]

the file loads for me. cdn's are always shaky, in a safe prod environment i would copy the hdr's into /public to make sure the site functions self contained.

[PetrovEvgeniy]

Could be also VPN issue. Some IP adresses are blocked by the cdn, so you may also consider to turn off your VPN if you have one.

[Asura-Ang]

the file loads for me. cdn's are always shaky, in a safe prod environment i would copy the hdr's into /public to make sure the site functions self contained.

Hey I am also facing the same issue can you please ellaborate what you are trying to state in this issue

[CodyJasonBennett]

See #1492, this was fixed in a recent version of Drei where older ones are affected by a CDN outage.

[toastmaster-Pritam]

See #1492, this was fixed in a recent version of Drei where older ones are affected by a CDN outage.

hey, i am using the latest ^9.78.1 version of drei,, i am facing the same error, what to do?

[kikichu121]

still facing this issue even though i use offline version in environment

[CodyJasonBennett]

Try a clean install and affirm there aren't any duplicates with npm ls @react-three/drei. This specific stack trace isn't available on newer versions, but I'd advise self-hosting assets if you can -- https://github.com/pmndrs/assets/tree/main/src/hdri.

[kikichu121]

this one works

[Ammmar234]

Could be also VPN issue. Some IP adresses are blocked by the cdn, so you may also consider to turn off your VPN if you have one.

how can i solve it?