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