diff --git a/package.json b/package.json index 3019282..bc9e64f 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,9 @@ "author": "Peeke Kuepers ", "license": "MIT", "dependencies": { - "@kaliber/build": "^0.0.126" + "@kaliber/build": "^0.0.126", + "react-spring": "^9.4.5", + "three": "^0.141.0" }, "scripts": { "start": "npm-run-all --parallel watch serve.dev", @@ -18,4 +20,4 @@ "lint.javascript": "eslint -c .eslintrc --ignore-path .gitignore './**/*.js'", "lint.styles": "stylelint --config .stylelintrc --ignore-path .gitignore './**/*.css'" } -} \ No newline at end of file +} diff --git a/src/App.css b/src/App.css new file mode 100644 index 0000000..d552187 --- /dev/null +++ b/src/App.css @@ -0,0 +1,11 @@ +.app { + isolation: isolate; +} + +.object { + width: 50px !important; + height: 50px !important; + background: hotpink; + border-radius: 50%; + will-change: transform; +} diff --git a/src/App.js b/src/App.js index c6a6d8c..3f1a639 100644 --- a/src/App.js +++ b/src/App.js @@ -1,10 +1,25 @@ - +// import { Vector2 } from 'three' +import { useSpring, animated } from 'react-spring' import { useAnimationFrame } from '/machinery/useAnimationFrame' +import styles from './App.css' export function App() { - useAnimationFrame({ onFrame: console.log }) + const [spring, api] = useSpring(() => ({ x: 0 })) + const stateRef = React.useRef({ + position: 0, + velocity: 0, + acceleration: 0, + }) + + useAnimationFrame({ onFrame(dt) { + stateRef.current.position += stateRef.current.velocity * dt + stateRef.current.velocity += stateRef.current.position * dt + api.set({ x: stateRef.current.position }) + } }) return ( -
+
+ +
) } diff --git a/src/index.css b/src/index.css index a7d9b9f..2f7a251 100644 --- a/src/index.css +++ b/src/index.css @@ -13,3 +13,9 @@ body { font-weight: var(--font-weight-base-400); line-height: 1.7; } + +html, +body, +body > * { + height: 100%; +} diff --git a/src/machinery/useAnimationFrame.js b/src/machinery/useAnimationFrame.js index df2952f..127095e 100644 --- a/src/machinery/useAnimationFrame.js +++ b/src/machinery/useAnimationFrame.js @@ -12,7 +12,7 @@ export function useAnimationFrame({ onFrame, enabled = true }) { return () => cancelAnimationFrame(frame) function handleFrame(t) { - callback(t - timestamp) + callback((t - timestamp) / 1000) timestamp = t frame = requestAnimationFrame(handleFrame) } diff --git a/yarn.lock b/yarn.lock index 05fc725..488085d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1219,6 +1219,92 @@ mkdirp "^1.0.4" rimraf "^3.0.2" +"@react-spring/animated@~9.4.5": + version "9.4.5" + resolved "https://registry.yarnpkg.com/@react-spring/animated/-/animated-9.4.5.tgz#dd9921c716a4f4a3ed29491e0c0c9f8ca0eb1a54" + integrity sha512-KWqrtvJSMx6Fj9nMJkhTwM9r6LIriExDRV6YHZV9HKQsaolUFppgkOXpC+rsL1JEtEvKv6EkLLmSqHTnuYjiIA== + dependencies: + "@react-spring/shared" "~9.4.5" + "@react-spring/types" "~9.4.5" + +"@react-spring/core@~9.4.5": + version "9.4.5" + resolved "https://registry.yarnpkg.com/@react-spring/core/-/core-9.4.5.tgz#4616e1adc18dd10f5731f100ebdbe9518b89ba3c" + integrity sha512-83u3FzfQmGMJFwZLAJSwF24/ZJctwUkWtyPD7KYtNagrFeQKUH1I05ZuhmCmqW+2w1KDW1SFWQ43RawqfXKiiQ== + dependencies: + "@react-spring/animated" "~9.4.5" + "@react-spring/rafz" "~9.4.5" + "@react-spring/shared" "~9.4.5" + "@react-spring/types" "~9.4.5" + +"@react-spring/konva@~9.4.5": + version "9.4.5" + resolved "https://registry.yarnpkg.com/@react-spring/konva/-/konva-9.4.5.tgz#28e6f6e0dfb7f7a93c6ba4f91295f3f7d5557f06" + integrity sha512-b3wTs7YT5102+Gs488r2JCNBoyZQd+SWg35AdxmiI6FARBFvBjIA0z7VJx8ILAlmTVBows5UwiDWvk2vmWmLLw== + dependencies: + "@react-spring/animated" "~9.4.5" + "@react-spring/core" "~9.4.5" + "@react-spring/shared" "~9.4.5" + "@react-spring/types" "~9.4.5" + +"@react-spring/native@~9.4.5": + version "9.4.5" + resolved "https://registry.yarnpkg.com/@react-spring/native/-/native-9.4.5.tgz#c8ec950cae02eb28a0246b912df844f526aab64c" + integrity sha512-11GcqFZfIhOOVQI25FcDLdeJLOSVOgIh2AF6WMXpCNWguhIv6N33zLL8d4cYfhYhsLOVXprU/8uefNorj7/h3g== + dependencies: + "@react-spring/animated" "~9.4.5" + "@react-spring/core" "~9.4.5" + "@react-spring/shared" "~9.4.5" + "@react-spring/types" "~9.4.5" + +"@react-spring/rafz@~9.4.5": + version "9.4.5" + resolved "https://registry.yarnpkg.com/@react-spring/rafz/-/rafz-9.4.5.tgz#84f809f287f2a66bbfbc66195db340482f886bd7" + integrity sha512-swGsutMwvnoyTRxvqhfJBtGM8Ipx6ks0RkIpNX9F/U7XmyPvBMGd3GgX/mqxZUpdlsuI1zr/jiYw+GXZxAlLcQ== + +"@react-spring/shared@~9.4.5": + version "9.4.5" + resolved "https://registry.yarnpkg.com/@react-spring/shared/-/shared-9.4.5.tgz#4c3ad817bca547984fb1539204d752a412a6d829" + integrity sha512-JhMh3nFKsqyag0KM5IIM8BQANGscTdd0mMv3BXsUiMZrcjQTskyfnv5qxEeGWbJGGar52qr5kHuBHtCjQOzniA== + dependencies: + "@react-spring/rafz" "~9.4.5" + "@react-spring/types" "~9.4.5" + +"@react-spring/three@~9.4.5": + version "9.4.5" + resolved "https://registry.yarnpkg.com/@react-spring/three/-/three-9.4.5.tgz#bd5b7844fde3338b05920654d81f127a5760f057" + integrity sha512-mArxfIhg9kyFL/8Y09TarS/ZKLd/qAWS4T3Ro/B46ILPfPnoPywDdw9/rknZihy/tslnviCgMrB4pZ29X1Dfxw== + dependencies: + "@react-spring/animated" "~9.4.5" + "@react-spring/core" "~9.4.5" + "@react-spring/shared" "~9.4.5" + "@react-spring/types" "~9.4.5" + +"@react-spring/types@~9.4.5": + version "9.4.5" + resolved "https://registry.yarnpkg.com/@react-spring/types/-/types-9.4.5.tgz#9c71e5ff866b5484a7ef3db822bf6c10e77bdd8c" + integrity sha512-mpRIamoHwql0ogxEUh9yr4TP0xU5CWyZxVQeccGkHHF8kPMErtDXJlxyo0lj+telRF35XNihtPTWoflqtyARmg== + +"@react-spring/web@~9.4.5": + version "9.4.5" + resolved "https://registry.yarnpkg.com/@react-spring/web/-/web-9.4.5.tgz#b92f05b87cdc0963a59ee149e677dcaff09f680e" + integrity sha512-NGAkOtKmOzDEctL7MzRlQGv24sRce++0xAY7KlcxmeVkR7LRSGkoXHaIfm9ObzxPMcPHQYQhf3+X9jepIFNHQA== + dependencies: + "@react-spring/animated" "~9.4.5" + "@react-spring/core" "~9.4.5" + "@react-spring/shared" "~9.4.5" + "@react-spring/types" "~9.4.5" + +"@react-spring/zdog@~9.4.5": + version "9.4.5" + resolved "https://registry.yarnpkg.com/@react-spring/zdog/-/zdog-9.4.5.tgz#66e35db08f93a0ef949f1fa1303513157c450f91" + integrity sha512-STrePM34ZK1T3oK8mo71pvKxvIzELJTpVi0U0qDh0s15e9rmN6XYkd406LqFtuchhmLoy24lD4ds7LAqhIEraw== + dependencies: + "@react-spring/animated" "~9.4.5" + "@react-spring/core" "~9.4.5" + "@react-spring/shared" "~9.4.5" + "@react-spring/types" "~9.4.5" + "@sindresorhus/is@^0.7.0": version "0.7.0" resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.7.0.tgz#9a06f4f137ee84d7df0460c1fdb1135ffa6c50fd" @@ -7702,6 +7788,18 @@ react-is@^16.13.1, react-is@^16.7.0: resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== +react-spring@^9.4.5: + version "9.4.5" + resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-9.4.5.tgz#a2a56e72a7ad5075af4ee606f0b2ca9ee2474df0" + integrity sha512-FRIXQGR+jG+Fx4UcqhF0b5jMEU3Q5QcZ8rEVWKqZgrrn92C1HcqtuZy7dH+rZ6uNGjnlV7HBf8iprJaJ+350LA== + dependencies: + "@react-spring/core" "~9.4.5" + "@react-spring/konva" "~9.4.5" + "@react-spring/native" "~9.4.5" + "@react-spring/three" "~9.4.5" + "@react-spring/web" "~9.4.5" + "@react-spring/zdog" "~9.4.5" + react@^17.0.2: version "17.0.2" resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037" @@ -8896,6 +8994,11 @@ text-table@^0.2.0: resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4" integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ= +three@^0.141.0: + version "0.141.0" + resolved "https://registry.yarnpkg.com/three/-/three-0.141.0.tgz#16677a12b9dd0c3e1568ebad0fd09de15d5a8216" + integrity sha512-JaSDAPWuk4RTzG5BYRQm8YZbERUxTfTDVouWgHMisS2to4E5fotMS9F2zPFNOIJyEFTTQDDKPpsgZVThKU3pXA== + through2@^2.0.0: version "2.0.5" resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"