Objects don't overlap when rotating

I'm trying to reproduce this animation (see below) with react-three-fiber. I'm still very new to this package and to three-js.

http://makesportmakebook.com/livres/.

I've been able to do create book shapes with meshLambertMaterial, as such:

function Book(props) {      const mesh = useRef();    useFrame(() => {      mesh.current.rotation.x = mesh.current.rotation.y += 0.01    })      const bookCover = useLoader(TextureLoader, bookCoverImg)    const bookSpine = useLoader(TextureLoader, bookSpineImg)    const bookBack = useLoader(TextureLoader, bookBackImg)    const bookPages = useLoader(TextureLoader, bookPagesImg)    const bookPagesTexture = useLoader(TextureLoader, bookPagesTextureImg)    const bookPagesTopBottomTexture = useLoader(TextureLoader, bookPagesTopBottomTextureImg)      return (      <mesh      position={props.position}      ref={mesh}>        <boxBufferGeometry attach="geometry" args={          [            7, 10, 1.2, 4, 4, 1          ]        } />          <meshLambertMaterial color={"0xffffff"} map={bookCover}  />          <meshLambertMaterial map={bookSpine}  />          <meshLambertMaterial map={bookBack}  />          <meshLambertMaterial map={bookPages}  />          <meshLambertMaterial map={texture_5}  />          <meshLambertMaterial map={texture_6}  />      </mesh>    )  };  

Here's a code sandbox of my code so far: https://codesandbox.io/s/cocky-fast-61ndj

My question is: how can I avoid the overlap of these you can see here (below) but still keep the same parallel position we can see in the first example?

https://stackoverflow.com/questions/65867043/objects-dont-overlap-when-rotating January 24, 2021 at 12:08PM