89 lines
2.1 KiB
TypeScript
89 lines
2.1 KiB
TypeScript
|
import {editable as e, SheetProvider} from '@theatre/r3f'
|
||
|
|
import {getProject} from '@theatre/core'
|
||
|
|
import React, {useEffect, useState} from 'react'
|
||
|
|
import {Canvas} from '@react-three/fiber'
|
||
|
|
import {PerspectiveCamera} from '@react-three/drei'
|
||
|
|
import {useExtensionButton} from '../../shared/utils/useExtensionButton'
|
||
|
|
|
||
|
|
document.body.style.backgroundColor = '#171717'
|
||
|
|
|
||
|
|
const EditableCamera = e(PerspectiveCamera, 'perspectiveCamera')
|
||
|
|
|
||
|
|
function App() {
|
||
|
|
const project = getProject('R3F Hot Reload Test')
|
||
|
|
const sheet = project.sheet('Scene')
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
height: '100vh',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Canvas
|
||
|
|
dpr={[1.5, 2]}
|
||
|
|
linear
|
||
|
|
shadows
|
||
|
|
gl={{preserveDrawingBuffer: true}}
|
||
|
|
frameloop="demand"
|
||
|
|
>
|
||
|
|
<SheetProvider sheet={sheet}>
|
||
|
|
<EditableCamera
|
||
|
|
theatreKey="Camera"
|
||
|
|
makeDefault
|
||
|
|
position={[0, 0, 16]}
|
||
|
|
fov={75}
|
||
|
|
>
|
||
|
|
<Scene />
|
||
|
|
</EditableCamera>
|
||
|
|
</SheetProvider>
|
||
|
|
</Canvas>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
// initial config of "Cube 1"
|
||
|
|
const cube1Config1 = {a: 1}
|
||
|
|
// we change the default value of a, and add a new prop
|
||
|
|
const cube1Config2 = {a: 2, b: 2}
|
||
|
|
// we re-use the previous config
|
||
|
|
const cube1Config3 = cube1Config2
|
||
|
|
|
||
|
|
function Scene() {
|
||
|
|
const [state, setState] = useState(1)
|
||
|
|
|
||
|
|
useExtensionButton('Step forward', () => {
|
||
|
|
setState((s) => s + 1)
|
||
|
|
})
|
||
|
|
|
||
|
|
useEffect(() => {}, [])
|
||
|
|
|
||
|
|
if (state === 1) {
|
||
|
|
return (
|
||
|
|
<e.mesh theatreKey="Cube 1" additionalProps={cube1Config1}>
|
||
|
|
<boxGeometry args={[10, 10, 10]} />
|
||
|
|
</e.mesh>
|
||
|
|
)
|
||
|
|
} else if (state === 2) {
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<e.mesh theatreKey="Cube 1" additionalProps={cube1Config2}>
|
||
|
|
<boxGeometry args={[10, 10, 10]} />
|
||
|
|
</e.mesh>
|
||
|
|
<e.mesh theatreKey="Cube 2">
|
||
|
|
<boxGeometry args={[20, 20, 10]} />
|
||
|
|
</e.mesh>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
} else if (state === 3) {
|
||
|
|
return (
|
||
|
|
<e.mesh theatreKey="Cube 1" additionalProps={cube1Config3}>
|
||
|
|
<boxGeometry args={[10, 10, 10]} />
|
||
|
|
</e.mesh>
|
||
|
|
)
|
||
|
|
} else {
|
||
|
|
return null
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export default App
|