Как сделать так, чтобы все аватары были видны при вращении сферы, используя react-three-fiber threejs

Question

У меня вопрос, когда сфера вращалась, некоторые аватарки были скрыты, в чем причина и как улучшить код. а также мне нужно, чтобы все аватары не двигались.

Thk, this is my online code https://codesandbox.io/s/peaceful-kalam-3mqkz?fontsize=14&hidenavigation=1&theme=darkI think I should calculate the lookat args for avatar mesh when rotating,am i right?

This is my main code

import React,{useRef,useState,useEffect} from 'react';
import './App.css';
import { Canvas, useFrame,useThree} from 'react-three-fiber';
import * as THREE from 'three';
import demoAvatar from './demo';
function Sphere() {
  const ref = useRef();
  const [pointers, setPointers] = useState([[],[]]);
  const vecotor = new THREE.Vector3();
  const {camera} = useThree();
  useFrame(() => {
    //ref.current.rotation.x  +=0.01;
    console.log(ref.current.rotation.x)
    /*
    ref.current.rotation.x =ref.current.rotation.y = ref.current.rotation.z +=0.01;
    ref.current.children.forEach(element => {
     // let newpos = element.matrixWorld
     vecotor.setFromMatrixPosition( element.matrixWorld )
     element.lookAt(vecotor)
      //element.matrixWorldNeedsUpdate = true;
    });*/
  })
  const initSphere = () => {
     let pointers = [];
     let l = 180;
     let phi,theta;
     let textures = [];
     for ( let i = 0; i < l; i ++ ) {
      if (i === 0){
        phi = Math.acos( -1 + ( 2 * i ) / l ) * 1.025;
        theta = Math.sqrt( l * Math.PI ) * phi * 1.01;
      }else{
        phi = Math.acos( -1 + ( 2 * i ) / l );
        theta = Math.sqrt( l * Math.PI ) * phi;
      }
      pointers.push([
        750 * Math.cos( theta ) * Math.sin( phi ),
        750 * Math.sin( theta ) * Math.sin( phi ),
        750 * Math.cos( phi ),
      ])
      let texture = new THREE.TextureLoader().load(demoAvatar[Math.floor(Math.random()*demoAvatar.length)]);
      textures.push(texture);
     }
     return [pointers,textures];
  }
  useEffect(() => {
    setPointers(initSphere());
  },[])
  useEffect(() => {
    if(ref.current === null) return;
    let vector = new THREE.Vector3(0,0,-750)
    //console.log(camera)
    ref.current.children.forEach((element,index) => {
      // let newpos = element.matrixWorld
      vecotor.setFromMatrixPosition( element.matrixWorld )
      //console.log(index,vecotor);

     // ref.current.children[index].lookAt(vecotor)
       //element.matrixWorldNeedsUpdate = true;
     });
     console.log(pointers);
  },[ref.current])
  //useFrame(() => (ref.current.rotation.x = ref.current.rotation.y += 0.01))
  return (
    <group ref={ref}>
      {pointers[0].map((items,index) => 
      <mesh

      onClick={e => console.log('click',+index,items)}
      position={items}
      key={index}
      >
      <circleGeometry attach="geometry" args={[46,46]} />
      <meshBasicMaterial attach="material" map={pointers[1][index]}/>

    </mesh>
      )}

    </group>

  )
}
function App() {
  const camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );               
    camera.position.z = 3000;
  return (
    <div className="App">
      <Canvas camera={camera}>
        <axesHelper args={1000}>
          <Sphere />
        </axesHelper>
      </Canvas>
    </div>
  );
}

export default App;