docs: fixing 1st scene sandbox using Sandpack

pmndrs · Aug 26, 2024 · 1330994 · 1330994
1 parent b1664f7
commit 1330994
Showing 1 changed file with 26 additions and 12 deletions.
diff --git a/docs/getting-started/your-first-scene.mdx b/docs/getting-started/your-first-scene.mdx
@@ -145,18 +145,32 @@ Please refer to the API for [a deeper explanation](/api/objects).
 
 ## The result
 
-```jsx
-<Canvas>
-  <ambientLight intensity={0.1} />
-  <directionalLight color="red" position={[0, 0, 5]} />
-  <mesh>
-    <boxGeometry />
-    <meshStandardMaterial />
-  </mesh>
-</Canvas>
-```
-
-<Codesandbox id="12q81" />
+<Sandpack
+  template="react"
+  customSetup={{
+    dependencies: {
+      'three': 'latest',
+      '@react-three/fiber': 'latest'
+    },
+  }}
+  files={{
+    '/styles.css': `html,body,#root {height:100%;margin:unset;}`,
+    '/App.js': `import { Canvas } from "@react-three/fiber";
+
+export default function App() {
+  return (
+      <Canvas>
+        <mesh>
+          <boxGeometry args={[2, 2, 2]} />
+          <meshPhongMaterial />
+        </mesh>
+        <ambientLight intensity={0.1} />
+        <directionalLight position={[0, 0, 5]} color="red" />
+      </Canvas>
+  );
+}`,
+  }}
+/>
 
 ## Exercise