{"_id":"@andrewray/react-three-fiber","_rev":"2-b6a9ab88290eae0660bb8260f10e4979","name":"@andrewray/react-three-fiber","dist-tags":{"latest":"2.0.6"},"versions":{"1.5.3":{"name":"@andrewray/react-three-fiber","version":"1.5.3","description":"React-fiber renderer for THREE.js","main":"dist/index.cjs.js","module":"dist/index.js","sideEffects":false,"scripts":{"prebuild":"rimraf dist","build":"rollup -c","prepare":"npm run build","test":"echo \"Error: no test specified\" && exit 1"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"prettier":{"semi":false,"trailingComma":"es5","singleQuote":true,"jsxBracketSameLine":true,"tabWidth":2,"printWidth":120},"lint-staged":{"*.{js,}":["prettier --write","git add"]},"repository":{"type":"git","url":"git+https://github.com/drcmda/react-three-fiber.git"},"keywords":["react","renderer","fiber","three","threejs"],"author":{"name":"Paul Henschel"},"license":"MIT","bugs":{"url":"https://github.com/drcmda/react-three-fiber/issues"},"homepage":"https://github.com/drcmda/react-three-fiber#readme","dependencies":{"@babel/runtime":"^7.3.4","lodash-es":"^4.17.11","react-reconciler":"^0.20.1","resize-observer-polyfill":"^1.5.1","scheduler":"^0.13.3"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","three":">=0.100"},"devDependencies":{"@babel/core":"7.3.4","@babel/plugin-proposal-class-properties":"7.3.4","@babel/plugin-proposal-do-expressions":"7.2.0","@babel/plugin-proposal-object-rest-spread":"7.3.4","@babel/plugin-transform-modules-commonjs":"7.2.0","@babel/plugin-transform-parameters":"7.3.3","@babel/plugin-transform-runtime":"7.3.4","@babel/plugin-transform-template-literals":"7.2.0","@babel/preset-env":"7.3.4","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.3.3","babel-plugin-transform-react-remove-prop-types":"^0.4.24","husky":"^1.3.1","lint-staged":"^8.1.5","prettier":"^1.16.4","rimraf":"^2.6.3","rollup":"^1.7.2","rollup-plugin-babel":"^4.3.2","rollup-plugin-commonjs":"^9.2.1","rollup-plugin-node-resolve":"^4.0.1","rollup-plugin-size-snapshot":"^0.8.0","typescript":"^3.3.3333"},"gitHead":"ec48107cad72bdf8b29f138a8bdc0917f41a99b7","_id":"@andrewray/react-three-fiber@1.5.3","_npmVersion":"6.4.1","_nodeVersion":"10.10.0","_npmUser":{"name":"andrewray","email":"me@andrewray.me"},"dist":{"integrity":"sha512-hYFeL+DPC/f6vqlT2RpYDfH3NugxZObBbsmBe1Q6deGlv9sV94BuU8xeR5OLixtfrNJOKOaE5vAXH9k/VMqMLA==","shasum":"94538cc52df0a7abbd19ca46d0ba63a0ea76d2ed","tarball":"https://registry.npmjs.org/@andrewray/react-three-fiber/-/react-three-fiber-1.5.3.tgz","fileCount":13,"unpackedSize":272733,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcmGenCRA9TVsSAnZWagAAk30QAJZbjJU8D0SF/35DUoHA\nBtp7FZmWLiK9gQQdjmg5xOtqZFImstKAadxXqhxz62hxrIsT5eGiwVGp0xzB\nCQrlHXWG1b3mERws7TFpyCxe0YX3+yJ4BUgrlSuJO/JwFRTPeRVM15Ibckfe\nAiRMBzEMRgm9ISneVTCz5UiYdNiFWdxci2RWzDlRVIxpC06B2r7m0YDFfWjH\nGTr2g/+EwKkICzF6J54lxrrmCNeyeaO9JSe8NXnHeaiCtOXHlEGelIHWjbuq\nFJlD5I3aPkWTXD0jtNHs1eqy8qILbShm0DDRwNuWvYc7pYNnJxzhOip3/vEB\n4USag/uPkONblZKw9nA8BSG0ocy1fC7R02jy0VJua1M0Ne0O98DuM84Wnyxb\nCNuhU59e9t4etkbyWQYi63zkO29fa2mVRXJa/WUQv9T1D8HdWcuUSSVdW1E0\nTg+tXXOtjx0glqo1lftEFwzIqolOuHltP16Yio27WP47rXSqUgcRHawhcEoA\n3+Ot72OshZtIlbXvo6Pz46f7PVOoB5o4Rqsggx3T3pYVx2lF0UCNYV6XTYGa\n/gMln5I+2PMKxRKPJO5ys9ngdD7JTK4GCq1G3giPCTOL2zsAhx3As/VuSy82\n6hHg9+XjnRJrdeFclsblkUMaGYOSrKTC5K8cKHdTvrZl9JDNT31uP3YIxBEn\nKajg\r\n=HOIb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEfJMBCg/NLg5Lh8y6L/GZ7TFbJ398lteY57Seuj3Bi4AiA3LHWBYuRKKAwJQuxANdMie1lfFSSYbmok3gJn5+Q1KA=="}]},"maintainers":[{"name":"andrewray","email":"me@andrewray.me"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-three-fiber_1.5.3_1553491879197_0.885740949356215"},"_hasShrinkwrap":false},"2.0.6":{"name":"@andrewray/react-three-fiber","version":"2.0.6","description":"React-fiber renderer for THREE.js","main":"dist/index.cjs.js","module":"dist/index.js","sideEffects":false,"scripts":{"prebuild":"rimraf dist","build":"rollup -c","prepare":"npm run build","test":"echo \"Error: no test specified\" && exit 1"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"prettier":{"semi":false,"trailingComma":"es5","singleQuote":true,"jsxBracketSameLine":true,"tabWidth":2,"printWidth":120},"lint-staged":{"*.{js,}":["prettier --write","git add"]},"repository":{"type":"git","url":"git+https://github.com/drcmda/react-three-fiber.git"},"keywords":["react","renderer","fiber","three","threejs"],"author":{"name":"Paul Henschel"},"license":"MIT","bugs":{"url":"https://github.com/drcmda/react-three-fiber/issues"},"homepage":"https://github.com/drcmda/react-three-fiber#readme","dependencies":{"@babel/runtime":"^7.3.4","lodash-es":"^4.17.11","pointer-events-polyfill":"^0.4.4-pre","react-reconciler":"^0.20.1","resize-observer-polyfill":"^1.5.1","scheduler":"^0.13.3"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8","three":">=0.100"},"devDependencies":{"@babel/core":"7.3.4","@babel/plugin-proposal-class-properties":"7.3.4","@babel/plugin-proposal-do-expressions":"7.2.0","@babel/plugin-proposal-object-rest-spread":"7.3.4","@babel/plugin-transform-modules-commonjs":"7.2.0","@babel/plugin-transform-parameters":"7.3.3","@babel/plugin-transform-runtime":"7.3.4","@babel/plugin-transform-template-literals":"7.2.0","@babel/preset-env":"7.3.4","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.3.3","babel-plugin-transform-react-remove-prop-types":"^0.4.24","husky":"^1.3.1","lint-staged":"^8.1.5","prettier":"^1.16.4","rollup":"^1.4.1","rollup-plugin-babel":"^4.3.2","rollup-plugin-commonjs":"^9.2.1","rollup-plugin-node-resolve":"^4.0.1","rollup-plugin-size-snapshot":"^0.8.0","typescript":"^3.3.3333"},"gitHead":"9e8a31254555ddc8198f21cac2deb4f4d658774a","_id":"@andrewray/react-three-fiber@2.0.6","_npmVersion":"6.4.1","_nodeVersion":"10.10.0","_npmUser":{"name":"andrewray","email":"me@andrewray.me"},"dist":{"integrity":"sha512-d1zELepOTTKgkBg+1SAThrMCWe3mW9xHowG9A/x6lUkNebo2fEdaHpO/iyWBTn16yxaWcJPn/OhulqrBDGCfcQ==","shasum":"ceede36d8608b9aa12319017302972b4e2e41c68","tarball":"https://registry.npmjs.org/@andrewray/react-three-fiber/-/react-three-fiber-2.0.6.tgz","fileCount":14,"unpackedSize":293441,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcu2szCRA9TVsSAnZWagAAH1QQAJTdVOsFx2AWRRhcX1Vr\nd6mO2KX9rWHjq7VLfxysfsYh4HLZ/ok6ki4hHbbyWeDeM28COctQ9hJOEvdL\nL7Lg13rx16qZuwIXMjDPm1m0zw/89PNRvSoeA7H2iOYsPHhbFBFRon9ylf7J\nDCVR71MBbv6gyvv63dVZX6LOpqG5HoIp1IiSZFqy8UJsP6sXe18GVrLK+QEA\nnZL5aPT/zKOJUleHNa+y+VEFlZwgoWa+hA9wlwv6LxF9vY233cHjvZ3Dq8kf\n+vFSIX+MMAte3mkdK+pJ35w0FG9U7HB65LAmCSvCJg/JEWQYx0x12tfa7zL4\nRHvboiiw1MBDQaleDVBkM72IPpcw+b6HWKCZS8rIV1g94513evwLUiHPrdNv\nqdayjiVhiR2oQhMod30bkkC6iBO7KOwvJHRUiFCW6aIHnoHwIynsczpyswd/\n9J2X3raZlVc+YlWGUFCrbp0Am4vMwONPpWFl8fDbeXF7B+hk4HrvlM8bQtmH\n2iBeBWg6C2JFHPT/FI2eZO7Ka5a0T6bSR4vEfY0ky3rls9NL6X1lwlH2VCsW\nxrdFogje/iDBRMbLyC4bPr/Ng5bzzgnykFnHUBfBQ022EPHmSAEAxAj8Q7QP\nFKRrNl+gFEjyWWS0L++n7iKdM2ER8mktIF+clVa11zCdOJWBHTUV8frI6Mmb\nvUkz\r\n=b229\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICXrbXWG09E1HXCJHzBdDfPqvmOMXerje631K07+ZY2lAiEAvonWVdN+glpXXQN8naBmngt5PKXlCI4ZqU487NUFii8="}]},"maintainers":[{"name":"andrewray","email":"me@andrewray.me"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-three-fiber_2.0.6_1555786546516_0.7637475682064698"},"_hasShrinkwrap":false}},"time":{"created":"2019-03-25T05:31:18.982Z","1.5.3":"2019-03-25T05:31:19.329Z","modified":"2022-04-04T14:01:51.662Z","2.0.6":"2019-04-20T18:55:46.651Z"},"maintainers":[{"name":"andrewray","email":"me@andrewray.me"}],"description":"React-fiber renderer for THREE.js","homepage":"https://github.com/drcmda/react-three-fiber#readme","keywords":["react","renderer","fiber","three","threejs"],"repository":{"type":"git","url":"git+https://github.com/drcmda/react-three-fiber.git"},"author":{"name":"Paul Henschel"},"bugs":{"url":"https://github.com/drcmda/react-three-fiber/issues"},"license":"MIT","readme":"

\n \n \n \n \n \n

\n

\n These demos are real, you can click them! They contain the full code, too.\n

\n\n npm install react-three-fiber\n\nReact-three-fiber is a small React renderer for Threejs. Why, you might ask? React was made to drive complex tree structures, it makes just as much sense for Threejs as for the DOM. Building a dynamic scene graph becomes so much easier because you can break it up into declarative, re-usable components with clean, reactive semantics. This also opens up the ecosystem, you can now apply generic packages for state, animation, gestures and so on.\n\n#### Difference to react-three, react-three-renderer, react-three-renderer-fiber\n\nThis is a small reconciler config with a few additions for interaction and hooks holding it all together. It does not know or care about Three internals, it uses heuristics for objects and attributes, so that we can get away without creating a strong dependency. Three is constantly changing, we don't want to rely on a specific version or chase their release cycle. This library works with version 1 as well as their latest. At the same time we don't want to alter any rules, if something works in Threejs in a specific way, it will be the same here.\n\n# What it looks like ...\n\nCopy the following into a project to get going. [Here's the same](https://codesandbox.io/s/rrppl0y8l4) running in a code sandbox.\n\n```jsx\nimport * as THREE from 'three'\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Canvas } from 'react-three-fiber'\n\nfunction Thing({ vertices, color }) {\n return (\n console.log('we have access to the instance')}>\n \n new THREE.Vector3(...v))}\n onUpdate={self => (self.verticesNeedUpdate = true)}\n />\n \n \n console.log('click')} \n onPointerOver={e => console.log('hover')} \n onPointerOut={e => console.log('unhover')}>\n \n \n \n \n )\n}\n\nReactDOM.render(\n \n \n ,\n document.getElementById('root')\n)\n```\n\n# Canvas\n\nThe `Canvas` object is your portal into Threejs. It renders Threejs elements, *not DOM elements*!\n\n```jsx\n // Callback when vdom is ready (you can block first render via promise)\n```\n\nYou can give it additional properties like style and className, which will be added to the container (a div) that holds the dom-canvas element.\n\n# Defaults\n\nCanvas will create a *translucent webGL-renderer* with the following properties: \n\n`antialias: true, alpha: true, setClearAlpha(0)`\n\nA default *perspective camera*:\n\n`fov: 75, near: 0.1, far: 1000, position.z: 5`\n\nOr a default *orthographic camera* if Canvas.orthographic is true:\n\n`near: 0.1, far: 1000, position.z: 5`\n\nA default scene (into which all the jsx is rendered) and a raycaster. You do not have to use any of these objects, look under \"receipes\" down below if you want to bring your own.\n\n# Objects and properties\n\nYou can use [Three's entire object catalogue and all properties](https://threejs.org/docs). When in doubt, always consult the docs.\n\n```jsx\n\n```\n\n#### Shortcuts and non-Object3D stow-away\n\nAll properties that have a `.set()` method (colors, vectors, euler, matrix, etc) can be given a shortcut. For example [THREE.Color.set](https://threejs.org/docs/index.html#api/en/math/Color.set) can take a color string, hence instead of `color={new THREE.Color('peachpuff')}` you can do `color=\"peachpuff\"`. Some `set` methods take multiple arguments (vectors for instance), in this case you can pass an array.\n\nYou can stow away non-Object3D primitives (geometries, materials, etc) into the render tree so that they become managed and reactive. They take the same properties they normally would, constructor arguments are passed with `args`. Using the `attach` property objects bind automatically to their parent and are taken off it once they unmount.\n\nThe following is the same as above, but it's leaner and critical properties aren't re-instantiated on every render.\n\n```jsx\n\n \n \n\n```\n\nYou can nest primitive objects—which is good for awaiting async textures and such. You could use React-suspense if you wanted!\n\n```jsx\n\n img && (self.needsUpdate = true)} />\n\n```\n\nSometimes attaching isn't enough. For example, this code attaches effects to an array called \"passes\" of the parent `effectComposer`. Note the use of `attachArray` which adds the object to the target array and takes it out on unmount:\n\n```jsx\n\n \n \n\n```\n\nYou can also attach to named parent properties using `attachObject={[target, name]}`, which adds the object and takes it out on unmount. The following adds a buffer-attribute to parent.attributes.position. \n\n```jsx\n\n \n\n```\n\n#### Piercing into nested properties\n\nIf you want to reach into nested attributes (for instance: `mesh.rotation.x`), just use dash-case:\n\n```jsx\n\n```\n\n#### Putting already existing objects into the scene-graph\n\nYou can use the `primitive` placeholder for that. You can still give it properties or attach nodes to it.\n\n```jsx\nconst mesh = new THREE.Mesh()\nreturn \n```\n\n#### Using 3rd-party (non THREE namespaced) objects in the scene-graph\n\nThe `apply` function extends three-fibers catalogue of known native elements. These objects become available and can now be directly instantiated.\n\n```jsx\nimport { apply } from 'react-three-fiber'\nimport { EffectComposer } from './postprocessing/EffectComposer'\nimport { RenderPass } from './postprocessing/RenderPass'\n\napply({ EffectComposer, RenderPass })\n\n\n \n\n```\n\n# Events\n\nTHREE objects that implement their own `raycast` method (for instance meshes, lines, etc) can be interacted with by declaring events on the object. We support pointer events ([you need to polyfill them yourself](https://github.com/jquery/PEP)), clicks and wheel-scroll.\n\nAdditionally there's a special `onUpdate` that is called every time the object is updated with fresh props (as well as when it's first being created).\n\nThe event data you receive contains the browser event as well as the Threejs event data (object, point, distance, etc) all merged into one object.\n\n```jsx\n console.log('click')}\n onWheel={e => console.log('wheel spins')}\n onPointerUp={e => console.log('up')}\n onPointerDown={e => console.log('down')}\n onPointerOver={e => console.log('hover')}\n onPointerOut={e => console.log('unhover')}\n onPointerMove={e => console.log('move')}\n onUpdate={self => console.log('props have been updated')}\n```\n\n#### Propagation and capturing\n\n```jsx\n onPointerDown={e => {\n // Only the mesh closest to the camera will be processed\n e.stopPropagation()\n // You may optionally capture the target\n e.target.setPointerCapture(e.pointerId)\n }}\n onPointerUp={e => {\n e.stopPropagation()\n // Optionally release capture\n e.target.releasePointerCapture(e.pointerId)\n }}\n```\n\n# Hooks\n\nAll hooks can only be used *inside* the Canvas element because they rely on context updates!\n\n#### useThree()\n\nThis hooks gives you access to all the basic objects that are kept internally, like the default renderer, scene, camera. It also gives you the size of the canvas in screen and viewport coordinates. When you resize the canvas, or the browser window, your component will be updated with fresh values. \n\n```jsx\nimport { useThree } from 'react-three-fiber'\n\nconst { \n gl, // WebGL renderer\n canvas, // canvas the dom element that was created\n scene, // Default scene\n camera, // Default camera\n size, // Bounds of the view (which stretches 100% and auto-adjusts)\n viewport, // Bounds of the viewport in 3d units + factor (size/viewport)\n aspect, // Aspect ratio (size.width / size.height)\n invalidate, // Invalidates a single frame (for )\n setDefaultCamera // Sets the default camera\n} = useThree()\n```\n\n#### useRender(callback, takeOver=false)\n\nIf you're running effects, postprocessings, controls, etc that need to get updated every frame, useRender gives you access to the render-loop. You receive the internal state as well, which is the same as what you would get from useThree.\n\n```jsx\nimport { useRender } from 'react-three-fiber'\n\n// Subscribes to the render-loop, gets cleaned up automatically when the component unmounts\nuseRender(state => console.log(\"I'm in the render-loop\"))\n\n// Add a \"true\" as the 2nd argument and you take over the render-loop completely\nuseRender(({ gl, scene, camera }) => gl.render(scene, camera), true)\n```\n\n#### useUpdate(callback, denpendencies, optionalRef=undefined)\n\nSometimes objects have to be updated imperatively. You could update the parts that you can access declaratively and then call `onUpdate={self => ...}`, or there's useUpdate.\n\n```jsx\nimport { useUpdate } from 'react-three-fiber'\n\nconst ref = useUpdate( \n geometry => {\n geometry.addAttribute('position', getCubeVertices(x, y, z))\n geometry.attributes.position.needsUpdate = true\n geometry.computeBoundingSphere()\n }, \n [x, y, z], // execute only if these properties change\n)\nreturn \n```\n\n#### useResource(optionalRef=undefined)\n\n\nMaterials and such aren't normally re-created for every instance using it. You may want to share and re-use resources. This can be done imperatively simply by maintaining the object yourself, but it can also be done declaratively by using refs. `useResource` simply creates a ref and re-renders the component when it becomes available next frame. You can pass this reference on, or even channel it through a context provider.\n\n```jsx\nimport { useResource } from 'react-three-fiber'\n\nconst [ref, material] = useResource()\nreturn (\n \n {material && (\n \n \n \n )}\n)\n```\n\n# Receipes\n\n## Handling loaders\n\nYou can use React's built-in memoizing-features (as well as suspense) to build async dependence graphs.\n\n```jsx\nfunction Image({ url }) {\n const texture = useMemo(() => new THREE.TextureLoader().load(url), [url])\n return (\n \n \n \n \n \n \n )\n}\n```\n\n## Dealing with effects (hijacking main render-loop)\n\nManaging effects can get quite complex normally. Drop the component below into a scene and you have a live effect. Remove it and everything is as it was without any re-configuration.\n\n```jsx\nimport { apply, Canvas, useRender, useThree } from 'react-three-fiber'\nimport { EffectComposer } from './postprocessing/EffectComposer'\nimport { RenderPass } from './postprocessing/RenderPass'\nimport { GlitchPass } from './postprocessing/GlitchPass'\n// Makes these objects available as native objects \"\" and so on\napply({ EffectComposer, RenderPass, GlitchPass })\n\nfunction Effects({ factor }) {\n const { gl, scene, camera, size } = useThree()\n const composer = useRef()\n useEffect(() => void composer.current.setSize(size.width, size.height), [size])\n // This takes over as the main render-loop (when 2nd arg is set to true)\n useRender(() => composer.current.render(), true)\n return (\n \n \n \n \n )\n}\n```\n\n## Heads-up display (rendering multiple scenes)\n\n`useRender` allows components to hook into the render-loop, or even to take it over entirely. That makes it possible for one component to render over the content of another. The order of these operations is established by the scene-graph.\n\n```jsx\nfunction Content({ camera }) {\n const scene = useRef()\n useRender(({ gl }) => void ((gl.autoClear = true), gl.render(scene.current, camera)), true)\n return {/* ... */}\n}\n\nfunction HeadsUpDisplay({ camera }) {\n const scene = useRef()\n useRender(({ gl }) => void ((gl.autoClear = false), gl.clearDepth(), gl.render(scene.current, camera)))\n return {/* ... */}\n}\n\nfunction Main() {\n const camera = useRef()\n const { width, height } = useThree().size\n return (\n <>\n self.updateProjectionMatrix()}\n />\n {camera.current && (\n \n \n \n \n )}\n \n )\n}\n```\n\n## Managing imperative code\n\nStick imperative stuff into useMemo and write out everything else declaratively. This is how you can quickly form reactive, re-usable components that can be bound to a store, graphql, etc.\n\n```jsx\nfunction Extrusion({ start = [0,0], paths, ...props }) {\n const shape = useMemo(() => {\n const shape = new THREE.Shape()\n shape.moveTo(...start)\n paths.forEach(path => shape.bezierCurveTo(...path))\n return shape\n }, [start, paths])\n\n return (\n \n \n \n \n )\n}\n```\n\nThen ...\n\n```jsx\n\n```\n\n## ShaderMaterials\n\n```jsx\nfunction CrossFade({ url1, url2, disp }) {\n const [texture1, texture2, dispTexture] = useMemo(() => {\n const loader = new THREE.TextureLoader()\n return [loader.load(url1), loader.load(url2), loader.load(disp)]\n }, [url1, url2, disp])\n return (\n \n \n \n \n )\n}\n```\n\n## Rendering only when needed\n\nBy default it renders like a game loop, which isn't that battery efficient. Switch on `invalidateFrameloop` to activate loop invalidation, which is automatic most of the time.\n\n```jsx\n\n```\n\nSometimes you must be able to kick off frames manually, for instance when you're dealing with async stuff or camera controls:\n\n```jsx\nconst { invalidate } = useThree()\nconst texture = useMemo(() => loader.load(url1, invalidate), [url1])\n```\n\n## Switching the default renderer\n\nIf you want to exchange the default renderer you can. But, you will lose some of the functionality, like useRender, useThree, events, which is all covered in canvas.\n\n```jsx\nimport { render, unmountComponentAtNode } from 'react-three-fiber'\n\nconst renderer = new THREE.SVGRenderer()\nrenderer.setSize(window.innerWidth, window.innerHeight)\ndocument.body.appendChild(renderer.domElement)\nconst camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)\nconst scene = new THREE.Scene()\n\nrender((\n \n \n \n \n), scene)\n```\n","readmeFilename":"readme.md"}