import * as THREE from 'three' import ReactDOM from 'react-dom' import React, { Suspense, useState, useEffect, useRef, useMemo } from 'react' import { Canvas, useFrame } from '@react-three/fiber' import Text from './Text' import Effects from './Effects' import Sparks from './Sparks' import Particles from './Particles' import './styles.css' function Ellipse(props) { const geometry = useMemo(() => { const curve = new THREE.EllipseCurve(0, 0, 10, 3, 0, 2 * Math.PI, false, 0) const points = curve.getPoints(50) return new THREE.BufferGeometry().setFromPoints(points) }, []) return ( ) } function ReactAtom(props) { return ( ) } function Number({ hover }) { const ref = useRef() useFrame((state) => { if (ref.current) { ref.current.position.x = THREE.MathUtils.lerp(ref.current.position.x, state.mouse.x * 2, 0.1) ref.current.rotation.x = THREE.MathUtils.lerp(ref.current.rotation.x, state.mouse.y / 2, 0.1) ref.current.rotation.y = 0.8 } }) return ( window.open('https://github.com/react-spring/react-three-fiber/blob/master/whatsnew.md', '_blank')} onPointerOver={() => hover(true)} onPointerOut={() => hover(false)}> 4 ) } function App() { const [hovered, hover] = useState(false) const mouse = useRef([0, 0]) const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent) useEffect(() => { document.body.style.cursor = hovered ? 'pointer' : "url('https://raw.githubusercontent.com/chenglou/react-motion/master/demos/demo8-draggable-list/cursor.png') 39 39, auto" }, [hovered]) return (

) } ReactDOM.render(, document.getElementById('root'))