fix: live demo failure (pmndrs#1159)

* fix: correctly extend THREE for custom canvas

* refactor: remove unnecessary fiber extend

examples/src/components/Scene.js

@@ -1,8 +1,7 @@
 import * as THREE from 'three'
-import { PlaneBufferGeometry } from 'three'
 import { useRef, useState } from 'react'
 import { Plane, useAspect, useTexture } from '@react-three/drei'
-import { useFrame, extend } from '@react-three/fiber'
+import { useFrame } from '@react-three/fiber'
 import Fireflies from './Fireflies'
 import bgUrl from '../resources/bg.jpg'
 import starsUrl from '../resources/stars.png'
@@ -12,9 +11,6 @@ import leaves1Url from '../resources/leaves1.png'
 import leaves2Url from '../resources/leaves2.png'
 import '../materials/layerMaterial'
 
-// PlaneBufferGeometry is needed for Plane
-extend({ PlaneBufferGeometry })
-
 export default function Scene({ dof }) {
   const scaleN = useAspect(16, 10, 1.05)
   const scaleW = useAspect(22, 10, 1.05)

examples/src/index.js

@@ -1,5 +1,6 @@
+import * as THREE from 'three'
 import { createRoot } from 'react-dom/client'
-import { createRoot as createCanvasRoot, events } from '@react-three/fiber'
+import { createRoot as createCanvasRoot, events, extend } from '@react-three/fiber'
 import './styles.css'
 import App from './App'
 import Backdrop from './components/Backdrop'
@@ -8,6 +9,9 @@ const root = createRoot(document.getElementById('root'))
 
 root.render(<App />)
 
+// https://docs.pmnd.rs/react-three-fiber/api/canvas#custom-canvas
+extend(THREE)
+
 const backdrop = createCanvasRoot(document.getElementById('backdrop'))
 
 backdrop