Как сделаь анимацию увеличения canvas в Framer Motion, Three.js и React.js по клику?

Question

[cedFlame]

Здравствуйте, я только начинаю изучать react и three а так же решил попробовать framer motion. У меня есть куб, который при нажатии на него должен увеличится по y, подскажите, как это сделать.
Вот код:

import React, {useState} from "react";
import classes from "./Cube.module.css";
import {Canvas} from "@react-three/fiber";
import { motion } from "framer-motion-3d"
import {animate} from "framer-motion";


const Cube = (props) => {

    const [isVisible, setVisible] = useState(false)

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

}

Answer 1

[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 с анимацией.