React-three-fiber orthographic camera zoom

Question

Я использую в своем React приложении библиотеку react-three-fiber. У меня есть canvas в котором отрисовывается меш(3d-объект), я использую orthographic камеру и мне нужно по событию onClick увеличивать параметр камеры zoom. Я создал useState zoomSize по клику увеличиваю значение через setZoomSize() и оно меняется, но камера не реагирует и не приближается. Почему изменения не влияют на сцену? Это связанно с рендерингом? И как тогда мне по клику увеличить свой меш?

...imports


export default function Viewer() {

const tomograms = useSelector((state) => state.tomograms);
const [zoomSize, setZoomSize] = useState(1.7);


const changeZoom = (e) => {
  setZoomSize(zoomSize + 0.1);
};

return (
    <div onClick={(e) => changeZoom(e)}>
      <Canvas
        orthographic
        camera={{zoom: zoomSize}}
      >
            <primitive
              position={[-127, -145, -105]}
              object={
                new THREE.Mesh(
                  tomograms.r2.stackHelper._slice._geometry,
                  tomograms.r2.stackHelper._slice._material
                )
              }
            />
      </Canvas>
    </div>
  );
}

Answer 1

Я смог решить эту проблему используя хук useThree и достав из него camera, я напрямую меняю ей параметр zoom.

export default function Viewer() {

const tomograms = useSelector((state) => state.tomograms);
const [zoomSize, setZoomSize] = useState(1.7);


const changeZoom = (e) => {
 setZoomSize(zoomSize + 0.1);
};

const Tomogram = (r) => {
const { camera } = useThree();

camera.updateProjectionMatrix();

camera.zoom = r.zoom;

return (
  <mesh
    position={r.position}
    geometry={r.rN.stackHelper._slice._geometry}
    material={r.rN.stackHelper._slice._material}
  />
);
};

return (
<div onClick={(e) => changeZoom(e)}>
  <Canvas
    orthographic
    camera={{zoom: zoomSize}}
  >
          <Tomogram
            rN={tomograms.r2}
            position={new THREE.Vector3(-127, -145, -105)}
            zoom={zoomSizeR2}
          />
  </Canvas>
</div>
);
}

БЛОГ НА HUSL

React-three-fiber orthographic camera zoom

Ответы (1 шт):