如何使用三纤维反应三js

Question

我的问题是，当球体旋转时，一些化身被隐藏了，这是什么原因以及如何改进代码。而且我还需要所有化身都不要动。

这是我的在线代码https://codesandbox.io/s/peaceful-kalam-3mqkz?fontsize=14&hidenavigation=1&theme=dark 我想我应该在旋转时计算头像网格的外观参数，对吗？

这是我的主要代码

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;