Flyheck

Чтобы увеличить куб по оси Y при клике, вам нужно использовать состояние и функцию для обработки клика. Затем, вы можете использовать Framer Motion для анимации изменения размера. Вот пример кода, который делает это:

import React, { useState } from "react";
import { Canvas } from "@react-three/fiber";
import { motion } from "framer-motion";

const Cube = (props) => {
  const [scaleY, setScaleY] = useState(1);

  const handleCubeClick = () => {
    setScaleY((prevScaleY) => (prevScaleY === 1 ? 2 : 1));
  };

  return (
    <div id="canvas-container">
      <Canvas>
        <ambientLight />
        <pointLight position={[10, 20, 15]} />
        <motion.mesh
          rotation={[0, 15, 0]}
          position={[1, 1, 1]}
          onClick={handleCubeClick}
          scale={[1, scaleY, 1]}
          transition={{ duration: 0.5 }}
        >
          <boxGeometry attach="geometry" args={[0.3, 0.3, 0.3]} />
          <meshStandardMaterial attach="material" color={"#b467ce"} />
        </motion.mesh>
      </Canvas>
    </div>
  );
};

export default Cube;

В этом примере, я добавил состояние scaleY, которое будет меняться при клике на куб. В функции handleCubeClick мы переключаем значение между 1 и 2. Затем, я добавил свойство scale к motion.mesh, которое меняет масштаб куба по оси Y. Я также добавил transition с длительностью анимации в 0.5 секунды.

Теперь при клике на куб, он будет увеличиваться и уменьшаться по оси Y с анимацией.