React Three Fiber: Mengapa acara skrol saya ketinggalan?

Question

Dalam React Three Fiber, saya mempunyai komponen React yang menghasilkan sprite yang saya mahu kekalkan merentasi zum kamera. Algoritma nampaknya berfungsi (saiznya nampaknya tidak berubah dari semasa ke semasa), tetapi saya dapat melihatnya dengan ketara apabila mengezum masuk dan keluar.

Saya telah melihat operasi serupa dilakukan kepada sprite di tempat lain, dan ia nampaknya berfungsi dengan baik tanpa penampilan yang bercahaya. Saya rasa ada beberapa jenis ketinggalan, tetapi saya tidak pasti di mana ia berada atau cara untuk membetulkannya.

Saya juga telah melampirkan video isu tersebut: https://drive.google.com/file/d/121XPY1pB5bNJr5EYNESnyPfLDdtEeIhn/view?usp=sharing

Saya telah melampirkan kod untuk komponen React. Seperti kod React Three Fiber biasa, ini hanyalah input ke dalam komponen kanvas:

function TestFunction() {
  const [scale, setScale] = useState(new Vector3(1, 1, 1));
  const map = new THREE.TextureLoader().load("src/assets/Joshy.png");

  let state = useThree();
  let zoom = state.camera.zoom / 100;
  let scaler: Vector3 = new Vector3(1 / zoom, 1 / zoom, 1 / zoom);
  const handleMouseScroll = (event: WheelEvent) => {
    // Perform actions when the mouse is scrolled
    scaler.set(1 / zoom, 1 / zoom, 1 / zoom);
    setScale(scaler);
  };
  useFrame(() => {
    window.document.addEventListener("wheel", handleMouseScroll, {
      capture: true,
      passive: true,
    });
  });

  return (
    <sprite scale={scale}>
      <spriteMaterial map={map} />
    </sprite>
  );
}

Saya harap ia tidak mempunyai rupa yang laggy/glitchy kerana saya mengemas kini setiap bingkai jadi saya tidak pasti apa masalahnya.

Apa yang saya cari ialah ini: https://drive.google.com/file/d/1KtEcrikFJFYboC6LX0mFVttx2eSTia0c/view?usp=sharing Tiada lag yang ketara. Kod yang menjana versi bebas lag ini ialah JavaScript Three.js tulen.

const cont = document.documentElement;
const [w, h] = [cont.clientWidth - 20, cont.clientHeight - 20];
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(50, w / h, 0.1, 100);
camera.position.set(10, 10, 10);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(w, h);
document.body.appendChild(renderer.domElement);

const hlp = new THREE.AxesHelper(3);
scene.add(hlp);

const map = new THREE.TextureLoader().load(
  'https://source.unsplash.com/random/200x200'
);
const material = new THREE.SpriteMaterial({
  map: map
});

const sprite_scale = 4;
const sprite = new THREE.Sprite(material);
/* sprite.scale.set(sprite_scale, sprite_scale); */
const virtual_d = sprite.position.distanceTo(camera.position) *1.4/ sprite_scale;

scene.add(sprite);

const controls = new THREE.OrbitControls(camera, renderer.domElement);

const render = () => {
  renderer.render(scene, camera);
};

const animate = () => {

  requestAnimationFrame(animate);

  render();

};

document.addEventListener('wheel', scaler);

function scaler() {
  const scale = sprite.position.distanceTo(camera.position)/2;
  console.log(sprite.position.distanceTo(camera.position) )
  console.log("CAMERA POSITION: ", camera.position)
  sprite.scale.set(scale, scale);
}

animate();

Logik Three.js biasa dan React Three Fiber terasa sama, tetapi hasilnya berbeza sama sekali.

Answer 1

Anda menggunakan React.

Jadi sila berhati-hati apabila menggunakan "window.document.addEventListener". Setiap kali komponen dipaparkan semula, pendengar acara baharu dicipta, menghasilkan banyak pendengar acara pada halaman.

Sebaliknya, pertimbangkan untuk menggunakan cangkuk. Anda boleh menemui banyak mata kail dalam react-three-drei. Saya sangat mengesyorkan menggunakan react-two-drei.

useEffect(() => {
    function handleMouseScroll() {
      //do something
    }

    window.addEventListener('wheel', handleMouseScroll);

    return () => {
      window.removeEventListener('wheel', handleMouseScroll);
    };
  }, []);

Dalam kes anda, anda menggunakan pendengar acara dalam useFrame. Kemudian, useFrame berjalan 60 kali sesaat. Anda mencipta 60 pendengar acara sesaat.