Skip to content

Commit d9f33fc

Browse files
joshuaellismidanosiMichael Hutchings
authored
fix: r3f not running frameloop & array props not correctly updated (pmndrs#1551)
* chore: depreciate three-v5 * chore: add three-demo * feat: move rafz to part of monorepo * fix: use new rafz property to let r3f drive animation frames resolves pmndrs#1518 * chore: delete travis * test: import from @react-spring/rafz * fix: update all values of animated array (pmndrs#1430) (pmndrs#1550) Co-authored-by: Michael Hutchings <[email protected]> * chore: update lock * fix: typescript errors * fix: allow declare Co-authored-by: Michael Hutchings <[email protected]> Co-authored-by: Michael Hutchings <[email protected]>
1 parent 440858d commit d9f33fc

35 files changed

+1141
-1453
lines changed

‎.travis.yml‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎babel.config.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,11 @@ module.exports = {
1414
},
1515
],
1616
'@babel/preset-react',
17-
'@babel/preset-typescript',
17+
[
18+
'@babel/preset-typescript',
19+
{
20+
allowDeclareFields: true,
21+
},
22+
],
1823
],
1924
}

‎demo/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
"serve": "vite preview"
1212
},
1313
"dependencies": {
14+
"@react-three/fiber": "^6.2.2",
1415
"lodash-move": "1.1.1",
1516
"lodash.clamp": "^4.0.3",
1617
"lodash.shuffle": "^4.2.0",
@@ -21,6 +22,7 @@
2122
"react-use-gesture": "^9.1.3",
2223
"react-use-measure": "^2.0.4",
2324
"styled-components": "^5.2.3",
25+
"three": "^0.129.0",
2426
"vec-la": "^1.5.0",
2527
"wouter": "^2.7.4"
2628
},

‎demo/src/App.jsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import DecayRocket from './sandboxes/rocket-decay/src/App'
2525
import Parallax from './sandboxes/parallax/src/App'
2626
import ParallaxVert from './sandboxes/parallax-vert/src/App'
2727
import ParallaxSticky from './sandboxes/parallax-sticky/src/App'
28+
import SimpleThree from './sandboxes/simple-three/src/App'
2829

2930
const links = {
3031
card: Card,
@@ -50,6 +51,7 @@ const links = {
5051
parallax: Parallax,
5152
'parallax-vert': ParallaxVert,
5253
'parallax-sticky': ParallaxSticky,
54+
three: SimpleThree,
5355
}
5456

5557
const Example = ({ link }) => {

‎demo/src/sandboxes/simple-three/.prettierrc‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"printWidth": 140,
3+
"tabWidth": 2,
4+
"useTabs": false,
5+
"semi": false,
6+
"singleQuote": true,
7+
"trailingComma": "none",
8+
"bracketSpacing": true,
9+
"jsxBracketSameLine": true
10+
}

‎demo/src/sandboxes/simple-three/package.json‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
{
2+
"name": "react-three-fiber-starter",
3+
"version": "1.0.0",
4+
"description": "react-three-fiber with react-spring",
5+
"keywords": [
6+
"react",
7+
"three.js"
8+
],
9+
"main": "src/index.js",
10+
"dependencies": {
11+
"@react-spring/three": "9.1.1",
12+
"@react-three/fiber": "6.0.16",
13+
"react": "17.0.2",
14+
"react-dom": "17.0.2",
15+
"react-scripts": "3.1.1",
16+
"three": "0.127.0"
17+
},
18+
"scripts": {
19+
"start": "react-scripts start",
20+
"build": "react-scripts build",
21+
"test": "react-scripts test --env=jsdom",
22+
"eject": "react-scripts eject"
23+
},
24+
"browserslist": [
25+
">0.2%",
26+
"not dead",
27+
"not ie <= 11",
28+
"not op_mini all"
29+
]
30+
}

‎demo/src/sandboxes/simple-three/public/index.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
6+
<meta name="theme-color" content="#000000" />
7+
<!--
8+
manifest.json provides metadata used when your web app is added to the
9+
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
10+
-->
11+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
12+
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
13+
<!--
14+
Notice the use of %PUBLIC_URL% in the tags above.
15+
It will be replaced with the URL of the `public` folder during the build.
16+
Only files inside the `public` folder can be referenced from the HTML.
17+
18+
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
19+
work correctly both with client-side routing and a non-root public URL.
20+
Learn how to configure a non-root public URL by running `npm run build`.
21+
-->
22+
<title>React App</title>
23+
</head>
24+
25+
<body>
26+
<noscript> You need to enable JavaScript to run this app. </noscript>
27+
<div id="root"></div>
28+
<!--
29+
This HTML file is a template.
30+
If you open it directly in the browser, you will see an empty page.
31+
32+
You can add webfonts, meta tags, or analytics to this file.
33+
The build step will place the bundled scripts into the <body> tag.
34+
35+
To begin the development, run `npm start` or `yarn start`.
36+
To create a production bundle, use `npm run build` or `yarn build`.
37+
-->
38+
</body>
39+
</html>

‎demo/src/sandboxes/simple-three/src/App.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React from 'react'
2+
import './styles.css'
3+
4+
import { Canvas } from '@react-three/fiber'
5+
import { useSpring, animated, Globals } from '@react-spring/three'
6+
7+
export default function Thing() {
8+
const { position } = useSpring({
9+
position: 0,
10+
from: { position: -200 },
11+
config: { mass: 5, tension: 500, friction: 150 },
12+
loop: { reverse: true }
13+
})
14+
15+
return (
16+
<Canvas>
17+
<animated.mesh position={position}>
18+
<boxBufferGeometry attach="geometry" args={[3, 3, 3]} />
19+
<meshNormalMaterial attach="material" />
20+
</animated.mesh>
21+
</Canvas>
22+
)
23+
}

‎demo/src/sandboxes/simple-three/src/index.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React from 'react'
2+
import ReactDOM from 'react-dom'
3+
import App from './App'
4+
import './index.css'
5+
6+
const rootElement = document.getElementById('root')
7+
ReactDOM.render(
8+
<React.StrictMode>
9+
<App />
10+
</React.StrictMode>,
11+
rootElement
12+
)

‎demo/src/sandboxes/simple-three/src/styles.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
* {
2+
box-sizing: border-box;
3+
}
4+
5+
html,
6+
body,
7+
#root {
8+
width: 100%;
9+
height: 100%;
10+
margin: 0;
11+
padding: 0;
12+
}

0 commit comments

Comments
 (0)