Function SceneA

example/src/demos/Activity.tsx:9–36

({ onSelect }: { onSelect: Function })

const colors = ['orange', 'hotpink', 'cyan', 'lime', 'yellow', 'red', 'blue', 'purple', 'green', 'coral']

function SceneA({ onSelect }: { onSelect: Function }) {
  const ref = useRef<Mesh>(null)
  const [scale, setScale] = useState(1)
  const [color, setColor] = useState(colors[0])

  // Stable event handler using the new React 19.2 API
  const handleSelect = useEffectEvent(() => onSelect())

  useFrame((_, dt) => {
    if (ref.current) ref.current.rotation.y += dt * 1.2
  })

  return (
    <mesh
      ref={ref}
      scale={scale}
      position={[-1.5, 0, 0]}
      onClick={handleSelect}
      onPointerOver={() => {
        setScale(1.2)
        setColor(colors[Math.floor(Math.random() * colors.length)])
      }}
      onPointerOut={() => setScale(1)}>
      <boxGeometry />
      <meshStandardMaterial color={color} />
    </mesh>
  )
}

const dracoLoader = new DRACOLoader()
dracoLoader.setDecoderPath('https://www.gstatic.com/draco/versioned/decoders/1.5.5/')