0

Я использую в своем 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>
  );
}

1 ответ 1

0

Я смог решить эту проблему используя хук 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>
);
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.