Update compat tests to use THREE.r155
This commit is contained in:
parent
4fefee863e
commit
f612108e18
70 changed files with 534 additions and 374 deletions
4
compat-tests/fixtures/r3f-react18/package/.gitignore
vendored
Normal file
4
compat-tests/fixtures/r3f-react18/package/.gitignore
vendored
Normal file
|
@ -0,0 +1,4 @@
|
|||
/.parcel-cache
|
||||
/.cache
|
||||
/dist
|
||||
/package-lock.json
|
13
compat-tests/fixtures/r3f-react18/package/index.html
Normal file
13
compat-tests/fixtures/r3f-react18/package/index.html
Normal file
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Theatre.js Example - DOM</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="./src/index.js"></script>
|
||||
</body>
|
||||
</html>
|
19
compat-tests/fixtures/r3f-react18/package/package.json
Normal file
19
compat-tests/fixtures/r3f-react18/package/package.json
Normal file
|
@ -0,0 +1,19 @@
|
|||
{
|
||||
"scripts": {
|
||||
"dev": "parcel serve ./index.html",
|
||||
"build": "parcel build ./index.html",
|
||||
"start": "serve dist"
|
||||
},
|
||||
"dependencies": {
|
||||
"@react-three/drei": "^9.80.1",
|
||||
"@react-three/fiber": "^8.13.6",
|
||||
"three": "^0.155.0",
|
||||
"@theatre/core": "0.0.1-COMPAT.1",
|
||||
"@theatre/r3f": "0.0.1-COMPAT.1",
|
||||
"@theatre/studio": "0.0.1-COMPAT.1",
|
||||
"parcel": "^2.9.3",
|
||||
"react": "^18.1.0",
|
||||
"react-dom": "^18.1.0",
|
||||
"serve": "14.2.0"
|
||||
}
|
||||
}
|
102
compat-tests/fixtures/r3f-react18/package/src/App/App.tsx
Normal file
102
compat-tests/fixtures/r3f-react18/package/src/App/App.tsx
Normal file
|
@ -0,0 +1,102 @@
|
|||
import {getProject} from '@theatre/core'
|
||||
import React, {useEffect, useRef} from 'react'
|
||||
import {Canvas} from '@react-three/fiber'
|
||||
import {editable as e, SheetProvider, PerspectiveCamera} from '@theatre/r3f'
|
||||
import state from './state.json'
|
||||
|
||||
// credit: https://codesandbox.io/s/camera-pan-nsb7f
|
||||
|
||||
function Plane({color, theatreKey, ...props}: any) {
|
||||
return (
|
||||
<e.mesh {...props} theatreKey={theatreKey}>
|
||||
<boxGeometry />
|
||||
<meshStandardMaterial color={color} />
|
||||
</e.mesh>
|
||||
)
|
||||
}
|
||||
|
||||
export default function App() {
|
||||
const light2Ref = useRef<any>()
|
||||
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
if (!light2Ref.current) return
|
||||
|
||||
clearInterval(interval)
|
||||
|
||||
const intensityInStateJson = 3
|
||||
const currentIntensity = light2Ref.current.intensity
|
||||
if (currentIntensity !== intensityInStateJson) {
|
||||
console.error(`Test failed: light2.intensity is ${currentIntensity}`)
|
||||
} else {
|
||||
console.log(`Test passed: light2.intensity is ${intensityInStateJson}`)
|
||||
}
|
||||
}, 50)
|
||||
// see the note on <e.pointLight theatreKey="Light 2" /> below to understand why we're doing this
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<Canvas
|
||||
gl={{preserveDrawingBuffer: true}}
|
||||
linear
|
||||
frameloop="demand"
|
||||
dpr={[1.5, 2]}
|
||||
style={{position: 'absolute', top: 0, left: 0}}
|
||||
>
|
||||
<SheetProvider
|
||||
sheet={getProject('Playground - R3F', {state}).sheet('R3F-Canvas')}
|
||||
>
|
||||
{/* @ts-ignore */}
|
||||
<PerspectiveCamera makeDefault theatreKey="Camera" />
|
||||
<ambientLight intensity={0.4} />
|
||||
<e.pointLight
|
||||
position={[-10, -10, 5]}
|
||||
intensity={2}
|
||||
color="#ff20f0"
|
||||
theatreKey="Light 1"
|
||||
/>
|
||||
<e.pointLight
|
||||
position={[0, 0.5, -1]}
|
||||
distance={1}
|
||||
// the intensity is statically set to 2, but in the state.json file we'll set it to 3,
|
||||
// and we'll use that as a test to make sure the state is being loaded correctly
|
||||
intensity={2}
|
||||
color="#e4be00"
|
||||
theatreKey="Light 2"
|
||||
ref={light2Ref}
|
||||
/>
|
||||
|
||||
<group position={[0, -0.9, -3]}>
|
||||
<Plane
|
||||
color="hotpink"
|
||||
rotation-x={-Math.PI / 2}
|
||||
position-z={2}
|
||||
scale={[4, 20, 0.2]}
|
||||
theatreKey="plane1"
|
||||
/>
|
||||
<Plane
|
||||
color="#e4be00"
|
||||
rotation-x={-Math.PI / 2}
|
||||
position-y={1}
|
||||
scale={[4.2, 0.2, 4]}
|
||||
theatreKey="plane2"
|
||||
/>
|
||||
<Plane
|
||||
color="#736fbd"
|
||||
rotation-x={-Math.PI / 2}
|
||||
position={[-1.7, 1, 3.5]}
|
||||
scale={[0.5, 4, 4]}
|
||||
theatreKey="plane3"
|
||||
/>
|
||||
<Plane
|
||||
color="white"
|
||||
rotation-x={-Math.PI / 2}
|
||||
position={[0, 4.5, 3]}
|
||||
scale={[2, 0.03, 4]}
|
||||
theatreKey="plane4"
|
||||
/>
|
||||
</group>
|
||||
</SheetProvider>
|
||||
</Canvas>
|
||||
)
|
||||
}
|
19
compat-tests/fixtures/r3f-react18/package/src/App/state.json
Normal file
19
compat-tests/fixtures/r3f-react18/package/src/App/state.json
Normal file
|
@ -0,0 +1,19 @@
|
|||
{
|
||||
"sheetsById": {
|
||||
"R3F-Canvas": {
|
||||
"staticOverrides": {
|
||||
"byObject": {
|
||||
"Light 2": {
|
||||
"intensity": 3
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"definitionVersion": "0.4.0",
|
||||
"revisionHistory": [
|
||||
"jVNB3VWU34BIQK7M",
|
||||
"-NXkC2GceSVBoVqa",
|
||||
"Bw7ng1kdcWmMO5DN"
|
||||
]
|
||||
}
|
13
compat-tests/fixtures/r3f-react18/package/src/index.js
Normal file
13
compat-tests/fixtures/r3f-react18/package/src/index.js
Normal file
|
@ -0,0 +1,13 @@
|
|||
import ReactDOM from 'react-dom/client'
|
||||
import studio from '@theatre/studio'
|
||||
import extension from '@theatre/r3f/dist/extension'
|
||||
import App from './App/App'
|
||||
|
||||
if (process.env.NODE_ENV === 'development' && typeof window !== 'undefined') {
|
||||
studio.extend(extension)
|
||||
studio.initialize({usePersistentStorage: false})
|
||||
}
|
||||
|
||||
const container = document.getElementById('root')
|
||||
const root = ReactDOM.createRoot(container)
|
||||
root.render(<App />)
|
5
compat-tests/fixtures/r3f-react18/package/tsconfig.json
Normal file
5
compat-tests/fixtures/r3f-react18/package/tsconfig.json
Normal file
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"jsx": "react"
|
||||
}
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue