Fix/0.5-compatability-tests (#293)
* Working changes * Fix window undefined bug by updating lib * Fix TransformControlsImpl import * Fix compatibility tests>simple debuggable examples
This commit is contained in:
Elliot
GitHub
parent
494c60d0c3
commit
735bd983a5
24 changed files with 572 additions and 574 deletions
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -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>)
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -1,6 +0,0 @@
|
|||
import React from 'react'
|
||||
|
||||
export default function App({obj}) {
|
||||
console.log(obj)
|
||||
return <div>hi</div>
|
||||
}
|
||||
|
|
@ -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>)
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -1,6 +0,0 @@
|
|||
import React from 'react'
|
||||
|
||||
export default function App({obj}) {
|
||||
console.log(obj)
|
||||
return <div>hi</div>
|
||||
}
|
||||
|
|
@ -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>)
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -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>)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue