Center a camera inside of a sphere with react-three

Question

I am trying to create a 360 image viewer with @react-three, but I cannot place the camera inside, although I have centered both of them at 0, 0, 0.

Here it is a codesandbox link with my project

I am pretty new to three.js by the way, so I was just following this tutorial on how to create it with vanilla javascript, but I need it to be done in React

const Sphere = ({ size }) => {
  const texture = useLoader(TextureLoader, Load360);
  return (
    <mesh position={[0, 0, 0]} scale={[size, size, size]}>
      <sphereGeometry args={[1, 64, 64]} />
      <meshStandardMaterial map={texture} />
    </mesh>
  );
};

const CameraControls = () => {
  const { camera, gl } = useThree();
  return <OrbitControls position={[0, 0, 0]} args={[camera, gl.domElement]} />;
};

export default function App() {
  return (
    <div style={{ height: "100vh", width: "100vw" }}>
      <Canvas>
        <ambientLight intensity={0.5} />
        <Sphere size={3} />
        <CameraControls />
      </Canvas>
    </div>
  );
}

Answer 1

Hey I've been working on a related issue as well, however I do have a camera in the center of my 360 sphere, you can easily do this by using PerspectiveCamera of @react-three/drei you can set the position of it in it's arguments. Hope this helps! Also I found out that zooming in doesn't really work when you're in a sphere, instead I adjust the fov to zoom in on the sphere from inside. Works just as well but might have an effect on the quality in which you see your image.

EDIT: You also have to choose on which side the texture is shown by default this will be on the outside but as you are on the inside you have to put side={1} or side={2} for both sides on the meshBasicMaterial of the sphere.