diff --git a/packages/playground/devEnv/servePlayground.ts b/packages/playground/devEnv/servePlayground.ts index 0564d42..4c9aae8 100644 --- a/packages/playground/devEnv/servePlayground.ts +++ b/packages/playground/devEnv/servePlayground.ts @@ -14,7 +14,7 @@ require('esbuild') { entryPoints: [path.join(playgroundDir, 'src/index.tsx')], target: ['firefox88'], - loader: {'.png': 'file'}, + loader: {'.png': 'file', '.glb': 'file'}, bundle: true, sourcemap: true, define: definedGlobals, diff --git a/packages/playground/src/index.tsx b/packages/playground/src/index.tsx index 921d7a1..41a05e0 100644 --- a/packages/playground/src/index.tsx +++ b/packages/playground/src/index.tsx @@ -1 +1 @@ -import './r3f' +import './space-exploration' diff --git a/packages/playground/src/playground-globals.d.ts b/packages/playground/src/playground-globals.d.ts index 7e3001d..28516bb 100644 --- a/packages/playground/src/playground-globals.d.ts +++ b/packages/playground/src/playground-globals.d.ts @@ -1,3 +1,7 @@ declare module '*.png' { export default string } + +declare module '*.glb' { + export default string +} diff --git a/packages/playground/src/space-exploration/App.tsx b/packages/playground/src/space-exploration/App.tsx new file mode 100644 index 0000000..ae6c8a7 --- /dev/null +++ b/packages/playground/src/space-exploration/App.tsx @@ -0,0 +1,99 @@ +import {editable as e, bindToCanvas} 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' +import {useGLTF} from '@react-three/drei' +import sceneGLB from './scene.glb' + +document.body.style.backgroundColor = '#171717' + +/* +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}) { + const {nodes} = useGLTF(url) as any + console.log(nodes) + + return ( + + + + + + + + ) +} + +function App() { + return ( +
+ + + + + + + + + + + + + +
+ ) +} + +export default App diff --git a/packages/playground/src/space-exploration/index.tsx b/packages/playground/src/space-exploration/index.tsx new file mode 100644 index 0000000..b3d0515 --- /dev/null +++ b/packages/playground/src/space-exploration/index.tsx @@ -0,0 +1,5 @@ +import React from 'react' +import ReactDOM from 'react-dom' +import App from './App' + +ReactDOM.render(, document.getElementById('root')) diff --git a/packages/playground/src/space-exploration/scene.glb b/packages/playground/src/space-exploration/scene.glb new file mode 100644 index 0000000..ecd74ee Binary files /dev/null and b/packages/playground/src/space-exploration/scene.glb differ