variablelab/theatre
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix/0.5-compatability-tests (#293)

Browse source 
* Working changes

* Fix window undefined bug by updating lib

* Fix TransformControlsImpl import

* Fix compatibility tests>simple debuggable examples
This commit is contained in:
Elliot 2022-09-13 15:37:39 -04:00 committed by GitHub
parent 494c60d0c3
commit 735bd983a5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
24 changed files with 572 additions and 574 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
.vscode/settings.json vendored
View file

@ -1,11 +1,9 @@
{
"typescript.tsdk": "node_modules/typescript/lib",
"files.exclude": {
"**/node_modules": true,
// "**/.yarn": true,
"**/.cache": true,
"**/.temp": true,
"**/.history": true
"**/.history": true,
"**/.temp": true
},
"search.exclude": {
"**/node_modules": true,

2
compatibility-tests/test-cra-react18/package.json
View file

@ -14,8 +14,8 @@
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"@theatre/core": "^0.0.1-COMPAT.1",
"@theatre/studio": "^0.0.1-COMPAT.1",
"@theatre/r3f": "^0.0.1-COMPAT.1",
"@theatre/studio": "^0.0.1-COMPAT.1",
"react-scripts": "^5.0.1",
"three": ">0.132.0",
"web-vitals": "^1.0.1"

154
compatibility-tests/test-cra-react18/src/App.js
View file

@ -1,154 +0,0 @@
import {getProject} from '@theatre/core'
import * as THREE from 'three'
import React, {useState, useEffect, useRef} from 'react'
import {useFrame, Canvas} from '@react-three/fiber'
import {Shadow, softShadows} from '@react-three/drei'
import studio from '@theatre/studio'
import {editable as e, SheetProvider} from '@theatre/r3f'
import extension from '@theatre/r3f/dist/extension'
if (process.env.NODE_ENV === 'development') {
studio.extend(extension)
studio.initialize()
}
// Soft shadows are expensive, comment and refresh when it's too slow
softShadows()
// credit: https://codesandbox.io/s/camera-pan-nsb7f
function Button() {
const vec = new THREE.Vector3()
const light = useRef(undefined)
const [active, setActive] = useState(false)
const [zoom, set] = useState(true)
useEffect(
() => void (document.body.style.cursor = active ? 'pointer' : 'auto'),
[active],
)
useFrame((state) => {
const step = 0.1
const camera = state.camera
camera.fov = THREE.MathUtils.lerp(camera.fov, zoom ? 10 : 42, step)
camera.position.lerp(
vec.set(zoom ? 25 : 10, zoom ? 1 : 5, zoom ? 0 : 10),
step,
)
state.camera.lookAt(0, 0, 0)
state.camera.updateProjectionMatrix()
light.current.position.lerp(
vec.set(zoom ? 4 : 0, zoom ? 3 : 8, zoom ? 3 : 5),
step,
)
})
return (
<e.mesh
receiveShadow
castShadow
onClick={() => set(!zoom)}
onPointerOver={() => setActive(true)}
onPointerOut={() => setActive(false)}
uniqueName="The Button"
>
<sphereBufferGeometry args={[0.75, 64, 64]} />
<meshPhysicalMaterial
color={active ? 'purple' : '#e7b056'}
clearcoat={1}
clearcoatRoughness={0}
/>
<Shadow
position-y={-0.79}
rotation-x={-Math.PI / 2}
opacity={0.6}
scale={[0.8, 0.8, 1]}
/>
<directionalLight
ref={light}
castShadow
intensity={1.5}
shadow-camera-far={70}
/>
</e.mesh>
)
}
function Plane({color, uniqueName, ...props}) {
return (
<e.mesh receiveShadow castShadow {...props} uniqueName={uniqueName}>
<boxBufferGeometry />
<meshStandardMaterial color={color} />
</e.mesh>
)
}
function App() {
return (
<div>
<Canvas
// @ts-ignore
shadowMap
gl={{preserveDrawingBuffer: true}}
linear
frameloop="demand"
dpr={[1.5, 2]}
>
<SheetProvider
sheet={getProject('Playground - R3F').sheet('R3F-Canvas')}
>
{/* @ts-ignore */}
<e.perspectiveCamera makeDefault uniqueName="Camera" />
<ambientLight intensity={0.4} />
<e.pointLight
position={[-10, -10, 5]}
intensity={2}
color="#ff20f0"
uniqueName="Light 1"
/>
<e.pointLight
position={[0, 0.5, -1]}
distance={1}
intensity={2}
color="#e4be00"
uniqueName="Light 2"
/>
<group position={[0, -0.9, -3]}>
<Plane
color="hotpink"
rotation-x={-Math.PI / 2}
position-z={2}
scale={[4, 20, 0.2]}
uniqueName="plane1"
/>
<Plane
color="#e4be00"
rotation-x={-Math.PI / 2}
position-y={1}
scale={[4.2, 0.2, 4]}
uniqueName="plane2"
/>
<Plane
color="#736fbd"
rotation-x={-Math.PI / 2}
position={[-1.7, 1, 3.5]}
scale={[0.5, 4, 4]}
uniqueName="plane3"
/>
<Plane
color="white"
rotation-x={-Math.PI / 2}
position={[0, 4.5, 3]}
scale={[2, 0.03, 4]}
uniqueName="plane4"
/>
</group>
<Button />
</SheetProvider>
</Canvas>
</div>
)
}
export default App

97
compatibility-tests/test-cra-react18/src/index.js
View file

@ -1,19 +1,92 @@
// import ReactDOM from 'react-dom'
import studio from '@theatre/studio'
import {getProject} from '@theatre/core'
// import React from 'react'
// import App from './App'
import ReactDOM from 'react-dom/client'
import React from 'react'
import {Canvas} from '@react-three/fiber'
import studio from '@theatre/studio'
import {editable as e, SheetProvider} from '@theatre/r3f'
import extension from '@theatre/r3f/dist/extension'
studio.initialize({usePersistentStorage: false})
if (process.env.NODE_ENV === 'development' && typeof window !== 'undefined') {
studio.extend(extension)
studio.initialize({usePersistentStorage: false})
}
// credit: https://codesandbox.io/s/camera-pan-nsb7f
function Plane({color, uniqueName, ...props}) {
return (
<e.mesh {...props} uniqueName={uniqueName}>
<boxBufferGeometry />
<meshStandardMaterial color={color} />
</e.mesh>
)
}
function App() {
return (
<Canvas
gl={{preserveDrawingBuffer: true}}
linear
frameloop="demand"
dpr={[1.5, 2]}
style={{position: 'absolute', top: 0, left: 0}}
>
<SheetProvider sheet={getProject('Playground - R3F').sheet('R3F-Canvas')}>
{/* @ts-ignore */}
<e.orthographicCamera makeDefault uniqueName="Camera" />
<ambientLight intensity={0.4} />
<e.pointLight
position={[-10, -10, 5]}
intensity={2}
color="#ff20f0"
uniqueName="Light 1"
/>
<e.pointLight
position={[0, 0.5, -1]}
distance={1}
intensity={2}
color="#e4be00"
uniqueName="Light 2"
/>
<group position={[0, -0.9, -3]}>
<Plane
color="hotpink"
rotation-x={-Math.PI / 2}
position-z={2}
scale={[4, 20, 0.2]}
uniqueName="plane1"
/>
<Plane
color="#e4be00"
rotation-x={-Math.PI / 2}
position-y={1}
scale={[4.2, 0.2, 4]}
uniqueName="plane2"
/>
<Plane
color="#736fbd"
rotation-x={-Math.PI / 2}
position={[-1.7, 1, 3.5]}
scale={[0.5, 4, 4]}
uniqueName="plane3"
/>
<Plane
color="white"
rotation-x={-Math.PI / 2}
position={[0, 4.5, 3]}
scale={[2, 0.03, 4]}
uniqueName="plane4"
/>
</group>
</SheetProvider>
</Canvas>
)
}
const project = getProject('Project')
const sheet = project.sheet('Sheet')
const obj = sheet.object('Obj', {str: 'some string', num: 0})
// ReactDOM.render(
// <React.StrictMode>
// <App obj={obj} />
// </React.StrictMode>,
// document.getElementById('root'),
// )
const container = document.getElementById('root')
const root = ReactDOM.createRoot(container)
root.render(<App obj={obj}>hi</App>)

5
compatibility-tests/test-next/package.json
View file

@ -7,9 +7,10 @@
},
"dependencies": {
"@theatre/core": "^0.0.1-COMPAT.1",
"@theatre/r3f": "^0.0.1-COMPAT.1",
"@theatre/studio": "^0.0.1-COMPAT.1",
"next": "latest",
"react": "17.0.2",
"react-dom": "17.0.2"
"react": "^18.2.0",
"react-dom": "^18.2.0"
}
}

94
compatibility-tests/test-next/pages/index.js
View file

@ -1,23 +1,91 @@
import Head from 'next/head'
// import ReactDOM from 'react-dom'
import studio from '@theatre/studio'
import {getProject} from '@theatre/core'
// import React from 'react'
// import App from './App'
import React from 'react'
import {Canvas} from '@react-three/fiber'
import studio from '@theatre/studio'
import {editable as e, SheetProvider} from '@theatre/r3f'
import extension from '@theatre/r3f/dist/extension'
studio.initialize({usePersistentStorage: false})
if (process.env.NODE_ENV === 'development' && typeof window !== 'undefined') {
studio.extend(extension)
studio.initialize({usePersistentStorage: false})
}
// credit: https://codesandbox.io/s/camera-pan-nsb7f
function Plane({color, uniqueName, ...props}) {
return (
<e.mesh {...props} uniqueName={uniqueName}>
<boxBufferGeometry />
<meshStandardMaterial color={color} />
</e.mesh>
)
}
function App() {
return (
<Canvas
gl={{preserveDrawingBuffer: true}}
linear
frameloop="demand"
dpr={[1.5, 2]}
style={{position: 'absolute', top: 0, left: 0}}
>
<SheetProvider sheet={getProject('Playground - R3F').sheet('R3F-Canvas')}>
{/* @ts-ignore */}
<e.orthographicCamera makeDefault uniqueName="Camera" />
<ambientLight intensity={0.4} />
<e.pointLight
position={[-10, -10, 5]}
intensity={2}
color="#ff20f0"
uniqueName="Light 1"
/>
<e.pointLight
position={[0, 0.5, -1]}
distance={1}
intensity={2}
color="#e4be00"
uniqueName="Light 2"
/>
<group position={[0, -0.9, -3]}>
<Plane
color="hotpink"
rotation-x={-Math.PI / 2}
position-z={2}
scale={[4, 20, 0.2]}
uniqueName="plane1"
/>
<Plane
color="#e4be00"
rotation-x={-Math.PI / 2}
position-y={1}
scale={[4.2, 0.2, 4]}
uniqueName="plane2"
/>
<Plane
color="#736fbd"
rotation-x={-Math.PI / 2}
position={[-1.7, 1, 3.5]}
scale={[0.5, 4, 4]}
uniqueName="plane3"
/>
<Plane
color="white"
rotation-x={-Math.PI / 2}
position={[0, 4.5, 3]}
scale={[2, 0.03, 4]}
uniqueName="plane4"
/>
</group>
</SheetProvider>
</Canvas>
)
}
const project = getProject('Project')
const sheet = project.sheet('Sheet')
const obj = sheet.object('Obj', {str: 'some string', num: 0})
function App({obj}) {
console.log(obj)
return <div>hi</div>
}
export default function Home() {
return <App obj={obj}>hi</App>
}

2
compatibility-tests/test-parcel1-react17/package.json
View file

@ -4,12 +4,12 @@
"dev": "parcel serve ./index.html"
},
"dependencies": {
"parcel-bundler": "^1.12.5",
"@react-three/drei": "^7.3.1",
"@react-three/fiber": "^7.0.6",
"@theatre/core": "^0.0.1-COMPAT.1",
"@theatre/r3f": "^0.0.1-COMPAT.1",
"@theatre/studio": "^0.0.1-COMPAT.1",
"parcel-bundler": "^1.12.5",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"three": "^0.137.0"

154
compatibility-tests/test-parcel1-react17/src/App.js
View file

@ -1,154 +0,0 @@
import {getProject} from '@theatre/core'
import * as THREE from 'three'
import React, {useState, useEffect, useRef} from 'react'
import {useFrame, Canvas} from '@react-three/fiber'
import {Shadow, softShadows} from '@react-three/drei'
import studio from '@theatre/studio'
import {editable as e, SheetProvider} from '@theatre/r3f'
import extension from '@theatre/r3f/dist/extension'
if (process.env.NODE_ENV === 'development') {
studio.extend(extension)
studio.initialize()
}
// Soft shadows are expensive, comment and refresh when it's too slow
softShadows()
// credit: https://codesandbox.io/s/camera-pan-nsb7f
function Button() {
const vec = new THREE.Vector3()
const light = useRef(undefined)
const [active, setActive] = useState(false)
const [zoom, set] = useState(true)
useEffect(
() => void (document.body.style.cursor = active ? 'pointer' : 'auto'),
[active],
)
useFrame((state) => {
const step = 0.1
const camera = state.camera
camera.fov = THREE.MathUtils.lerp(camera.fov, zoom ? 10 : 42, step)
camera.position.lerp(
vec.set(zoom ? 25 : 10, zoom ? 1 : 5, zoom ? 0 : 10),
step,
)
state.camera.lookAt(0, 0, 0)
state.camera.updateProjectionMatrix()
light.current.position.lerp(
vec.set(zoom ? 4 : 0, zoom ? 3 : 8, zoom ? 3 : 5),
step,
)
})
return (
<e.mesh
receiveShadow
castShadow
onClick={() => set(!zoom)}
onPointerOver={() => setActive(true)}
onPointerOut={() => setActive(false)}
uniqueName="The Button"
>
<sphereBufferGeometry args={[0.75, 64, 64]} />
<meshPhysicalMaterial
color={active ? 'purple' : '#e7b056'}
clearcoat={1}
clearcoatRoughness={0}
/>
<Shadow
position-y={-0.79}
rotation-x={-Math.PI / 2}
opacity={0.6}
scale={[0.8, 0.8, 1]}
/>
<directionalLight
ref={light}
castShadow
intensity={1.5}
shadow-camera-far={70}
/>
</e.mesh>
)
}
function Plane({color, uniqueName, ...props}) {
return (
<e.mesh receiveShadow castShadow {...props} uniqueName={uniqueName}>
<boxBufferGeometry />
<meshStandardMaterial color={color} />
</e.mesh>
)
}
function App() {
return (
<div>
<Canvas
// @ts-ignore
shadowMap
gl={{preserveDrawingBuffer: true}}
linear
frameloop="demand"
dpr={[1.5, 2]}
>
<SheetProvider
sheet={getProject('Playground - R3F').sheet('R3F-Canvas')}
>
{/* @ts-ignore */}
<e.perspectiveCamera makeDefault uniqueName="Camera" />
<ambientLight intensity={0.4} />
<e.pointLight
position={[-10, -10, 5]}
intensity={2}
color="#ff20f0"
uniqueName="Light 1"
/>
<e.pointLight
position={[0, 0.5, -1]}
distance={1}
intensity={2}
color="#e4be00"
uniqueName="Light 2"
/>
<group position={[0, -0.9, -3]}>
<Plane
color="hotpink"
rotation-x={-Math.PI / 2}
position-z={2}
scale={[4, 20, 0.2]}
uniqueName="plane1"
/>
<Plane
color="#e4be00"
rotation-x={-Math.PI / 2}
position-y={1}
scale={[4.2, 0.2, 4]}
uniqueName="plane2"
/>
<Plane
color="#736fbd"
rotation-x={-Math.PI / 2}
position={[-1.7, 1, 3.5]}
scale={[0.5, 4, 4]}
uniqueName="plane3"
/>
<Plane
color="white"
rotation-x={-Math.PI / 2}
position={[0, 4.5, 3]}
scale={[2, 0.03, 4]}
uniqueName="plane4"
/>
</group>
<Button />
</SheetProvider>
</Canvas>
</div>
)
}
export default App

84
compatibility-tests/test-parcel1-react17/src/index.js
View file

@ -1,9 +1,87 @@
import {getProject} from '@theatre/core'
import ReactDOM from 'react-dom'
import '@theatre/studio'
import React from 'react'
import App from './App'
import {Canvas} from '@react-three/fiber'
import studio from '@theatre/studio'
import {editable as e, SheetProvider} from '@theatre/r3f'
import extension from '@theatre/r3f/dist/extension'
console.log('hj')
if (process.env.NODE_ENV === 'development' && typeof window !== 'undefined') {
studio.extend(extension)
studio.initialize({usePersistentStorage: false})
}
// credit: https://codesandbox.io/s/camera-pan-nsb7f
function Plane({color, uniqueName, ...props}) {
return (
<e.mesh {...props} uniqueName={uniqueName}>
<boxBufferGeometry />
<meshStandardMaterial color={color} />
</e.mesh>
)
}
function App() {
return (
<Canvas
gl={{preserveDrawingBuffer: true}}
linear
frameloop="demand"
dpr={[1.5, 2]}
style={{position: 'absolute', top: 0, left: 0}}
>
<SheetProvider sheet={getProject('Playground - R3F').sheet('R3F-Canvas')}>
{/* @ts-ignore */}
<e.orthographicCamera makeDefault uniqueName="Camera" />
<ambientLight intensity={0.4} />
<e.pointLight
position={[-10, -10, 5]}
intensity={2}
color="#ff20f0"
uniqueName="Light 1"
/>
<e.pointLight
position={[0, 0.5, -1]}
distance={1}
intensity={2}
color="#e4be00"
uniqueName="Light 2"
/>
<group position={[0, -0.9, -3]}>
<Plane
color="hotpink"
rotation-x={-Math.PI / 2}
position-z={2}
scale={[4, 20, 0.2]}
uniqueName="plane1"
/>
<Plane
color="#e4be00"
rotation-x={-Math.PI / 2}
position-y={1}
scale={[4.2, 0.2, 4]}
uniqueName="plane2"
/>
<Plane
color="#736fbd"
rotation-x={-Math.PI / 2}
position={[-1.7, 1, 3.5]}
scale={[0.5, 4, 4]}
uniqueName="plane3"
/>
<Plane
color="white"
rotation-x={-Math.PI / 2}
position={[0, 4.5, 3]}
scale={[2, 0.03, 4]}
uniqueName="plane4"
/>
</group>
</SheetProvider>
</Canvas>
)
}
ReactDOM.render(
<React.StrictMode>

5
compatibility-tests/test-parcel1-react18/package.json
View file

@ -4,8 +4,9 @@
"dev": "parcel serve ./index.html"
},
"dependencies": {
"@theatre/core": "0.0.1-COMPAT.1",
"@theatre/studio": "0.0.1-COMPAT.1",
"@theatre/core": "^0.0.1-COMPAT.1",
"@theatre/r3f": "^0.0.1-COMPAT.1",
"@theatre/studio": "^0.0.1-COMPAT.1",
"parcel-bundler": "^1.12.5",
"react": "^18.1.0",
"react-dom": "^18.1.0"

6
compatibility-tests/test-parcel1-react18/src/App.js
View file

@ -1,6 +0,0 @@
import React from 'react'
export default function App({obj}) {
console.log(obj)
return <div>hi</div>
}

97
compatibility-tests/test-parcel1-react18/src/index.js
View file

@ -1,19 +1,92 @@
// import ReactDOM from 'react-dom'
import studio from '@theatre/studio'
import {getProject} from '@theatre/core'
// import React from 'react'
// import App from './App'
import ReactDOM from 'react-dom/client'
import React from 'react'
import {Canvas} from '@react-three/fiber'
import studio from '@theatre/studio'
import {editable as e, SheetProvider} from '@theatre/r3f'
import extension from '@theatre/r3f/dist/extension'
studio.initialize({usePersistentStorage: false})
if (process.env.NODE_ENV === 'development' && typeof window !== 'undefined') {
studio.extend(extension)
studio.initialize({usePersistentStorage: false})
}
// credit: https://codesandbox.io/s/camera-pan-nsb7f
function Plane({color, uniqueName, ...props}) {
return (
<e.mesh {...props} uniqueName={uniqueName}>
<boxBufferGeometry />
<meshStandardMaterial color={color} />
</e.mesh>
)
}
function App() {
return (
<Canvas
gl={{preserveDrawingBuffer: true}}
linear
frameloop="demand"
dpr={[1.5, 2]}
style={{position: 'absolute', top: 0, left: 0}}
>
<SheetProvider sheet={getProject('Playground - R3F').sheet('R3F-Canvas')}>
{/* @ts-ignore */}
<e.orthographicCamera makeDefault uniqueName="Camera" />
<ambientLight intensity={0.4} />
<e.pointLight
position={[-10, -10, 5]}
intensity={2}
color="#ff20f0"
uniqueName="Light 1"
/>
<e.pointLight
position={[0, 0.5, -1]}
distance={1}
intensity={2}
color="#e4be00"
uniqueName="Light 2"
/>
<group position={[0, -0.9, -3]}>
<Plane
color="hotpink"
rotation-x={-Math.PI / 2}
position-z={2}
scale={[4, 20, 0.2]}
uniqueName="plane1"
/>
<Plane
color="#e4be00"
rotation-x={-Math.PI / 2}
position-y={1}
scale={[4.2, 0.2, 4]}
uniqueName="plane2"
/>
<Plane
color="#736fbd"
rotation-x={-Math.PI / 2}
position={[-1.7, 1, 3.5]}
scale={[0.5, 4, 4]}
uniqueName="plane3"
/>
<Plane
color="white"
rotation-x={-Math.PI / 2}
position={[0, 4.5, 3]}
scale={[2, 0.03, 4]}
uniqueName="plane4"
/>
</group>
</SheetProvider>
</Canvas>
)
}
const project = getProject('Project')
const sheet = project.sheet('Sheet')
const obj = sheet.object('Obj', {str: 'some string', num: 0})
// ReactDOM.render(
// <React.StrictMode>
// <App obj={obj} />
// </React.StrictMode>,
// document.getElementById('root'),
// )
const container = document.getElementById('root')
const root = ReactDOM.createRoot(container)
root.render(<App obj={obj}>hi</App>)

5
compatibility-tests/test-parcel2-react18/package.json
View file

@ -4,8 +4,9 @@
"dev": "parcel serve ./index.html"
},
"dependencies": {
"@theatre/core": "0.0.1-COMPAT.1",
"@theatre/studio": "0.0.1-COMPAT.1",
"@theatre/core": "^0.0.1-COMPAT.1",
"@theatre/r3f": "^0.0.1-COMPAT.1",
"@theatre/studio": "^0.0.1-COMPAT.1",
"parcel": "^2.5.0",
"react": "^18.1.0",
"react-dom": "^18.1.0"

6
compatibility-tests/test-parcel2-react18/src/App.js
View file

@ -1,6 +0,0 @@
import React from 'react'
export default function App({obj}) {
console.log(obj)
return <div>hi</div>
}

97
compatibility-tests/test-parcel2-react18/src/index.js
View file

@ -1,19 +1,92 @@
// import ReactDOM from 'react-dom'
import studio from '@theatre/studio'
import {getProject} from '@theatre/core'
// import React from 'react'
// import App from './App'
import ReactDOM from 'react-dom/client'
import React from 'react'
import {Canvas} from '@react-three/fiber'
import studio from '@theatre/studio'
import {editable as e, SheetProvider} from '@theatre/r3f'
import extension from '@theatre/r3f/dist/extension'
studio.initialize({usePersistentStorage: false})
if (process.env.NODE_ENV === 'development' && typeof window !== 'undefined') {
studio.extend(extension)
studio.initialize({usePersistentStorage: false})
}
// credit: https://codesandbox.io/s/camera-pan-nsb7f
function Plane({color, uniqueName, ...props}) {
return (
<e.mesh {...props} uniqueName={uniqueName}>
<boxBufferGeometry />
<meshStandardMaterial color={color} />
</e.mesh>
)
}
function App() {
return (
<Canvas
gl={{preserveDrawingBuffer: true}}
linear
frameloop="demand"
dpr={[1.5, 2]}
style={{position: 'absolute', top: 0, left: 0}}
>
<SheetProvider sheet={getProject('Playground - R3F').sheet('R3F-Canvas')}>
{/* @ts-ignore */}
<e.orthographicCamera makeDefault uniqueName="Camera" />
<ambientLight intensity={0.4} />
<e.pointLight
position={[-10, -10, 5]}
intensity={2}
color="#ff20f0"
uniqueName="Light 1"
/>
<e.pointLight
position={[0, 0.5, -1]}
distance={1}
intensity={2}
color="#e4be00"
uniqueName="Light 2"
/>
<group position={[0, -0.9, -3]}>
<Plane
color="hotpink"
rotation-x={-Math.PI / 2}
position-z={2}
scale={[4, 20, 0.2]}
uniqueName="plane1"
/>
<Plane
color="#e4be00"
rotation-x={-Math.PI / 2}
position-y={1}
scale={[4.2, 0.2, 4]}
uniqueName="plane2"
/>
<Plane
color="#736fbd"
rotation-x={-Math.PI / 2}
position={[-1.7, 1, 3.5]}
scale={[0.5, 4, 4]}
uniqueName="plane3"
/>
<Plane
color="white"
rotation-x={-Math.PI / 2}
position={[0, 4.5, 3]}
scale={[2, 0.03, 4]}
uniqueName="plane4"
/>
</group>
</SheetProvider>
</Canvas>
)
}
const project = getProject('Project')
const sheet = project.sheet('Sheet')
const obj = sheet.object('Obj', {str: 'some string', num: 0})
// ReactDOM.render(
// <React.StrictMode>
// <App obj={obj} />
// </React.StrictMode>,
// document.getElementById('root'),
// )
const container = document.getElementById('root')
const root = ReactDOM.createRoot(container)
root.render(<App obj={obj}>hi</App>)

154
compatibility-tests/test-vite-react18/src/App.tsx
View file

@ -1,154 +0,0 @@
import {getProject} from '@theatre/core'
import * as THREE from 'three'
import React, {useState, useEffect, useRef} from 'react'
import {useFrame, Canvas} from '@react-three/fiber'
import {Shadow, softShadows} from '@react-three/drei'
import studio from '@theatre/studio'
import {editable as e, SheetProvider} from '@theatre/r3f'
import extension from '@theatre/r3f/dist/extension'
if (process.env.NODE_ENV === 'development') {
studio.extend(extension)
studio.initialize()
}
// Soft shadows are expensive, comment and refresh when it's too slow
softShadows()
// credit: https://codesandbox.io/s/camera-pan-nsb7f
function Button() {
const vec = new THREE.Vector3()
const light = useRef(undefined)
const [active, setActive] = useState(false)
const [zoom, set] = useState(true)
useEffect(
() => void (document.body.style.cursor = active ? 'pointer' : 'auto'),
[active],
)
useFrame((state) => {
const step = 0.1
const camera = state.camera
camera.fov = THREE.MathUtils.lerp(camera.fov, zoom ? 10 : 42, step)
camera.position.lerp(
vec.set(zoom ? 25 : 10, zoom ? 1 : 5, zoom ? 0 : 10),
step,
)
state.camera.lookAt(0, 0, 0)
state.camera.updateProjectionMatrix()
light.current.position.lerp(
vec.set(zoom ? 4 : 0, zoom ? 3 : 8, zoom ? 3 : 5),
step,
)
})
return (
<e.mesh
receiveShadow
castShadow
onClick={() => set(!zoom)}
onPointerOver={() => setActive(true)}
onPointerOut={() => setActive(false)}
uniqueName="The Button"
>
<sphereBufferGeometry args={[0.75, 64, 64]} />
<meshPhysicalMaterial
color={active ? 'purple' : '#e7b056'}
clearcoat={1}
clearcoatRoughness={0}
/>
<Shadow
position-y={-0.79}
rotation-x={-Math.PI / 2}
opacity={0.6}
scale={[0.8, 0.8, 1]}
/>
<directionalLight
ref={light}
castShadow
intensity={1.5}
shadow-camera-far={70}
/>
</e.mesh>
)
}
function Plane({color, uniqueName, ...props}) {
return (
<e.mesh receiveShadow castShadow {...props} uniqueName={uniqueName}>
<boxBufferGeometry />
<meshStandardMaterial color={color} />
</e.mesh>
)
}
function App() {
return (
<div>
<Canvas
// @ts-ignore
shadowMap
gl={{preserveDrawingBuffer: true}}
linear
frameloop="demand"
dpr={[1.5, 2]}
>
<SheetProvider
sheet={getProject('Playground - R3F').sheet('R3F-Canvas')}
>
{/* @ts-ignore */}
<e.perspectiveCamera makeDefault uniqueName="Camera" />
<ambientLight intensity={0.4} />
<e.pointLight
position={[-10, -10, 5]}
intensity={2}
color="#ff20f0"
uniqueName="Light 1"
/>
<e.pointLight
position={[0, 0.5, -1]}
distance={1}
intensity={2}
color="#e4be00"
uniqueName="Light 2"
/>
<group position={[0, -0.9, -3]}>
<Plane
color="hotpink"
rotation-x={-Math.PI / 2}
position-z={2}
scale={[4, 20, 0.2]}
uniqueName="plane1"
/>
<Plane
color="#e4be00"
rotation-x={-Math.PI / 2}
position-y={1}
scale={[4.2, 0.2, 4]}
uniqueName="plane2"
/>
<Plane
color="#736fbd"
rotation-x={-Math.PI / 2}
position={[-1.7, 1, 3.5]}
scale={[0.5, 4, 4]}
uniqueName="plane3"
/>
<Plane
color="white"
rotation-x={-Math.PI / 2}
position={[0, 4.5, 3]}
scale={[2, 0.03, 4]}
uniqueName="plane4"
/>
</group>
<Button />
</SheetProvider>
</Canvas>
</div>
)
}
export default App

99
compatibility-tests/test-vite-react18/src/main.tsx
View file

@ -1,11 +1,92 @@
import ReactDOM from 'react-dom'
import '@theatre/studio'
import {getProject} from '@theatre/core'
import ReactDOM from 'react-dom/client'
import React from 'react'
import App from './App'
import {Canvas} from '@react-three/fiber'
import studio from '@theatre/studio'
import {editable as e, SheetProvider} from '@theatre/r3f'
import extension from '@theatre/r3f/dist/extension'
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root'),
)
if (process.env.NODE_ENV === 'development' && typeof window !== 'undefined') {
studio.extend(extension)
studio.initialize({usePersistentStorage: false})
}
// credit: https://codesandbox.io/s/camera-pan-nsb7f
function Plane({color, uniqueName, ...props}: any) {
return (
<e.mesh {...props} uniqueName={uniqueName}>
<boxBufferGeometry />
<meshStandardMaterial color={color} />
</e.mesh>
)
}
function App() {
return (
<Canvas
gl={{preserveDrawingBuffer: true}}
linear
frameloop="demand"
dpr={[1.5, 2]}
style={{position: 'absolute', top: 0, left: 0}}
>
<SheetProvider sheet={getProject('Playground - R3F').sheet('R3F-Canvas')}>
{/* @ts-ignore */}
<e.orthographicCamera makeDefault uniqueName="Camera" />
<ambientLight intensity={0.4} />
<e.pointLight
position={[-10, -10, 5]}
intensity={2}
color="#ff20f0"
uniqueName="Light 1"
/>
<e.pointLight
position={[0, 0.5, -1]}
distance={1}
intensity={2}
color="#e4be00"
uniqueName="Light 2"
/>
<group position={[0, -0.9, -3]}>
<Plane
color="hotpink"
rotation-x={-Math.PI / 2}
position-z={2}
scale={[4, 20, 0.2]}
uniqueName="plane1"
/>
<Plane
color="#e4be00"
rotation-x={-Math.PI / 2}
position-y={1}
scale={[4.2, 0.2, 4]}
uniqueName="plane2"
/>
<Plane
color="#736fbd"
rotation-x={-Math.PI / 2}
position={[-1.7, 1, 3.5]}
scale={[0.5, 4, 4]}
uniqueName="plane3"
/>
<Plane
color="white"
rotation-x={-Math.PI / 2}
position={[0, 4.5, 3]}
scale={[2, 0.03, 4]}
uniqueName="plane4"
/>
</group>
</SheetProvider>
</Canvas>
)
}
const project = getProject('Project')
const sheet = project.sheet('Sheet')
const obj = sheet.object('Obj', {str: 'some string', num: 0})
const container = document.getElementById('root')
const root = ReactDOM.createRoot(container)
root.render(<App obj={obj}>hi</App>)

18
packages/r3f/devEnv/bundle.ts
View file

@ -41,7 +41,14 @@ async function createBundles() {
metafile: true,
}
const result = await build(esbuildConfig)
const result = await Promise.all([
build(esbuildConfig),
build({
...esbuildConfig,
outfile: path.join(__dirname, '../dist/index.esm.js'),
format: 'esm',
}),
])
}
/**
@ -91,6 +98,13 @@ async function createBundles() {
metafile: true,
}
const result = await build(esbuildConfig)
const result = await Promise.all([
build(esbuildConfig),
build({
...esbuildConfig,
outfile: path.join(__dirname, '../dist/extension/index.esm.js'),
format: 'esm',
}),
])
}
}

14
packages/r3f/package.json
View file

@ -20,14 +20,20 @@
"directory": "packages/r3f"
},
"main": "dist/index.js",
"module": "dist/index.js",
"module": "dist/index.esm.js",
"sideEffects": false,
"files": [
"dist/**/*"
],
"exports": {
".": "./dist/index.js",
"./dist/extension": "./dist/extension/index.js"
".": {
"import": "./dist/index.esm.js",
"require": "./dist/index.js"
},
"./dist/extension": {
"import": "./dist/extension/index.esm.js",
"require": "./dist/extension/index.js"
}
},
"scripts": {
"prepack": "yarn run build",
@ -56,7 +62,7 @@
"react-shadow": "^19.0.3",
"react-use-measure": "^2.0.4",
"reakit": "^1.3.8",
"styled-components": "^5.3.0",
"styled-components": "^5.3.5",
"typescript": "^4.4.2",
"zustand": "^3.5.1"
},

3
packages/r3f/src/extension/components/ReferenceWindow/ReferenceWindow.tsx
View file

@ -99,7 +99,8 @@ const ReferenceWindow: VFC<ReferenceWindowProps> = ({
const [width, height] = useMemo(() => {
if (!gl) return [0, 0]
const aspectRatio = origWidth / origHeight
const aspectRatio =
origWidth / (origHeight || Number.EPSILON) || Number.EPSILON
const width = Math.min(aspectRatio * maxHeight, maxWidth)

6
packages/r3f/src/extension/components/TransformControls.tsx
View file

@ -2,7 +2,7 @@ import type {Object3D, Event} from 'three'
import React, {forwardRef, useLayoutEffect, useEffect, useMemo} from 'react'
import type {ReactThreeFiber, Overwrite} from '@react-three/fiber'
import {useThree} from '@react-three/fiber'
import {TransformControls as TransformControlsImpl} from 'three/examples/jsm/controls/TransformControls'
import {TransformControls as TransformControlsImpl} from 'three-stdlib'
import type {OrbitControls} from 'three-stdlib'
type R3fTransformControls = Overwrite<
@ -18,6 +18,10 @@ export interface TransformControlsProps extends R3fTransformControls {
orbitControlsRef?: React.MutableRefObject<OrbitControls | null>
onObjectChange?: (event: Event) => void
onDraggingChange?: (event: Event) => void
// not a complete list of props that transform controls can take
mode: TransformControlsImpl['mode']
space: TransformControlsImpl['space']
}
const TransformControls = forwardRef(

2
theatre/package.json
View file

@ -85,7 +85,7 @@
"rollup": "^2.56.3",
"rollup-plugin-dts": "^4.0.0",
"shallowequal": "^1.1.0",
"styled-components": "^5.3.0",
"styled-components": "^5.3.5",
"svg-inline-loader": "^0.8.2",
"timing-function": "^0.2.3",
"ts-node": "^10.0.0",

4
theatre/studio/src/Studio.ts
View file

@ -25,7 +25,7 @@ import checkForUpdates from './checkForUpdates'
export type CoreExports = typeof _coreExports
let {default: UIConstructor} =
const UIConstructorModule =
typeof window !== 'undefined' ? require('./UI') : null
const STUDIO_NOT_INITIALIZED_MESSAGE = `You seem to have imported '@theatre/studio' but haven't initialized it. You can initialize the studio by:
@ -99,7 +99,7 @@ export class Studio {
this.publicApi = new TheatreStudio(this)
if (process.env.NODE_ENV !== 'test' && typeof window !== 'undefined') {
this.ui = new UIConstructor(this)
this.ui = new UIConstructorModule.default(this)
}
this._attachToIncomingProjects()

32
yarn.lock
View file

@ -5719,19 +5719,19 @@ __metadata:
languageName: node
linkType: hard
"@emotion/is-prop-valid@npm:^0.8.8":
version: 0.8.8
resolution: "@emotion/is-prop-valid@npm:0.8.8"
"@emotion/is-prop-valid@npm:^1.1.0":
version: 1.2.0
resolution: "@emotion/is-prop-valid@npm:1.2.0"
dependencies:
"@emotion/memoize": 0.7.4
checksum: bb7ec6d48c572c540e24e47cc94fc2f8dec2d6a342ae97bc9c8b6388d9b8d283862672172a1bb62d335c02662afe6291e10c71e9b8642664a8b43416cdceffac
"@emotion/memoize": ^0.8.0
checksum: cc7a19850a4c5b24f1514665289442c8c641709e6f7711067ad550e05df331da0692a16148e85eda6f47e31b3261b64d74c5e25194d053223be16231f969d633
languageName: node
linkType: hard
"@emotion/memoize@npm:0.7.4":
version: 0.7.4
resolution: "@emotion/memoize@npm:0.7.4"
checksum: 4e3920d4ec95995657a37beb43d3f4b7d89fed6caa2b173a4c04d10482d089d5c3ea50bbc96618d918b020f26ed6e9c4026bbd45433566576c1f7b056c3271dc
"@emotion/memoize@npm:^0.8.0":
version: 0.8.0
resolution: "@emotion/memoize@npm:0.8.0"
checksum: c87bb110b829edd8e1c13b90a6bc37cebc39af29c7599a1e66a48e06f9bec43e8e53495ba86278cc52e7589549492c8dfdc81d19f4fdec0cee6ba13d2ad2c928
languageName: node
linkType: hard
@ -7548,7 +7548,7 @@ __metadata:
react-shadow: ^19.0.3
react-use-measure: ^2.0.4
reakit: ^1.3.8
styled-components: ^5.3.0
styled-components: ^5.3.5
typescript: ^4.4.2
zustand: ^3.5.1
peerDependencies:
@ -29125,13 +29125,13 @@ fsevents@^1.2.7:
languageName: node
linkType: hard
"styled-components@npm:^5.3.0":
version: 5.3.0
resolution: "styled-components@npm:5.3.0"
"styled-components@npm:^5.3.5":
version: 5.3.5
resolution: "styled-components@npm:5.3.5"
dependencies:
"@babel/helper-module-imports": ^7.0.0
"@babel/traverse": ^7.4.5
"@emotion/is-prop-valid": ^0.8.8
"@emotion/is-prop-valid": ^1.1.0
"@emotion/stylis": ^0.8.4
"@emotion/unitless": ^0.7.4
babel-plugin-styled-components: ">= 1.12.0"
@ -29143,7 +29143,7 @@ fsevents@^1.2.7:
react: ">= 16.8.0"
react-dom: ">= 16.8.0"
react-is: ">= 16.8.0"
checksum: 19792fc00da531a083963c3679429dc739e03cb1ca7af2adf0317b25fcaf23655b8f37f8595a210be26003aa5a143003c6dc66ef80c545da85447277a4985bd1
checksum: 05a664dfe423c2906959a0f3f47f9b1ad630e493eb2e06deea0dc0906af33ba5ca17277b98948a6c9642e73894d6533391aebf45576489f5afe920c974e9f8eb
languageName: node
linkType: hard
@ -29697,7 +29697,7 @@ fsevents@^1.2.7:
rollup: ^2.56.3
rollup-plugin-dts: ^4.0.0
shallowequal: ^1.1.0
styled-components: ^5.3.0
styled-components: ^5.3.5
svg-inline-loader: ^0.8.2
timing-function: ^0.2.3
ts-node: ^10.0.0