New Root API

examples/create-a-game-with-r3f/src/Experience.tsx

@@ -1,5 +1,5 @@
 import { OrbitControls } from "@react-three/drei"
-import { EditorRoot, extendControls } from "@react-three/editor"
+import { extendControls } from "@react-three/editor"
 import { Physics, RigidBody } from "@react-three/rapier"
 import { BlockAxe } from "./components/BlockAxe.js"
 import { BlockEnd } from "./components/BlockEnd.js"
@@ -37,10 +37,8 @@ export default function Experience() {
     <>
       <OrbitControls makeDefault />
       <Physics>
-        <EditorRoot>
-          <Level />
-          <Lights />
-        </EditorRoot>
+        <Level />
+        <Lights />
         <Player />
         {/* <gridHelper /> */}
       </Physics>

examples/create-a-game-with-r3f/src/Game.tsx

@@ -1,5 +1,4 @@
 import { OrbitControls, Sphere } from "@react-three/drei"
-import { EditorRoot } from "@react-three/editor"
 import { useFrame, useThree } from "@react-three/fiber"
 import { Physics } from "@react-three/rapier"
 import { useEffect, useRef, useState } from "react"
@@ -71,20 +70,18 @@ export function Game() {
 
   return (
     <Physics>
-      <EditorRoot>
-        <TestTerrain />
-        <Sphere ref={sphereRef} args={[1]} visible={false} />
+      <TestTerrain />
+      <Sphere ref={sphereRef} args={[1]} visible={false} />
 
-        <ambientLight ref={aLightRef} intensity={0.5} />
-        <directionalLight
-          ref={dLightRef}
-          position={[0, 10, 0]}
-          intensity={0.5}
-          castShadow={true}
-        />
+      <ambientLight ref={aLightRef} intensity={0.5} />
+      <directionalLight
+        ref={dLightRef}
+        position={[0, 10, 0]}
+        intensity={0.5}
+        castShadow={true}
+      />
 
-        <OrbitControls />
-      </EditorRoot>
+      <OrbitControls />
     </Physics>
   )
 }

examples/create-a-game-with-r3f/src/index.tsx

@@ -37,7 +37,6 @@ root.render(
   >
     <Canvas
       ref={(node) => {
-        console.log("hereee")
         // store.canvas = node
       }}
       camera={{

examples/example/src/demos/ClickAndHover.tsx

@@ -1,12 +1,17 @@
-import * as THREE from 'three'
-import React, { useState, useRef } from 'react'
-import { Canvas, useFrame } from '@react-three/fiber'
+import { Canvas, useFrame } from "@react-three/fiber"
+import React, { useRef, useState } from "react"
+import * as THREE from "three"
 
-const mesh = new THREE.Mesh(new THREE.BoxGeometry(), new THREE.MeshBasicMaterial({ color: 'red' }))
+const mesh = new THREE.Mesh(
+  new THREE.BoxGeometry(),
+  new THREE.MeshBasicMaterial({ color: "red" })
+)
+mesh.castShadow = true
 const group = new THREE.Group()
 group.add(mesh)
 
 function Box(props: any) {
+  console.log("helloo")
   const ref = useRef<THREE.Mesh>(null!)
   const [hovered, setHovered] = useState(false)
   const [clicked, setClicked] = useState(false)
@@ -20,15 +25,18 @@ function Box(props: any) {
       onPointerOut={(e) => setHovered(false)}
       onClick={() => setClicked(!clicked)}
       scale={clicked ? [1.5, 1.5, 1.5] : [1, 1, 1]}
-      {...props}>
+      {...props}
+    >
       <boxGeometry />
-      <meshBasicMaterial color={hovered ? 'hotpink' : 'aquamarine'} />
+      <meshBasicMaterial color={hovered ? "hotpink" : "aquamarine"} />
     </mesh>
   )
 }
 
 function Box2(props: any) {
-  return <primitive object={group} {...props} onClick={() => console.log('hi')} />
+  return (
+    <primitive object={group} {...props} onClick={() => console.log("hi")} />
+  )
 }
 
 export default function App() {

examples/example/src/demos/ResetProps.tsx

@@ -1,97 +1,99 @@
-import * as THREE from 'three'
-import React, { useEffect, useState, useRef } from 'react'
-import { Canvas, useThree, useFrame } from '@react-three/fiber'
-import { OrbitControls } from '@react-three/drei'
+import { OrbitControls } from "@react-three/drei";
+import { Canvas, useFrame, useThree } from "@react-three/fiber";
+import React, { useEffect, useRef, useState } from "react";
+import * as THREE from "three";
 
 function AdaptivePixelRatio() {
-  const gl = useThree((state) => state.gl)
-  const current = useThree((state) => state.performance.current)
-  const initialDpr = useThree((state) => state.viewport.initialDpr)
-  const setDpr = useThree((state) => state.setDpr)
-  // Restore initial pixelratio on unmount
-  useEffect(() => {
-    const domElement = gl.domElement
-    return () => {
-      setDpr(initialDpr)
-      domElement.style.imageRendering = 'auto'
-    }
-  }, [])
-  // Set adaptive pixelratio
-  useEffect(() => {
-    setDpr(current * initialDpr)
-    gl.domElement.style.imageRendering = current === 1 ? 'auto' : 'pixelated'
-  }, [current])
-  return null
+    const gl = useThree(state => state.gl);
+    const current = useThree(state => state.performance.current);
+    const initialDpr = useThree(state => state.viewport.initialDpr);
+    const setDpr = useThree(state => state.setDpr);
+
+    // Restore initial pixelratio on unmount
+    useEffect(() => {
+        const domElement = gl.domElement;
+
+        return () => {
+            setDpr(initialDpr);
+            domElement.style.imageRendering = "auto";
+        };
+    }, []);
+
+    // Set adaptive pixelratio
+    useEffect(() => {
+        setDpr(current * initialDpr);
+        gl.domElement.style.imageRendering = current === 1 ? "auto" : "pixelated";
+    }, [current]);
+
+    return null;
 }
 
 function AdaptiveEvents() {
-  const get = useThree((state) => state.get)
-  const current = useThree((state) => state.performance.current)
-  useEffect(() => {
-    const enabled = get().events.enabled
-    return () => void (get().events.enabled = enabled)
-  }, [])
-  useEffect(() => void (get().events.enabled = current === 1), [current])
-  return null
+    const get = useThree(state => state.get);
+    const current = useThree(state => state.performance.current);
+
+    useEffect(() => {
+        const enabled = get().events.enabled;
+        return () => void (get().events.enabled = enabled);
+    }, []);
+
+    useEffect(() => void (get().events.enabled = current === 1), [current]);
+    return null;
 }
 
 function Scene() {
-  const group = useRef<THREE.Group>(null!)
-  const [showCube, setShowCube] = useState(false)
-  const [hovered, setHovered] = useState(false)
-  const [color, setColor] = useState('pink')
+    const group = useRef<THREE.Group>(null!);
+    const [showCube, setShowCube] = useState(false);
+    const [hovered, setHovered] = useState(false);
+    const [color, setColor] = useState("pink");
 
-  useEffect(() => {
-    const interval = setInterval(() => setShowCube((showCube) => !showCube), 1000)
-    return () => clearInterval(interval)
-  }, [])
+    useEffect(() => {
+        const interval = setInterval(() => setShowCube(showCube => !showCube), 1000);
+        return () => clearInterval(interval);
+    }, []);
 
-  useFrame(({ clock }) => group.current?.rotation.set(Math.sin(clock.elapsedTime), 0, 0))
+    useFrame((
+        {
+            clock
+        }
+    ) => group.current?.rotation.set(Math.sin(clock.elapsedTime), 0, 0));
 
-  return (
-    <>
-      <ambientLight intensity={0.5} />
-      <pointLight position={[10, 10, 10]} intensity={2} />
-      <pointLight position={[-10, -10, -10]} color="red" intensity={4} />
-
-      <mesh
-        scale={hovered ? 1.25 : 1}
-        onPointerOver={() => setHovered(true)}
-        onPointerOut={() => setHovered(false)}
-        onClick={() => setColor(color === 'pink' ? 'peachpuff' : 'pink')}>
-        <sphereGeometry args={[0.5, 32, 32]} />
-        <meshStandardMaterial color={showCube ? 'white' : 'red'} />
-      </mesh>
-      <group ref={group}>
-        {showCube ? (
-          <mesh position={[1.5, 0, 0]}>
-            <boxGeometry args={[1, 1]} />
-            <meshNormalMaterial transparent opacity={0.5} />
-          </mesh>
-        ) : (
-          <mesh>
-            <icosahedronGeometry args={[1]} />
-            <meshStandardMaterial color="orange" transparent opacity={0.5} />
-          </mesh>
-        )}
-        <mesh position={[-2, -2, 0]}>
-          <sphereGeometry args={[0.2, 32, 32]} />
-          <meshPhongMaterial>
-            {showCube ? <color attach="color" args={[0, 0, 1]} /> : <color attach="color" args={[1, 0, 0]} />}
-          </meshPhongMaterial>
+    return (<>
+        <ambientLight intensity={0.5} />
+        <pointLight position={[10, 10, 10]} intensity={2.2} />
+        <pointLight position={[-10, -10, -10]} color="rgb(137, 48, 48)" intensity={6.6} />
+        <mesh scale={hovered ? 1.25 : 1} onPointerOver={() => setHovered(true)} onPointerOut={() => setHovered(false)} onClick={() => setColor(color === "pink" ? "peachpuff" : "pink")}>
+            <sphereGeometry args={[0.5, 32, 32]} />
+            <meshStandardMaterial color={showCube ? "white" : "red"} />
         </mesh>
-      </group>
-      <OrbitControls regress />
-      <AdaptivePixelRatio />
-      <AdaptiveEvents />
-    </>
-  )
+        <group ref={group}>
+            {showCube ? (<mesh position={[1.5, 0, 0]}>
+                <boxGeometry args={[1, 1]} />
+                <meshNormalMaterial transparent opacity={0.5} />
+            </mesh>) : (<mesh>
+                <icosahedronGeometry args={[1]} />
+                <meshStandardMaterial color="orange" transparent opacity={0.5} />
+            </mesh>)}
+            <mesh position={[-2, -2, 0]}>
+                <sphereGeometry args={[0.2, 32, 32]} />
+                <meshPhongMaterial>
+                    {showCube ? (<color attach="color" args={[0, 0, 1]} />) : (<color attach="color" args={[1, 0, 0]} />)}
+                </meshPhongMaterial>
+            </mesh>
+        </group>
+        <OrbitControls regress />
+        <AdaptivePixelRatio />
+        <AdaptiveEvents />
+    </>);
 }
 
 export default function App() {
-  return (
-    <Canvas dpr={[1, 2]} frameloop="always" performance={{ min: 0.1 }}>
-      <Scene />
-    </Canvas>
-  )
-}
+    return (<Canvas
+        dpr={[1, 2]}
+        frameloop="always"
+        performance={{
+            min: 0.1
+        }}>
+        <Scene />
+    </Canvas>);
+}