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

Replace uniqueName with theatreKey (#285)

Browse source
This commit is contained in:
Andrew Prifer 2022-09-14 19:36:49 +07:00 committed by GitHub
parent ce79d3cd95
commit 8680f9d89e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 111 additions and 111 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -13,9 +13,9 @@ if (process.env.NODE_ENV === 'development' && typeof window !== 'undefined') {
// credit: https://codesandbox.io/s/camera-pan-nsb7f // credit: https://codesandbox.io/s/camera-pan-nsb7f
function Plane({color, uniqueName, ...props}) { function Plane({color, theatreKey, ...props}) {
return ( return (
<e.mesh {...props} uniqueName={uniqueName}> <e.mesh {...props} theatreKey={theatreKey}>
<boxBufferGeometry /> <boxBufferGeometry />
<meshStandardMaterial color={color} /> <meshStandardMaterial color={color} />
</e.mesh> </e.mesh>
@ -33,20 +33,20 @@ function App() {
> >
<SheetProvider sheet={getProject('Playground - R3F').sheet('R3F-Canvas')}> <SheetProvider sheet={getProject('Playground - R3F').sheet('R3F-Canvas')}>
{/* @ts-ignore */} {/* @ts-ignore */}
<e.orthographicCamera makeDefault uniqueName="Camera" /> <e.orthographicCamera makeDefault theatreKey="Camera" />
<ambientLight intensity={0.4} /> <ambientLight intensity={0.4} />
<e.pointLight <e.pointLight
position={[-10, -10, 5]} position={[-10, -10, 5]}
intensity={2} intensity={2}
color="#ff20f0" color="#ff20f0"
uniqueName="Light 1" theatreKey="Light 1"
/> />
<e.pointLight <e.pointLight
position={[0, 0.5, -1]} position={[0, 0.5, -1]}
distance={1} distance={1}
intensity={2} intensity={2}
color="#e4be00" color="#e4be00"
uniqueName="Light 2" theatreKey="Light 2"
/> />
<group position={[0, -0.9, -3]}> <group position={[0, -0.9, -3]}>
<Plane <Plane
@ -54,28 +54,28 @@ function App() {
rotation-x={-Math.PI / 2} rotation-x={-Math.PI / 2}
position-z={2} position-z={2}
scale={[4, 20, 0.2]} scale={[4, 20, 0.2]}
uniqueName="plane1" theatreKey="plane1"
/> />
<Plane <Plane
color="#e4be00" color="#e4be00"
rotation-x={-Math.PI / 2} rotation-x={-Math.PI / 2}
position-y={1} position-y={1}
scale={[4.2, 0.2, 4]} scale={[4.2, 0.2, 4]}
uniqueName="plane2" theatreKey="plane2"
/> />
<Plane <Plane
color="#736fbd" color="#736fbd"
rotation-x={-Math.PI / 2} rotation-x={-Math.PI / 2}
position={[-1.7, 1, 3.5]} position={[-1.7, 1, 3.5]}
scale={[0.5, 4, 4]} scale={[0.5, 4, 4]}
uniqueName="plane3" theatreKey="plane3"
/> />
<Plane <Plane
color="white" color="white"
rotation-x={-Math.PI / 2} rotation-x={-Math.PI / 2}
position={[0, 4.5, 3]} position={[0, 4.5, 3]}
scale={[2, 0.03, 4]} scale={[2, 0.03, 4]}
uniqueName="plane4" theatreKey="plane4"
/> />
</group> </group>
</SheetProvider> </SheetProvider>

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

@ -12,9 +12,9 @@ if (process.env.NODE_ENV === 'development' && typeof window !== 'undefined') {
// credit: https://codesandbox.io/s/camera-pan-nsb7f // credit: https://codesandbox.io/s/camera-pan-nsb7f
function Plane({color, uniqueName, ...props}) { function Plane({color, theatreKey, ...props}) {
return ( return (
<e.mesh {...props} uniqueName={uniqueName}> <e.mesh {...props} theatreKey={theatreKey}>
<boxBufferGeometry /> <boxBufferGeometry />
<meshStandardMaterial color={color} /> <meshStandardMaterial color={color} />
</e.mesh> </e.mesh>
@ -32,20 +32,20 @@ function App() {
> >
<SheetProvider sheet={getProject('Playground - R3F').sheet('R3F-Canvas')}> <SheetProvider sheet={getProject('Playground - R3F').sheet('R3F-Canvas')}>
{/* @ts-ignore */} {/* @ts-ignore */}
<e.orthographicCamera makeDefault uniqueName="Camera" /> <e.orthographicCamera makeDefault theatreKey="Camera" />
<ambientLight intensity={0.4} /> <ambientLight intensity={0.4} />
<e.pointLight <e.pointLight
position={[-10, -10, 5]} position={[-10, -10, 5]}
intensity={2} intensity={2}
color="#ff20f0" color="#ff20f0"
uniqueName="Light 1" theatreKey="Light 1"
/> />
<e.pointLight <e.pointLight
position={[0, 0.5, -1]} position={[0, 0.5, -1]}
distance={1} distance={1}
intensity={2} intensity={2}
color="#e4be00" color="#e4be00"
uniqueName="Light 2" theatreKey="Light 2"
/> />
<group position={[0, -0.9, -3]}> <group position={[0, -0.9, -3]}>
<Plane <Plane
@ -53,28 +53,28 @@ function App() {
rotation-x={-Math.PI / 2} rotation-x={-Math.PI / 2}
position-z={2} position-z={2}
scale={[4, 20, 0.2]} scale={[4, 20, 0.2]}
uniqueName="plane1" theatreKey="plane1"
/> />
<Plane <Plane
color="#e4be00" color="#e4be00"
rotation-x={-Math.PI / 2} rotation-x={-Math.PI / 2}
position-y={1} position-y={1}
scale={[4.2, 0.2, 4]} scale={[4.2, 0.2, 4]}
uniqueName="plane2" theatreKey="plane2"
/> />
<Plane <Plane
color="#736fbd" color="#736fbd"
rotation-x={-Math.PI / 2} rotation-x={-Math.PI / 2}
position={[-1.7, 1, 3.5]} position={[-1.7, 1, 3.5]}
scale={[0.5, 4, 4]} scale={[0.5, 4, 4]}
uniqueName="plane3" theatreKey="plane3"
/> />
<Plane <Plane
color="white" color="white"
rotation-x={-Math.PI / 2} rotation-x={-Math.PI / 2}
position={[0, 4.5, 3]} position={[0, 4.5, 3]}
scale={[2, 0.03, 4]} scale={[2, 0.03, 4]}
uniqueName="plane4" theatreKey="plane4"
/> />
</group> </group>
</SheetProvider> </SheetProvider>

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

@ -13,9 +13,9 @@ if (process.env.NODE_ENV === 'development' && typeof window !== 'undefined') {
// credit: https://codesandbox.io/s/camera-pan-nsb7f // credit: https://codesandbox.io/s/camera-pan-nsb7f
function Plane({color, uniqueName, ...props}) { function Plane({color, theatreKey, ...props}) {
return ( return (
<e.mesh {...props} uniqueName={uniqueName}> <e.mesh {...props} theatreKey={theatreKey}>
<boxBufferGeometry /> <boxBufferGeometry />
<meshStandardMaterial color={color} /> <meshStandardMaterial color={color} />
</e.mesh> </e.mesh>
@ -33,20 +33,20 @@ function App() {
> >
<SheetProvider sheet={getProject('Playground - R3F').sheet('R3F-Canvas')}> <SheetProvider sheet={getProject('Playground - R3F').sheet('R3F-Canvas')}>
{/* @ts-ignore */} {/* @ts-ignore */}
<e.orthographicCamera makeDefault uniqueName="Camera" /> <e.orthographicCamera makeDefault theatreKey="Camera" />
<ambientLight intensity={0.4} /> <ambientLight intensity={0.4} />
<e.pointLight <e.pointLight
position={[-10, -10, 5]} position={[-10, -10, 5]}
intensity={2} intensity={2}
color="#ff20f0" color="#ff20f0"
uniqueName="Light 1" theatreKey="Light 1"
/> />
<e.pointLight <e.pointLight
position={[0, 0.5, -1]} position={[0, 0.5, -1]}
distance={1} distance={1}
intensity={2} intensity={2}
color="#e4be00" color="#e4be00"
uniqueName="Light 2" theatreKey="Light 2"
/> />
<group position={[0, -0.9, -3]}> <group position={[0, -0.9, -3]}>
<Plane <Plane
@ -54,28 +54,28 @@ function App() {
rotation-x={-Math.PI / 2} rotation-x={-Math.PI / 2}
position-z={2} position-z={2}
scale={[4, 20, 0.2]} scale={[4, 20, 0.2]}
uniqueName="plane1" theatreKey="plane1"
/> />
<Plane <Plane
color="#e4be00" color="#e4be00"
rotation-x={-Math.PI / 2} rotation-x={-Math.PI / 2}
position-y={1} position-y={1}
scale={[4.2, 0.2, 4]} scale={[4.2, 0.2, 4]}
uniqueName="plane2" theatreKey="plane2"
/> />
<Plane <Plane
color="#736fbd" color="#736fbd"
rotation-x={-Math.PI / 2} rotation-x={-Math.PI / 2}
position={[-1.7, 1, 3.5]} position={[-1.7, 1, 3.5]}
scale={[0.5, 4, 4]} scale={[0.5, 4, 4]}
uniqueName="plane3" theatreKey="plane3"
/> />
<Plane <Plane
color="white" color="white"
rotation-x={-Math.PI / 2} rotation-x={-Math.PI / 2}
position={[0, 4.5, 3]} position={[0, 4.5, 3]}
scale={[2, 0.03, 4]} scale={[2, 0.03, 4]}
uniqueName="plane4" theatreKey="plane4"
/> />
</group> </group>
</SheetProvider> </SheetProvider>

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

@ -13,9 +13,9 @@ if (process.env.NODE_ENV === 'development' && typeof window !== 'undefined') {
// credit: https://codesandbox.io/s/camera-pan-nsb7f // credit: https://codesandbox.io/s/camera-pan-nsb7f
function Plane({color, uniqueName, ...props}) { function Plane({color, theatreKey, ...props}) {
return ( return (
<e.mesh {...props} uniqueName={uniqueName}> <e.mesh {...props} theatreKey={theatreKey}>
<boxBufferGeometry /> <boxBufferGeometry />
<meshStandardMaterial color={color} /> <meshStandardMaterial color={color} />
</e.mesh> </e.mesh>
@ -33,20 +33,20 @@ function App() {
> >
<SheetProvider sheet={getProject('Playground - R3F').sheet('R3F-Canvas')}> <SheetProvider sheet={getProject('Playground - R3F').sheet('R3F-Canvas')}>
{/* @ts-ignore */} {/* @ts-ignore */}
<e.orthographicCamera makeDefault uniqueName="Camera" /> <e.orthographicCamera makeDefault theatreKey="Camera" />
<ambientLight intensity={0.4} /> <ambientLight intensity={0.4} />
<e.pointLight <e.pointLight
position={[-10, -10, 5]} position={[-10, -10, 5]}
intensity={2} intensity={2}
color="#ff20f0" color="#ff20f0"
uniqueName="Light 1" theatreKey="Light 1"
/> />
<e.pointLight <e.pointLight
position={[0, 0.5, -1]} position={[0, 0.5, -1]}
distance={1} distance={1}
intensity={2} intensity={2}
color="#e4be00" color="#e4be00"
uniqueName="Light 2" theatreKey="Light 2"
/> />
<group position={[0, -0.9, -3]}> <group position={[0, -0.9, -3]}>
<Plane <Plane
@ -54,28 +54,28 @@ function App() {
rotation-x={-Math.PI / 2} rotation-x={-Math.PI / 2}
position-z={2} position-z={2}
scale={[4, 20, 0.2]} scale={[4, 20, 0.2]}
uniqueName="plane1" theatreKey="plane1"
/> />
<Plane <Plane
color="#e4be00" color="#e4be00"
rotation-x={-Math.PI / 2} rotation-x={-Math.PI / 2}
position-y={1} position-y={1}
scale={[4.2, 0.2, 4]} scale={[4.2, 0.2, 4]}
uniqueName="plane2" theatreKey="plane2"
/> />
<Plane <Plane
color="#736fbd" color="#736fbd"
rotation-x={-Math.PI / 2} rotation-x={-Math.PI / 2}
position={[-1.7, 1, 3.5]} position={[-1.7, 1, 3.5]}
scale={[0.5, 4, 4]} scale={[0.5, 4, 4]}
uniqueName="plane3" theatreKey="plane3"
/> />
<Plane <Plane
color="white" color="white"
rotation-x={-Math.PI / 2} rotation-x={-Math.PI / 2}
position={[0, 4.5, 3]} position={[0, 4.5, 3]}
scale={[2, 0.03, 4]} scale={[2, 0.03, 4]}
uniqueName="plane4" theatreKey="plane4"
/> />
</group> </group>
</SheetProvider> </SheetProvider>

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

@ -13,9 +13,9 @@ if (process.env.NODE_ENV === 'development' && typeof window !== 'undefined') {
// credit: https://codesandbox.io/s/camera-pan-nsb7f // credit: https://codesandbox.io/s/camera-pan-nsb7f
function Plane({color, uniqueName, ...props}) { function Plane({color, theatreKey, ...props}) {
return ( return (
<e.mesh {...props} uniqueName={uniqueName}> <e.mesh {...props} theatreKey={theatreKey}>
<boxBufferGeometry /> <boxBufferGeometry />
<meshStandardMaterial color={color} /> <meshStandardMaterial color={color} />
</e.mesh> </e.mesh>
@ -33,20 +33,20 @@ function App() {
> >
<SheetProvider sheet={getProject('Playground - R3F').sheet('R3F-Canvas')}> <SheetProvider sheet={getProject('Playground - R3F').sheet('R3F-Canvas')}>
{/* @ts-ignore */} {/* @ts-ignore */}
<e.orthographicCamera makeDefault uniqueName="Camera" /> <e.orthographicCamera makeDefault theatreKey="Camera" />
<ambientLight intensity={0.4} /> <ambientLight intensity={0.4} />
<e.pointLight <e.pointLight
position={[-10, -10, 5]} position={[-10, -10, 5]}
intensity={2} intensity={2}
color="#ff20f0" color="#ff20f0"
uniqueName="Light 1" theatreKey="Light 1"
/> />
<e.pointLight <e.pointLight
position={[0, 0.5, -1]} position={[0, 0.5, -1]}
distance={1} distance={1}
intensity={2} intensity={2}
color="#e4be00" color="#e4be00"
uniqueName="Light 2" theatreKey="Light 2"
/> />
<group position={[0, -0.9, -3]}> <group position={[0, -0.9, -3]}>
<Plane <Plane
@ -54,28 +54,28 @@ function App() {
rotation-x={-Math.PI / 2} rotation-x={-Math.PI / 2}
position-z={2} position-z={2}
scale={[4, 20, 0.2]} scale={[4, 20, 0.2]}
uniqueName="plane1" theatreKey="plane1"
/> />
<Plane <Plane
color="#e4be00" color="#e4be00"
rotation-x={-Math.PI / 2} rotation-x={-Math.PI / 2}
position-y={1} position-y={1}
scale={[4.2, 0.2, 4]} scale={[4.2, 0.2, 4]}
uniqueName="plane2" theatreKey="plane2"
/> />
<Plane <Plane
color="#736fbd" color="#736fbd"
rotation-x={-Math.PI / 2} rotation-x={-Math.PI / 2}
position={[-1.7, 1, 3.5]} position={[-1.7, 1, 3.5]}
scale={[0.5, 4, 4]} scale={[0.5, 4, 4]}
uniqueName="plane3" theatreKey="plane3"
/> />
<Plane <Plane
color="white" color="white"
rotation-x={-Math.PI / 2} rotation-x={-Math.PI / 2}
position={[0, 4.5, 3]} position={[0, 4.5, 3]}
scale={[2, 0.03, 4]} scale={[2, 0.03, 4]}
uniqueName="plane4" theatreKey="plane4"
/> />
</group> </group>
</SheetProvider> </SheetProvider>

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

@ -13,9 +13,9 @@ if (process.env.NODE_ENV === 'development' && typeof window !== 'undefined') {
// credit: https://codesandbox.io/s/camera-pan-nsb7f // credit: https://codesandbox.io/s/camera-pan-nsb7f
function Plane({color, uniqueName, ...props}: any) { function Plane({color, theatreKey, ...props}: any) {
return ( return (
<e.mesh {...props} uniqueName={uniqueName}> <e.mesh {...props} theatreKey={theatreKey}>
<boxBufferGeometry /> <boxBufferGeometry />
<meshStandardMaterial color={color} /> <meshStandardMaterial color={color} />
</e.mesh> </e.mesh>
@ -33,20 +33,20 @@ function App() {
> >
<SheetProvider sheet={getProject('Playground - R3F').sheet('R3F-Canvas')}> <SheetProvider sheet={getProject('Playground - R3F').sheet('R3F-Canvas')}>
{/* @ts-ignore */} {/* @ts-ignore */}
<e.orthographicCamera makeDefault uniqueName="Camera" /> <e.orthographicCamera makeDefault theatreKey="Camera" />
<ambientLight intensity={0.4} /> <ambientLight intensity={0.4} />
<e.pointLight <e.pointLight
position={[-10, -10, 5]} position={[-10, -10, 5]}
intensity={2} intensity={2}
color="#ff20f0" color="#ff20f0"
uniqueName="Light 1" theatreKey="Light 1"
/> />
<e.pointLight <e.pointLight
position={[0, 0.5, -1]} position={[0, 0.5, -1]}
distance={1} distance={1}
intensity={2} intensity={2}
color="#e4be00" color="#e4be00"
uniqueName="Light 2" theatreKey="Light 2"
/> />
<group position={[0, -0.9, -3]}> <group position={[0, -0.9, -3]}>
<Plane <Plane
@ -54,28 +54,28 @@ function App() {
rotation-x={-Math.PI / 2} rotation-x={-Math.PI / 2}
position-z={2} position-z={2}
scale={[4, 20, 0.2]} scale={[4, 20, 0.2]}
uniqueName="plane1" theatreKey="plane1"
/> />
<Plane <Plane
color="#e4be00" color="#e4be00"
rotation-x={-Math.PI / 2} rotation-x={-Math.PI / 2}
position-y={1} position-y={1}
scale={[4.2, 0.2, 4]} scale={[4.2, 0.2, 4]}
uniqueName="plane2" theatreKey="plane2"
/> />
<Plane <Plane
color="#736fbd" color="#736fbd"
rotation-x={-Math.PI / 2} rotation-x={-Math.PI / 2}
position={[-1.7, 1, 3.5]} position={[-1.7, 1, 3.5]}
scale={[0.5, 4, 4]} scale={[0.5, 4, 4]}
uniqueName="plane3" theatreKey="plane3"
/> />
<Plane <Plane
color="white" color="white"
rotation-x={-Math.PI / 2} rotation-x={-Math.PI / 2}
position={[0, 4.5, 3]} position={[0, 4.5, 3]}
scale={[2, 0.03, 4]} scale={[2, 0.03, 4]}
uniqueName="plane4" theatreKey="plane4"
/> />
</group> </group>
</SheetProvider> </SheetProvider>

20
examples/r3f-cra/src/App.js
View file

@ -51,7 +51,7 @@ function Button() {
onClick={() => set(!zoom)} onClick={() => set(!zoom)}
onPointerOver={() => setActive(true)} onPointerOver={() => setActive(true)}
onPointerOut={() => setActive(false)} onPointerOut={() => setActive(false)}
uniqueName="The Button" theatreKey="The Button"
> >
<sphereBufferGeometry args={[0.75, 64, 64]} /> <sphereBufferGeometry args={[0.75, 64, 64]} />
<meshPhysicalMaterial <meshPhysicalMaterial
@ -75,9 +75,9 @@ function Button() {
) )
} }
function Plane({color, uniqueName, ...props}) { function Plane({color, theatreKey, ...props}) {
return ( return (
<e.mesh receiveShadow castShadow {...props} uniqueName={uniqueName}> <e.mesh receiveShadow castShadow {...props} theatreKey={theatreKey}>
<boxBufferGeometry /> <boxBufferGeometry />
<meshStandardMaterial color={color} /> <meshStandardMaterial color={color} />
</e.mesh> </e.mesh>
@ -99,20 +99,20 @@ function App() {
sheet={getProject('Playground - R3F').sheet('R3F-Canvas')} sheet={getProject('Playground - R3F').sheet('R3F-Canvas')}
> >
{/* @ts-ignore */} {/* @ts-ignore */}
<e.perspectiveCamera makeDefault uniqueName="Camera" /> <e.perspectiveCamera makeDefault theatreKey="Camera" />
<ambientLight intensity={0.4} /> <ambientLight intensity={0.4} />
<e.pointLight <e.pointLight
position={[-10, -10, 5]} position={[-10, -10, 5]}
intensity={2} intensity={2}
color="#ff20f0" color="#ff20f0"
uniqueName="Light 1" theatreKey="Light 1"
/> />
<e.pointLight <e.pointLight
position={[0, 0.5, -1]} position={[0, 0.5, -1]}
distance={1} distance={1}
intensity={2} intensity={2}
color="#e4be00" color="#e4be00"
uniqueName="Light 2" theatreKey="Light 2"
/> />
<group position={[0, -0.9, -3]}> <group position={[0, -0.9, -3]}>
<Plane <Plane
@ -120,28 +120,28 @@ function App() {
rotation-x={-Math.PI / 2} rotation-x={-Math.PI / 2}
position-z={2} position-z={2}
scale={[4, 20, 0.2]} scale={[4, 20, 0.2]}
uniqueName="plane1" theatreKey="plane1"
/> />
<Plane <Plane
color="#e4be00" color="#e4be00"
rotation-x={-Math.PI / 2} rotation-x={-Math.PI / 2}
position-y={1} position-y={1}
scale={[4.2, 0.2, 4]} scale={[4.2, 0.2, 4]}
uniqueName="plane2" theatreKey="plane2"
/> />
<Plane <Plane
color="#736fbd" color="#736fbd"
rotation-x={-Math.PI / 2} rotation-x={-Math.PI / 2}
position={[-1.7, 1, 3.5]} position={[-1.7, 1, 3.5]}
scale={[0.5, 4, 4]} scale={[0.5, 4, 4]}
uniqueName="plane3" theatreKey="plane3"
/> />
<Plane <Plane
color="white" color="white"
rotation-x={-Math.PI / 2} rotation-x={-Math.PI / 2}
position={[0, 4.5, 3]} position={[0, 4.5, 3]}
scale={[2, 0.03, 4]} scale={[2, 0.03, 4]}
uniqueName="plane4" theatreKey="plane4"
/> />
</group> </group>
<Button /> <Button />

2
packages/playground/src/shared/custom-editable-components/App.tsx
View file

@ -20,7 +20,7 @@ function App() {
> >
<SheetProvider sheet={getProject('Space').sheet('Scene')}> <SheetProvider sheet={getProject('Space').sheet('Scene')}>
<ambientLight intensity={0.75} /> <ambientLight intensity={0.75} />
<EditablePoints uniqueName="points"> <EditablePoints theatreKey="points">
<torusKnotGeometry args={[1, 0.3, 128, 64]} /> <torusKnotGeometry args={[1, 0.3, 128, 64]} />
<meshNormalMaterial /> <meshNormalMaterial />
</EditablePoints> </EditablePoints>

2
packages/playground/src/shared/hello-world-extension-dataverse/App.tsx
View file

@ -22,7 +22,7 @@ function App() {
> >
<SheetProvider sheet={getProject('Space').sheet('Scene')}> <SheetProvider sheet={getProject('Space').sheet('Scene')}>
<ambientLight intensity={0.75} /> <ambientLight intensity={0.75} />
<e.group uniqueName="trefoil"> <e.group theatreKey="trefoil">
<TorusKnot scale={[1, 1, 1]} args={[1, 0.3, 128, 64]}> <TorusKnot scale={[1, 1, 1]} args={[1, 0.3, 128, 64]}>
<meshNormalMaterial /> <meshNormalMaterial />
</TorusKnot> </TorusKnot>

2
packages/playground/src/shared/hello-world-extension-using-sheet-object/App.tsx
View file

@ -22,7 +22,7 @@ function App() {
> >
<SheetProvider sheet={getProject('Space').sheet('Scene')}> <SheetProvider sheet={getProject('Space').sheet('Scene')}>
<ambientLight intensity={0.75} /> <ambientLight intensity={0.75} />
<e.group uniqueName="trefoil"> <e.group theatreKey="trefoil">
<TorusKnot scale={[1, 1, 1]} args={[1, 0.3, 128, 64]}> <TorusKnot scale={[1, 1, 1]} args={[1, 0.3, 128, 64]}>
<meshNormalMaterial /> <meshNormalMaterial />
</TorusKnot> </TorusKnot>

2
packages/playground/src/shared/hello-world-extension/App.tsx
View file

@ -26,7 +26,7 @@ function App() {
> >
<SheetProvider sheet={sheet}> <SheetProvider sheet={sheet}>
<ambientLight intensity={0.75} /> <ambientLight intensity={0.75} />
<e.group uniqueName="trefoil"> <e.group theatreKey="trefoil">
<TorusKnot scale={[1, 1, 1]} args={[1, 0.3, 128, 64]}> <TorusKnot scale={[1, 1, 1]} args={[1, 0.3, 128, 64]}>
<meshNormalMaterial /> <meshNormalMaterial />
</TorusKnot> </TorusKnot>

16
packages/playground/src/shared/instances/App.tsx
View file

@ -19,28 +19,28 @@ function Model({
return ( return (
<e.group <e.group
uniqueName={`Transforms for Rocket: ${instance ?? 'default'}`} theatreKey={`Transforms for Rocket: ${instance ?? 'default'}`}
{...props} {...props}
> >
<SheetProvider sheet={getProject('Space').sheet('Rocket', instance)}> <SheetProvider sheet={getProject('Space').sheet('Rocket', instance)}>
<group rotation={[-Math.PI / 2, 0, 0]} position={[0, -7, 0]} scale={7}> <group rotation={[-Math.PI / 2, 0, 0]} position={[0, -7, 0]} scale={7}>
<group rotation={[Math.PI / 13.5, -Math.PI / 5.8, Math.PI / 5.6]}> <group rotation={[Math.PI / 13.5, -Math.PI / 5.8, Math.PI / 5.6]}>
<e.mesh <e.mesh
uniqueName="Thingy" theatreKey="Thingy"
receiveShadow receiveShadow
castShadow castShadow
geometry={nodes.planet001.geometry} geometry={nodes.planet001.geometry}
material={nodes.planet001.material} material={nodes.planet001.material}
/> />
<e.mesh <e.mesh
uniqueName="Debris 2" theatreKey="Debris 2"
receiveShadow receiveShadow
castShadow castShadow
geometry={nodes.planet002.geometry} geometry={nodes.planet002.geometry}
material={nodes.planet002.material} material={nodes.planet002.material}
/> />
<e.mesh <e.mesh
uniqueName="Debris 1" theatreKey="Debris 1"
geometry={nodes.planet003.geometry} geometry={nodes.planet003.geometry}
material={nodes.planet003.material} material={nodes.planet003.material}
/> />
@ -70,7 +70,7 @@ function App() {
<color attach="background" args={[bg]} /> <color attach="background" args={[bg]} />
<ambientLight intensity={0.75} /> <ambientLight intensity={0.75} />
<EditableCamera <EditableCamera
uniqueName="Camera" theatreKey="Camera"
makeDefault makeDefault
position={[0, 0, 0]} position={[0, 0, 0]}
fov={75} fov={75}
@ -78,12 +78,12 @@ function App() {
far={70} far={70}
> >
<e.pointLight <e.pointLight
uniqueName="Light 1" theatreKey="Light 1"
intensity={1} intensity={1}
position={[-10, -25, -10]} position={[-10, -25, -10]}
/> />
<e.spotLight <e.spotLight
uniqueName="Light 2" theatreKey="Light 2"
castShadow castShadow
intensity={2.25} intensity={2.25}
angle={0.2} angle={0.2}
@ -92,7 +92,7 @@ function App() {
shadow-mapSize={[1024, 1024]} shadow-mapSize={[1024, 1024]}
shadow-bias={-0.0001} shadow-bias={-0.0001}
/> />
<e.directionalLight uniqueName="Light 3" /> <e.directionalLight theatreKey="Light 3" />
</EditableCamera> </EditableCamera>
<Suspense fallback={null}> <Suspense fallback={null}>
<RefreshSnapshot /> <RefreshSnapshot />

14
packages/playground/src/shared/r3f-rocket/App.tsx
View file

@ -17,21 +17,21 @@ function Model({url}: {url: string}) {
<group rotation={[-Math.PI / 2, 0, 0]} position={[0, -7, 0]} scale={7}> <group rotation={[-Math.PI / 2, 0, 0]} position={[0, -7, 0]} scale={7}>
<group rotation={[Math.PI / 13.5, -Math.PI / 5.8, Math.PI / 5.6]}> <group rotation={[Math.PI / 13.5, -Math.PI / 5.8, Math.PI / 5.6]}>
<e.mesh <e.mesh
uniqueName="Example Namespace / Thingy" theatreKey="Example Namespace / Thingy"
receiveShadow receiveShadow
castShadow castShadow
geometry={nodes.planet001.geometry} geometry={nodes.planet001.geometry}
material={nodes.planet001.material} material={nodes.planet001.material}
/> />
<e.mesh <e.mesh
uniqueName="Example Namespace / Debris 2" theatreKey="Example Namespace / Debris 2"
receiveShadow receiveShadow
castShadow castShadow
geometry={nodes.planet002.geometry} geometry={nodes.planet002.geometry}
material={nodes.planet002.material} material={nodes.planet002.material}
/> />
<e.mesh <e.mesh
uniqueName="Debris 1" theatreKey="Debris 1"
geometry={nodes.planet003.geometry} geometry={nodes.planet003.geometry}
material={nodes.planet003.material} material={nodes.planet003.material}
/> />
@ -65,18 +65,18 @@ function App() {
<color attach="background" args={[bg]} /> <color attach="background" args={[bg]} />
<ambientLight intensity={0.75} /> <ambientLight intensity={0.75} />
<EditableCamera <EditableCamera
uniqueName="Camera" theatreKey="Camera"
makeDefault makeDefault
position={[0, 0, 16]} position={[0, 0, 16]}
fov={75} fov={75}
> >
<e.pointLight <e.pointLight
uniqueName="Light 1" theatreKey="Light 1"
intensity={1} intensity={1}
position={[-10, -25, -10]} position={[-10, -25, -10]}
/> />
<e.spotLight <e.spotLight
uniqueName="Light 2" theatreKey="Light 2"
castShadow castShadow
intensity={2.25} intensity={2.25}
angle={0.2} angle={0.2}
@ -85,7 +85,7 @@ function App() {
shadow-mapSize={[1024, 1024]} shadow-mapSize={[1024, 1024]}
shadow-bias={-0.0001} shadow-bias={-0.0001}
/> />
<e.directionalLight uniqueName="Light 3" /> <e.directionalLight theatreKey="Light 3" />
</EditableCamera> </EditableCamera>
<Suspense fallback={null}> <Suspense fallback={null}>
<RefreshSnapshot /> <RefreshSnapshot />

14
packages/playground/src/tests/r3f-stress-test/App.tsx
View file

@ -19,21 +19,21 @@ function Model({url}: {url: string}) {
<group rotation={[-Math.PI / 2, 0, 0]} position={[0, -7, 0]} scale={7}> <group rotation={[-Math.PI / 2, 0, 0]} position={[0, -7, 0]} scale={7}>
<group rotation={[Math.PI / 13.5, -Math.PI / 5.8, Math.PI / 5.6]}> <group rotation={[Math.PI / 13.5, -Math.PI / 5.8, Math.PI / 5.6]}>
<e.mesh <e.mesh
uniqueName="Example Namespace / Thingy" theatreKey="Example Namespace / Thingy"
receiveShadow receiveShadow
castShadow castShadow
geometry={nodes.planet001.geometry} geometry={nodes.planet001.geometry}
material={nodes.planet001.material} material={nodes.planet001.material}
/> />
<e.mesh <e.mesh
uniqueName="Example Namespace / Debris 2" theatreKey="Example Namespace / Debris 2"
receiveShadow receiveShadow
castShadow castShadow
geometry={nodes.planet002.geometry} geometry={nodes.planet002.geometry}
material={nodes.planet002.material} material={nodes.planet002.material}
/> />
<e.mesh <e.mesh
uniqueName="Debris 1" theatreKey="Debris 1"
geometry={nodes.planet003.geometry} geometry={nodes.planet003.geometry}
material={nodes.planet003.material} material={nodes.planet003.material}
/> />
@ -102,18 +102,18 @@ function App() {
<color attach="background" args={[bg]} /> <color attach="background" args={[bg]} />
<ambientLight intensity={0.75} /> <ambientLight intensity={0.75} />
<EditableCamera <EditableCamera
uniqueName="Camera" theatreKey="Camera"
makeDefault makeDefault
position={[0, 0, 16]} position={[0, 0, 16]}
fov={75} fov={75}
> >
<e.pointLight <e.pointLight
uniqueName="Light 1" theatreKey="Light 1"
intensity={1} intensity={1}
position={[-10, -25, -10]} position={[-10, -25, -10]}
/> />
<e.spotLight <e.spotLight
uniqueName="Light 2" theatreKey="Light 2"
castShadow castShadow
intensity={2.25} intensity={2.25}
angle={0.2} angle={0.2}
@ -122,7 +122,7 @@ function App() {
shadow-mapSize={[1024, 1024]} shadow-mapSize={[1024, 1024]}
shadow-bias={-0.0001} shadow-bias={-0.0001}
/> />
<e.directionalLight uniqueName="Light 3" /> <e.directionalLight theatreKey="Light 3" />
</EditableCamera> </EditableCamera>
<Suspense fallback={null}> <Suspense fallback={null}>
<RefreshSnapshot /> <RefreshSnapshot />

8
packages/r3f/README.md
View file

@ -41,10 +41,10 @@ export default function App() {
position={[10, 10, 10]} position={[10, 10, 10]}
angle={0.15} angle={0.15}
penumbra={1} penumbra={1}
uniqueName="Spotlight" theatreKey="Spotlight"
/> />
<e.pointLight uniqueName="PointLight" /> <e.pointLight theatreKey="PointLight" />
<e.mesh uniqueName="Box"> <e.mesh theatreKey="Box">
<boxBufferGeometry /> <boxBufferGeometry />
<meshStandardMaterial color="orange" /> <meshStandardMaterial color="orange" />
</e.mesh> </e.mesh>
@ -79,7 +79,7 @@ const EditableCamera = editable(PerspectiveCamera, 'perspectiveCamera');
#### Props #### Props
`uniqueName: string`: a unique name used to identify the object in the editor. `theatreKey: string`: a unique name used to identify the object in the editor.
### `<SheetProvider sheet={...} />` ### `<SheetProvider sheet={...} />`

8
packages/r3f/src/extension/components/ProxyManager.tsx
View file

@ -58,13 +58,13 @@ const ProxyManager: VFC<ProxyManagerProps> = ({orbitControlsRef}) => {
sceneProxy.traverse((object) => { sceneProxy.traverse((object) => {
if (object.userData.__editable) { if (object.userData.__editable) {
// there are duplicate uniqueNames in the scene, only display one instance in the editor // there are duplicate theatreKeys in the scene, only display one instance in the editor
if (editableProxies[object.userData.__storeKey]) { if (editableProxies[object.userData.__storeKey]) {
object.parent!.remove(object) object.parent!.remove(object)
} else { } else {
const uniqueName = object.userData.__storeKey const theatreKey = object.userData.__storeKey
editableProxies[uniqueName] = { editableProxies[theatreKey] = {
portal: createPortal( portal: createPortal(
<EditableProxy <EditableProxy
storeKey={object.userData.__storeKey} storeKey={object.userData.__storeKey}
@ -73,7 +73,7 @@ const ProxyManager: VFC<ProxyManagerProps> = ({orbitControlsRef}) => {
object.parent!, object.parent!,
), ),
object: object, object: object,
editable: editables[uniqueName]!, editable: editables[theatreKey]!,
} }
} }
} }

12
packages/r3f/src/main/editable.tsx
View file

@ -21,7 +21,7 @@ const createEditable = <Keys extends keyof JSX.IntrinsicElements>(
type: T extends 'primitive' ? null : U, type: T extends 'primitive' ? null : U,
) => { ) => {
type Props = Omit<ComponentProps<T>, 'visible'> & { type Props = Omit<ComponentProps<T>, 'visible'> & {
uniqueName: string theatreKey: string
visible?: boolean | 'editor' visible?: boolean | 'editor'
additionalProps?: $FixMe additionalProps?: $FixMe
objRef?: $FixMe objRef?: $FixMe
@ -35,7 +35,7 @@ const createEditable = <Keys extends keyof JSX.IntrinsicElements>(
return forwardRef( return forwardRef(
( (
{ {
uniqueName, theatreKey,
visible, visible,
editableType, editableType,
additionalProps, additionalProps,
@ -50,7 +50,7 @@ const createEditable = <Keys extends keyof JSX.IntrinsicElements>(
const sheet = useCurrentSheet()! const sheet = useCurrentSheet()!
const storeKey = makeStoreKey(sheet, uniqueName) const storeKey = makeStoreKey(sheet, theatreKey)
const [sheetObject, setSheetObject] = useState< const [sheetObject, setSheetObject] = useState<
undefined | ISheetObject<$FixMe> undefined | ISheetObject<$FixMe>
@ -61,7 +61,7 @@ const createEditable = <Keys extends keyof JSX.IntrinsicElements>(
useLayoutEffect(() => { useLayoutEffect(() => {
if (!sheet) return if (!sheet) return
const sheetObject = sheet.object( const sheetObject = sheet.object(
uniqueName, theatreKey,
Object.assign( Object.assign(
{ {
...additionalProps, ...additionalProps,
@ -164,7 +164,7 @@ const createEditable = <Keys extends keyof JSX.IntrinsicElements>(
[Property in Keys]: React.ForwardRefExoticComponent< [Property in Keys]: React.ForwardRefExoticComponent<
React.PropsWithoutRef< React.PropsWithoutRef<
Omit<JSX.IntrinsicElements[Property], 'visible'> & { Omit<JSX.IntrinsicElements[Property], 'visible'> & {
uniqueName: string theatreKey: string
visible?: boolean | 'editor' visible?: boolean | 'editor'
additionalProps?: $FixMe additionalProps?: $FixMe
objRef?: $FixMe objRef?: $FixMe
@ -176,7 +176,7 @@ const createEditable = <Keys extends keyof JSX.IntrinsicElements>(
React.PropsWithoutRef< React.PropsWithoutRef<
{ {
object: any object: any
uniqueName: string theatreKey: string
visible?: boolean | 'editor' visible?: boolean | 'editor'
additionalProps?: $FixMe additionalProps?: $FixMe
objRef?: $FixMe objRef?: $FixMe

14
packages/r3f/src/main/store.ts
View file

@ -44,11 +44,11 @@ export type EditorStore = {
init: (scene: Scene, gl: WebGLRenderer) => void init: (scene: Scene, gl: WebGLRenderer) => void
addEditable: (uniqueName: string, editable: Editable<any>) => void addEditable: (theatreKey: string, editable: Editable<any>) => void
createSnapshot: () => void createSnapshot: () => void
setSnapshotProxyObject: ( setSnapshotProxyObject: (
proxyObject: Object3D | null, proxyObject: Object3D | null,
uniqueName: string, theatreKey: string,
) => void ) => void
} }
@ -76,11 +76,11 @@ const config: StateCreator<EditorStore> = (set, get) => {
get().createSnapshot() get().createSnapshot()
}, },
addEditable: (uniqueName, editable) => { addEditable: (theatreKey, editable) => {
set((state) => ({ set((state) => ({
editables: { editables: {
...state.editables, ...state.editables,
[uniqueName]: editable, [theatreKey]: editable,
}, },
})) }))
}, },
@ -92,12 +92,12 @@ const config: StateCreator<EditorStore> = (set, get) => {
})) }))
}, },
setSnapshotProxyObject: (proxyObject, uniqueName) => { setSnapshotProxyObject: (proxyObject, theatreKey) => {
set((state) => ({ set((state) => ({
editablesSnapshot: { editablesSnapshot: {
...state.editablesSnapshot, ...state.editablesSnapshot,
[uniqueName]: { [theatreKey]: {
...state.editablesSnapshot![uniqueName], ...state.editablesSnapshot![theatreKey],
proxyObject, proxyObject,
}, },
}, },