function Box(props){
const mesh = React.useRef();
const [hovered, setHover] = React.useState(false);
const [active, setActive] = React.useState(false);
React.useFrame((state, delta) => (mesh.current.rotation.x += 0.01));
return (
jsx`<mesh
{...props}
ref={mesh}
scale={active ? 1.5 : 1}
onClick={(event) => setActive(!active)}
onPointerOver={(event) => setHover(true)}
onPointerOut={(event) => setHover(false)}>
<boxGeometry args={[1, 1, 1]} />
<meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
</mesh>`
)
}