1f:I[10931,["249","static/chunks/8bb4d8db-99349436a1404523.js?dpl=dpl_TKSKxVLtoVTPtJG6RBvTzGv6dqoT","122","static/chunks/9071f66d-202a1e7d52c2ad9e.js?dpl=dpl_TKSKxVLtoVTPtJG6RBvTzGv6dqoT","916","static/chunks/f6578f9b-e2bdeaca7eaad894.js?dpl=dpl_TKSKxVLtoVTPtJG6RBvTzGv6dqoT","819","static/chunks/819-704453f8e1174440.js?dpl=dpl_TKSKxVLtoVTPtJG6RBvTzGv6dqoT","272","static/chunks/272-d7ebc3428e3bb4d5.js?dpl=dpl_TKSKxVLtoVTPtJG6RBvTzGv6dqoT","795","static/chunks/795-8efa4eb372a31823.js?dpl=dpl_TKSKxVLtoVTPtJG6RBvTzGv6dqoT","155","static/chunks/app/examples/%5B%5B...mdxPath%5D%5D/page-f7df959e15222a9c.js?dpl=dpl_TKSKxVLtoVTPtJG6RBvTzGv6dqoT"],"default"] 20:T670,export const PointerEvents = () => { /** * You can add different pointer events to an entity which give you * the ability to handle mouse events and interactivity */ const HOVER_COLOR = 'rebeccapurple' const LEAVE_COLOR = 'gray' const [diffuse, setDiffuse] = useState(LEAVE_COLOR) const [shape, setShape] = useState('box') const material = useMaterial({ diffuse }) const onClick = () => setShape((shape) => shape === 'box' ? 'sphere' : 'box') const onHover = () => setDiffuse(HOVER_COLOR) const onLeave = () => setDiffuse(LEAVE_COLOR) useEffect(() => { document.body.style.cursor = diffuse === LEAVE_COLOR ? 'default' : 'pointer' }, [diffuse]) return {/* Render the background grid */} {/* Create a camera entity */} {/* Create the right box entity */}