react, react three fiber, background, load 360 image

App.js

import logo from './logo.svg';
import './App.css';
import { Canvas, useFrame, useThree,  extend, useLoader } from 'react-three-fiber'
import { Line, Text, useTexture } from '@react-three/drei';
import * as THREE from 'three'
import { useRef, Suspense } from 'react'
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'
extend({OrbitControls})
// react, react three fiber, background, load 360 image
const deg2rad = degrees => degrees * (Math.PI / 180);
const Orbit = () => {
  const {camera, gl} = useThree()
  camera.rotation.set(deg2rad(-30), 0, 0);
  camera.position.set(0, 6, 6)
  return(
    <orbitControls args={[camera, gl.domElement]}/>
  );
}



const Background = props => {

  const {gl} = useThree();

  const texture = useTexture('/autoshop.jpg')
  const formatted = new THREE.WebGLCubeRenderTarget(texture.image.height).fromEquirectangularTexture(gl, texture)
  return(
    <primitive attach="background" object={formatted.texture} />
  )
}



const Box = props => {
  const ref = useRef()
  const texture = useLoader(THREE.TextureLoader, '/world.jpg')
  useFrame( state => {
    ref.current.rotation.y += .01
  })
  return(
  <mesh ref={ref} {...props} castShadow receiveShadow>
        <boxBufferGeometry camera={{ position: [3, 3, 10] }}/>
        <meshPhysicalMaterial  map={texture} />
        <axesHelper />
  </mesh>
  )
}

const Floor = props => {

  return (
    <mesh {...props} receiveShadow>
      <boxBufferGeometry args={[20, 1, 10]}/>
      <meshPhysicalMaterial />
    </mesh>
  );
}

const Bulb = props => {

  return (
    <mesh {...props}>
      <pointLight castShadow />
     <sphereBufferGeometry args={[1]}/>
     <meshPhongMaterial emissive="white" emissiveIntensity={100} />
    </mesh>
  );
}

function App() {
  
  return (
    <div style={{height: '100vh', width: '100wh'}}>
    <Canvas  shadowMap>
     {/* 
      <fog attach="fog" args={['white', 1, 5]} />
     */}
     <Suspense fallback={null}>
      <Background />
     </Suspense>
     
      <Suspense fallback={null}>
        <Box position={[1, 1, 0]}/>
      </Suspense>
      <Line points={[[0, 0, 0], [0, 10, 0]]} color="blue"/>
      <ambientLight intensity={0.2} />
      <Text color="hotpink" anchorX="center" anchorY="middle" fontSize="2" position={[0, 3, 0]}>
        hello world!
      </Text>
      <Bulb position={[0, 3, 0]} />
      <Floor position={[0, -2, 0]}/>
      <Orbit />
    </Canvas>
    </div>
  );
}

export default App;

tip: if the image looks weird try <Canvas linear flat this worked for me