Fix r3f example not actually making the editable camera defined in the scene the defaul (#78)

* Fix e.perspectiveCamera -> editable(PerspectiveCamera)

* Also fix the one in the examples directory

* Update fix to latest version
This commit is contained in:
Andrew Prifer 2022-05-01 14:59:52 +02:00 committed by GitHub
parent 4b5f7adf21
commit d85e3053af
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -3,18 +3,13 @@ import {OrbitControls, Stars} from '@react-three/drei'
import {getProject} from '@theatre/core' import {getProject} from '@theatre/core'
import React, {Suspense, useState} from 'react' import React, {Suspense, useState} from 'react'
import {Canvas} from '@react-three/fiber' import {Canvas} from '@react-three/fiber'
import {useGLTF} from '@react-three/drei' import {useGLTF, PerspectiveCamera} from '@react-three/drei'
import sceneGLB from './scene.glb' import sceneGLB from './scene.glb'
document.body.style.backgroundColor = '#171717' document.body.style.backgroundColor = '#171717'
/* const EditableCamera = e(PerspectiveCamera, 'perspectiveCamera')
Auto-generated by: https://github.com/pmndrs/gltfjsx
author: overlaps (https://sketchfab.com/overlaps)
license: CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)
source: https://sketchfab.com/models/91964c1ce1a34c3985b6257441efa500
title: Space exploration [WLP series #8]
*/
function Model({url}: {url: string}) { function Model({url}: {url: string}) {
const {nodes} = useGLTF(url) as any const {nodes} = useGLTF(url) as any
@ -54,15 +49,17 @@ function App() {
onClick={() => { onClick={() => {
// return setBgIndex((bgIndex) => (bgIndex + 1) % bgs.length) // return setBgIndex((bgIndex) => (bgIndex + 1) % bgs.length)
}} }}
style={{
height: '100vh',
}}
> >
<Canvas dpr={[1.5, 2]} linear shadows frameloop="demand"> <Canvas dpr={[1.5, 2]} linear shadows frameloop="demand">
<SheetProvider getSheet={() => getProject('Space').sheet('Scene')}> <SheetProvider getSheet={() => getProject('Space').sheet('Scene')}>
<fog attach="fog" args={[bg, 16, 30]} /> <fog attach="fog" args={[bg, 16, 30]} />
<color attach="background" args={[bg]} /> <color attach="background" args={[bg]} />
<ambientLight intensity={0.75} /> <ambientLight intensity={0.75} />
<e.perspectiveCamera <EditableCamera
uniqueName="Camera" uniqueName="Camera"
// @ts-ignore
makeDefault makeDefault
position={[0, 0, 16]} position={[0, 0, 16]}
fov={75} fov={75}
@ -82,7 +79,8 @@ function App() {
shadow-mapSize={[1024, 1024]} shadow-mapSize={[1024, 1024]}
shadow-bias={-0.0001} shadow-bias={-0.0001}
/> />
</e.perspectiveCamera> <e.directionalLight uniqueName="Light 3" />
</EditableCamera>
<Suspense fallback={null}> <Suspense fallback={null}>
<RefreshSnapshot /> <RefreshSnapshot />
<Model url={sceneGLB} /> <Model url={sceneGLB} />