From ce84b9c93a21d07a5c8b821e77331520f7245f96 Mon Sep 17 00:00:00 2001 From: Mark Marsh Date: Mon, 21 Mar 2022 17:40:40 +0000 Subject: [PATCH] moved to typescript --- .gitignore | 2 ++ App.js => App.tsx | 90 +++++++++++++++++++++++++---------------------- package.json | 6 +++- tsconfig.json | 6 ++++ yarn.lock | 38 +++++++++++++++++++- 5 files changed, 98 insertions(+), 44 deletions(-) rename App.js => App.tsx (62%) create mode 100644 tsconfig.json diff --git a/.gitignore b/.gitignore index ec8a36a..425eba9 100644 --- a/.gitignore +++ b/.gitignore @@ -12,3 +12,5 @@ web-build/ # macOS .DS_Store + +.idea diff --git a/App.js b/App.tsx similarity index 62% rename from App.js rename to App.tsx index 76c7231..a9b5c9f 100644 --- a/App.js +++ b/App.tsx @@ -1,16 +1,20 @@ -import React, {useEffect, useRef, useState} from 'react' -import {Canvas, useFrame, useThree} from '@react-three/fiber/native' +import React, {MutableRefObject, useEffect, useRef, useState} from 'react' +import {Canvas, MeshProps, useFrame, useThree} from '@react-three/fiber/native' import {Text, View} from "react-native"; -function Box(props) { +function Box(props: MeshProps) { const mesh = useRef(null) const [hovered, setHover] = useState(false) const [active, setActive] = useState(false) const [tumble, setTumble] = useState(0.02); useFrame((state, delta) => { - mesh.current.rotation.x += tumble; - mesh.current.rotation.y += tumble; + if(mesh != null) { + // @ts-ignore + mesh.current.rotation.x += tumble; + // @ts-ignore + mesh.current.rotation.y += tumble; + } }) return ( @@ -30,7 +34,7 @@ function Box(props) { ) } -function Circle(props) { +function Circle(props: MeshProps) { const mesh = useRef(null) const [hovered, setHover] = useState(false) const [active, setActive] = useState(false) @@ -38,23 +42,29 @@ function Circle(props) { const [deltaX, setDeltaX] = useState(0.1); const [deltaY, setDeltaY] = useState(0.15); - const bounds = {left: -2, right: 2, top: -2, bottom: 2}; + const bounds = {left: -4, right: 4, top: -2, bottom: 2}; //useFrame((state, delta) => {mesh.current.rotation.x += tumble; mesh.current.rotation.y += tumble; }) useFrame((state, delta) => { - if(mesh.current.position.x < bounds.left) { +// @ts-ignore + if (mesh.current.position.x < bounds.left) { setDeltaX(0.24); } - if(mesh.current.position.x > bounds.right) { +// @ts-ignore + if (mesh.current.position.x > bounds.right) { setDeltaX(-0.23); } - if(mesh.current.position.y < bounds.top) { +// @ts-ignore + if (mesh.current.position.y < bounds.top) { setDeltaY(0.22); } - if(mesh.current.position.y > bounds.bottom) { +// @ts-ignore + if (mesh.current.position.y > bounds.bottom) { setDeltaY(-0.21); } +// @ts-ignore mesh.current.position.x += deltaX; +// @ts-ignore mesh.current.position.y += deltaY; }); @@ -76,32 +86,39 @@ function Circle(props) { ) } -function Torus(props) { +function Torus(props: MeshProps) { const mesh = useRef(null) const [hovered, setHover] = useState(false) const [active, setActive] = useState(false) const [tumble, setTumble] = useState(0.0); - const [deltaX, setDeltaX] = useState(0.1); - const [deltaY, setDeltaY] = useState(0.15); + const [deltaX, setDeltaX] = useState(1); + const [deltaY, setDeltaY] = useState(1); - const bounds = {left: -2, right: 2, top: -2, bottom: 2}; + const bounds = {left: -5, right: 5, top: -2, bottom: 2}; //useFrame((state, delta) => {mesh.current.rotation.x += tumble; mesh.current.rotation.y += tumble; }) useFrame((state, delta) => { + //console.log(state, delta); +// @ts-ignore if(mesh.current.position.x < bounds.left) { - setDeltaX(0.04); + setDeltaX(1); } +// @ts-ignore if(mesh.current.position.x > bounds.right) { - setDeltaX(-0.03); + setDeltaX(-1); } +// @ts-ignore if(mesh.current.position.y < bounds.top) { - setDeltaY(0.02); + setDeltaY(1); } +// @ts-ignore if(mesh.current.position.y > bounds.bottom) { - setDeltaY(-0.01); + setDeltaY(-1); } - mesh.current.position.x += deltaX; - mesh.current.position.y += deltaY; +// @ts-ignore + mesh.current.position.x += deltaX * delta * 1; +// @ts-ignore + mesh.current.position.y += deltaY * delta * 1; }); return ( @@ -113,28 +130,17 @@ function Torus(props) { setActive(!active); setTumble(0.0); }} - /* onPointerOver={(event) => setHover(true)} - onPointerOut={(event) => setHover(false)}*/> - - + onPointerOver={(event) => setHover(true)} + onPointerOut={(event) => setHover(false)}> + + ) } -function Camera(props) { - const ref = useRef() - const { setDefaultCamera } = useThree() - // Make the camera known to the system - useEffect(() => void setDefaultCamera(ref.current), []) - // Update it every frame - useFrame(() => ref.current.updateMatrixWorld()) - return -} - export default function App() { return ( - - + {/**/} @@ -143,11 +149,11 @@ export default function App() { - - - - - + + + + + ); } diff --git a/package.json b/package.json index 5854147..8f0c8d8 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,8 @@ }, "dependencies": { "@react-three/fiber": "^8.0.0-beta.3", + "@types/react": "^17.0.41", + "@types/react-native": "^0.67.3", "expo": "~44.0.0", "expo-gl": "^11.1.2", "expo-status-bar": "~1.2.0", @@ -21,7 +23,9 @@ "three": "^0.138.3" }, "devDependencies": { - "@babel/core": "^7.12.9" + "@babel/core": "^7.12.9", + "@babel/preset-env": "^7.16.11", + "typescript": "~4.3.5" }, "private": true } diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..b9567f6 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,6 @@ +{ + "extends": "expo/tsconfig.base", + "compilerOptions": { + "strict": true + } +} diff --git a/yarn.lock b/yarn.lock index 2c33654..5dc9553 100644 --- a/yarn.lock +++ b/yarn.lock @@ -893,7 +893,7 @@ "@babel/helper-create-regexp-features-plugin" "^7.16.7" "@babel/helper-plugin-utils" "^7.16.7" -"@babel/preset-env@^7.12.9": +"@babel/preset-env@^7.12.9", "@babel/preset-env@^7.16.11": version "7.16.11" resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.16.11.tgz#5dd88fd885fae36f88fd7c8342475c9f0abe2982" integrity sha512-qcmWG8R7ZW6WBRPZK//y+E3Cli151B20W1Rv7ln27vuPaXU/8TKms6jFdiJtF7UDTxcrb7mZd88tAeK9LjdT8g== @@ -1486,6 +1486,32 @@ resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.21.tgz#864b987c0c68d07b4345845c3e63b75edd143644" integrity sha512-DBZCJbhII3r90XbQxI8Y9IjjiiOGlZ0Hr32omXIZvwwZ7p4DMMXGrKXVyPfuoBOri9XNtL0UK69jYIBIsRX3QQ== +"@types/prop-types@*": + version "15.7.4" + resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11" + integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ== + +"@types/react-native@^0.67.3": + version "0.67.3" + resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.67.3.tgz#baba111c8ce1a45a6034c15f6f0ad98826239780" + integrity sha512-hF4uOZFl2PPQtGWOtLoafrlCJeU815X3PgfVePM+7EhOIZhYXKH7+p3R3cZSnwVnrU5Ep/JfiHimMDliY3o8oQ== + dependencies: + "@types/react" "*" + +"@types/react@*", "@types/react@^17.0.41": + version "17.0.41" + resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.41.tgz#6e179590d276394de1e357b3f89d05d7d3da8b85" + integrity sha512-chYZ9ogWUodyC7VUTRBfblysKLjnohhFY9bGLwvnUFFy48+vB9DikmB3lW0qTFmBcKSzmdglcvkHK71IioOlDA== + dependencies: + "@types/prop-types" "*" + "@types/scheduler" "*" + csstype "^3.0.2" + +"@types/scheduler@*": + version "0.16.2" + resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39" + integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew== + "@types/yargs-parser@*": version "21.0.0" resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-21.0.0.tgz#0c60e537fa790f5f9472ed2776c2b71ec117351b" @@ -2239,6 +2265,11 @@ css-in-js-utils@^2.0.0: hyphenate-style-name "^1.0.2" isobject "^3.0.1" +csstype@^3.0.2: + version "3.0.11" + resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.11.tgz#d66700c5eacfac1940deb4e3ee5642792d85cd33" + integrity sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw== + dayjs@^1.8.15: version "1.11.0" resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.0.tgz#009bf7ef2e2ea2d5db2e6583d2d39a4b5061e805" @@ -5223,6 +5254,11 @@ type-fest@^0.7.1: resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.7.1.tgz#8dda65feaf03ed78f0a3f9678f1869147f7c5c48" integrity sha512-Ne2YiiGN8bmrmJJEuTWTLJR32nh/JdL1+PSicowtNb0WFpn59GK8/lfD61bVtzguz7b3PBt74nxpv/Pw5po5Rg== +typescript@~4.3.5: + version "4.3.5" + resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.3.5.tgz#4d1c37cc16e893973c45a06886b7113234f119f4" + integrity sha512-DqQgihaQ9cUrskJo9kIyW/+g0Vxsk8cDtZ52a3NGh0YNTfpUSArXSohyUGnvbPazEPLu398C0UxmKSOrPumUzA== + ua-parser-js@^0.7.30: version "0.7.31" resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.31.tgz#649a656b191dffab4f21d5e053e27ca17cbff5c6"