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

deprecate bindToCanvas() in favor of <Wrapper>

Browse source
This commit is contained in:
Aria Minaei 2021-07-30 16:31:18 +02:00
parent e108caee93
commit 65463dfdc6
3 changed files with 111 additions and 92 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

95
packages/playground/src/r3f/App.tsx
View file

@ -1,4 +1,4 @@
import {editable as e, bindToCanvas} from '@theatre/plugin-r3f'
import {editable as e, Wrapper} from '@theatre/plugin-r3f'
import {PerspectiveCamera} from '@react-three/drei'
import {getProject} from '@theatre/core'
import * as THREE from 'three'
@ -97,56 +97,57 @@ function App() {
<Canvas
// @ts-ignore
shadowMap
onCreated={bindToCanvas({
sheet: getProject('Example project').sheet('R3F-Canvas'),
})}
>
<ECamera 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"
<Wrapper
getSheet={() => getProject('Example project').sheet('R3F-Canvas')}
>
<ECamera makeDefault uniqueName="Camera" />
<ambientLight intensity={0.4} />
<e.pointLight
position={[-10, -10, 5]}
intensity={2}
color="#ff20f0"
uniqueName="Light 1"
/>
<Plane
<e.pointLight
position={[0, 0.5, -1]}
distance={1}
intensity={2}
color="#e4be00"
rotation-x={-Math.PI / 2}
position-y={1}
scale={[4.2, 0.2, 4]}
uniqueName="plane2"
uniqueName="Light 2"
/>
<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 />
<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 />
</Wrapper>
</Canvas>
</div>
)

85
packages/playground/src/space-exploration/App.tsx
View file

@ -1,5 +1,5 @@
import {editable as e, bindToCanvas} from '@theatre/plugin-r3f'
import {Stars} from '@react-three/drei'
import {editable as e, Wrapper} from '@theatre/plugin-r3f'
import {OrbitControls, Stars} from '@react-three/drei'
import {getProject} from '@theatre/core'
import React, {Suspense} from 'react'
import {Canvas} from '@react-three/fiber'
@ -49,50 +49,47 @@ function App() {
const bg = '#272730'
return (
<div>
<Canvas
dpr={[1.5, 2]}
linear
shadows
onCreated={bindToCanvas({
sheet: getProject('Example project').sheet('R3F-Canvas'),
})}
>
<fog attach="fog" args={[bg, 16, 30]} />
<color attach="background" args={[bg]} />
<ambientLight intensity={0.75} />
<e.perspectiveCamera
uniqueName="Camera"
// @ts-ignore
makeDefault
position={[0, 0, 16]}
fov={75}
<Canvas dpr={[1.5, 2]} linear shadows>
<Wrapper
getSheet={() => getProject('Example project').sheet('R3F-Canvas')}
>
<e.pointLight
uniqueName="Light 1"
intensity={1}
position={[-10, -25, -10]}
<fog attach="fog" args={[bg, 16, 30]} />
<color attach="background" args={[bg]} />
<ambientLight intensity={0.75} />
<e.perspectiveCamera
uniqueName="Camera"
// @ts-ignore
makeDefault
position={[0, 0, 16]}
fov={75}
>
<e.pointLight
uniqueName="Light 1"
intensity={1}
position={[-10, -25, -10]}
/>
<e.spotLight
uniqueName="Light 2"
castShadow
intensity={2.25}
angle={0.2}
penumbra={1}
position={[-25, 20, -15]}
shadow-mapSize={[1024, 1024]}
shadow-bias={-0.0001}
/>
</e.perspectiveCamera>
<Suspense fallback={null}>
<Model url={sceneGLB} />
</Suspense>
<OrbitControls
enablePan={false}
enableZoom={true}
maxPolarAngle={Math.PI / 2}
minPolarAngle={Math.PI / 2}
/>
<e.spotLight
uniqueName="Light 2"
castShadow
intensity={2.25}
angle={0.2}
penumbra={1}
position={[-25, 20, -15]}
shadow-mapSize={[1024, 1024]}
shadow-bias={-0.0001}
/>
</e.perspectiveCamera>
<Suspense fallback={null}>
<Model url={sceneGLB} />
</Suspense>
{/* <OrbitControls
enablePan={false}
enableZoom={true}
maxPolarAngle={Math.PI / 2}
minPolarAngle={Math.PI / 2}
/> */}
<Stars radius={500} depth={50} count={1000} factor={10} />
<Stars radius={500} depth={50} count={1000} factor={10} />
</Wrapper>
</Canvas>
</div>
)

23
packages/plugin-r3f/src/index.tsx
View file

@ -4,11 +4,32 @@ export {default as EditorHelper} from './components/EditorHelper'
export type {EditorHelperProps} from './components/EditorHelper'
export {default as editable} from './components/editable'
export {bindToCanvas} from './store'
export type {EditableState, BindFunction} from './store'
import studio from '@theatre/studio'
import Toolbar from './components/Toolbar/Toolbar'
import {types} from '@theatre/core'
import React, {useLayoutEffect} from 'react'
import {useThree} from '@react-three/fiber'
import type {ISheet} from '@theatre/core'
import {bindToCanvas} from './store'
export const Wrapper: React.FC<{
getSheet: () => ISheet
}> = (props) => {
const {scene, gl} = useThree((s) => ({scene: s.scene, gl: s.gl}))
useLayoutEffect(() => {
const sheet = props.getSheet()
if (!sheet || sheet.type !== 'Theatre_Sheet_PublicAPI') {
throw new Error(
`getSheet() in <Wrapper getSheet={getSheet}> has returned an invalid value`,
)
}
bindToCanvas({sheet})({gl, scene})
}, [scene, gl])
return <>{props.children}</>
}
if (process.env.NODE_ENV === 'development') {
studio.extend({