Add example for dragOver

example/src/demos/FileDragDrop.tsx

@@ -0,0 +1,31 @@
+import React, { useState } from 'react'
+import { Canvas } from '@react-three/fiber'
+import { a, useSpring } from '@react-spring/three'
+import { OrbitControls } from '@react-three/drei'
+
+export default function Box() {
+ const [active, setActive] = useState(0)
+ // create a common spring that will be used later to interpolate other values
+ const { spring } = useSpring({
+ spring: active,
+ config: { mass: 5, tension: 400, friction: 50, precision: 0.0001 },
+ })
+ // interpolate values from commong spring
+ const scale = spring.to([0, 1], [1, 2])
+ const rotation = spring.to([0, 1], [0, Math.PI])
+ const color = active ? spring.to([0, 1], ['#6246ea', '#e45858']) : spring.to([0, 1], ['#620000', '#e40000'])
+ return (
+ <Canvas>
+ <a.mesh
+ rotation-y={rotation}
+ scale-x={scale}
+ scale-z={scale}
+ onDragOverEnter={() => setActive(1)}
+ onDragOverLeave={() => setActive(0)}>
+ <boxBufferGeometry />
+ <a.meshBasicMaterial color={color} />
+ </a.mesh>
+ <OrbitControls />
+ </Canvas>
+ )
+}

example/src/demos/index.tsx

@@ -24,6 +24,7 @@ const Test = { Component: lazy(() => import('./Test')) }
 const Viewcube = { Component: lazy(() => import('./Viewcube')) }
 const Portals = { Component: lazy(() => import('./Portals')) }
 const ViewTracking = { Component: lazy(() => import('./ViewTracking')) }
+const FileDragDrop = { Component: lazy(() => import('./FileDragDrop')) }
 
 export {
  Animation,
@@ -50,4 +51,5 @@ export {
  MultiView,
  Portals,
  ViewTracking,
+ FileDragDrop,
 }