New Root API

.github/workflows/gpt-commit-summarizer.yml

@@ -0,0 +1,20 @@
+name: GPT Commits summarizer
+# Summary: This action will write a comment about every commit in a pull request, 
+# as well as generate a summary for every file that was modified and add it to the
+# review page, compile a PR summary from all commit summaries and file diff 
+# summaries, and delete outdated code review comments
+
+on:
+  pull_request:
+    types: [opened, synchronize]
+
+jobs:
+  summarize:
+    runs-on: ubuntu-latest
+    permissions: write-all  # Some repositories need this line
+
+    steps:
+      - uses: KanHarI/gpt-commit-summarizer@master
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}

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>);
+}

examples/kitchen-sink/package.json

@@ -18,7 +18,7 @@
     "@react-three/drei": "^9.46.4",
     "@react-three/editor": "workspace:*",
     "@react-three/fiber": "^8.9.1",
-    "@types/three": "^0.135.0",
+    "@types/three": "^0.147.0",
     "leva": "^0.9.34",
     "react": "18.2.0",
     "react-dom": "18.2.0",

examples/r3f-journey-levels-level-1/package.json

@@ -18,7 +18,7 @@
     "@react-three/drei": "^9.46.4",
     "@react-three/editor": "workspace:*",
     "@react-three/fiber": "^8.9.1",
-    "@types/three": "^0.135.0",
+    "@types/three": "^0.147.0",
     "leva": "^0.9.34",
     "react": "18.2.0",
     "react-dom": "18.2.0",

examples/remotion/.prettierrc

@@ -0,0 +1,11 @@
+{
+  "printWidth": 120,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": false,
+  "singleQuote": false,
+  "trailingComma": "all",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": true,
+  "fluid": false
+}

examples/remotion/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>react-three-fiber example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>

examples/remotion/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "remotion",
+  "description": "Level 1 model from Three.js Journey course implemented with react-three-fiber",
+  "main": "src/index.jsx",
+  "keywords": [
+    "react",
+    "r3f",
+    "three.js",
+    "three.js journey"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview"
+  },
+  "dependencies": {
+    "@editable-jsx/remotion": "workspace:^0.0.1",
+    "@react-spring/three": "^9.3.2",
+    "@react-three/drei": "^9.46.4",
+    "@react-three/editor": "workspace:*",
+    "@react-three/fiber": "^8.9.1",
+    "@remotion/media-utils": "^3.3.27",
+    "@remotion/player": "^3.3.27",
+    "@remotion/three": "^3.3.27",
+    "@types/three": "^0.147.0",
+    "leva": "^0.9.34",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-scripts": "4.0.3",
+    "remotion": "^3.3.27",
+    "three": "0.147.0"
+  },
+  "devDependencies": {
+    "@types/react": "18.0.25",
+    "@types/react-dom": "^18.0.9",
+    "vite": "^3.0.7"
+  }
+}