import { useFrame } from “@react-three/fiber”;
import React, { useEffect, useRef } from “react”;
import { Mesh, Vector3 } from “three”;
import { useAppSelector } from “…/…/hooks”;
import { useLoader } from “@react-three/fiber”;
import { GLTFLoader } from “three/examples/jsm/loaders/GLTFLoader”;
import * as THREE from “three”;
export interface CardProperty {
position: AxisProperty;
rotation: AxisProperty;
size: AxisProperty;
}
export interface AxisProperty {
x: number;
y: number;
z: number;
}
const Card: React.FC = ({ position, rotation, size }) => {
const meshRef = useRef(null);
const autorotation = useAppSelector((state) => state.card.autoRotation);
const bottomLeftValue = useAppSelector(
(state) => state.card.curves.bottomLeft
);
const model = useLoader(GLTFLoader, “…/…/…/public/models/card_model.gltf”);
useEffect(() => {
if (autorotation && meshRef.current) {
const interval = setInterval(() => {
if (meshRef.current) {
meshRef.current.rotation.x += 0.01;
meshRef.current.rotation.y += 0.01;
}
}, 16);
return () => clearInterval(interval);
}
}, [autorotation]);
return (
<mesh
ref={meshRef}
position={[position.x, position.y, position.z]}
rotation={[rotation.x, rotation.y, rotation.z]}
>
{model && (
<primitive object={model.scene} scale={[size.x, size.y, size.z]} />
)}
);
};
export default Card;