Switching textures

[bknill]

I'm attempting to switch textures while a video is loading to show a preview image, then show the video when it loads.

I tried a couple of approaches, basically only applying the video texture when it's loaded or swapping the texture map

  if (loading)
    return (
      <mesh scale={is360 ? [1, 1, 1] : scale}>
        {is360 ? <sphereBufferGeometry attach="geometry" args={[500, 60, 40]} /> : <planeBufferGeometry />}
        <meshBasicMaterial
          map={previewTexture}
          side={is360 ? BackSide : FrontSide}
          toneMapped={false}
        ></meshBasicMaterial>
      </mesh>
    );

  return (
    <mesh scale={is360 ? [1, 1, 1] : scale}>
      {is360 ? <sphereBufferGeometry attach="geometry" args={[500, 60, 40]} /> : <planeBufferGeometry />}
      <meshBasicMaterial side={is360 ? BackSide : FrontSide} toneMapped={false}>
        <videoTexture attach="map" args={[video]} encoding={sRGBEncoding} />
      </meshBasicMaterial>
    </mesh>

<mesh scale={is360 ? [1, 1, 1] : scale}>
      {is360 ? <sphereBufferGeometry attach="geometry" args={[500, 60, 40]} /> : <planeBufferGeometry />}
      <meshBasicMaterial needsUpdate={!loading} map={loading ? previewTexture : null} side={is360 ? BackSide : FrontSide} toneMapped={false}>
        {!loading && <videoTexture attach="map" args={[video]} encoding={sRGBEncoding} />}
      </meshBasicMaterial>
    </mesh>

First approach gives me this error: Uncaught TypeError: Cannot use 'in' operator to search for 'requestVideoFrameCallback' in undefined at new VideoTexture

The second approach results in the texture disappearing. Can you let me know the best way to swap a texture out?

[bknill]

Got it working with

  const getMaterial = useMemo(() => {
    return (
      <meshBasicMaterial
        map={loading ? previewTexture : videoTexture}
        side={is360 ? BackSide : FrontSide}
        toneMapped={false}
      />
    );
  }, [loading, is360]);