亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

In React Three Fiber habe ich eine React-Komponente, die ein Sprite generiert, das ich über alle Kamerazooms hinweg beibehalten m?chte. Der Algorithmus scheint zu funktionieren (die Gr??e scheint sich mit der Zeit nicht zu ?ndern), aber ich kann beim Vergr??ern und Verkleinern deutlich erkennen, wie er skaliert.

Ich habe an anderer Stelle ?hnliche Operationen an Sprites gesehen, und es scheint gut zu funktionieren, ohne dass es zu St?rungen kommt. Ich glaube, es gibt eine Art Verz?gerung, bin mir aber nicht sicher, wo sie liegt und wie ich sie beheben kann.

Ich habe auch ein Video des Problems angeh?ngt: https://drive.google.com/file/d/121XPY1pB5bNJr5EYNESnyPfLDdtEeIhn/view?usp=sharing

Ich habe den Code für die React-Komponente angeh?ngt. Wie beim regul?ren React Three Fiber-Code wird dieser einfach in die Canvas-Komponente eingegeben:

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>
  );
}

Ich hoffe, es sieht nicht so verz?gert aus, da ich jeden Frame aktualisiere und daher nicht sicher bin, wo das Problem liegt.

Was ich suche, ist Folgendes: https://drive.google.com/file/d/1KtEcrikFJFYboC6LX0mFVttx2eSTia0c/view?usp=sharing Keine spürbare Verz?gerung. Der Code, der diese verz?gerungsfreie Version generiert, ist reines JavaScript Three.js.

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();

Die Logik von gew?hnlichem Three.js und React Three Fiber fühlt sich gleich an, aber die Ergebnisse sind v?llig unterschiedlich.