Make @theatre/r3f play well with different vs of react,three,r3f th…

…eatre-js#177
xuliji · May 27, 2022 · 9b4aa4b · 9b4aa4b
1 parent e8c440f
commit 9b4aa4b
Show file tree

Hide file tree

Showing 50 changed files with 797 additions and 146 deletions.
diff --git a/compatibility-tests/test-cra-react18/package.json b/compatibility-tests/test-cra-react18/package.json
@@ -15,6 +15,7 @@
     "@testing-library/user-event": "^12.1.10",
     "@theatre/core": "^0.0.1-COMPAT.1",
     "@theatre/studio": "^0.0.1-COMPAT.1",
+    "@theatre/r3f": "^0.0.1-COMPAT.1",
     "react-scripts": "^5.0.1",
     "three": ">0.132.0",
     "web-vitals": "^1.0.1"

diff --git a/compatibility-tests/test-cra-react18/src/App.js b/compatibility-tests/test-cra-react18/src/App.js
@@ -1,6 +1,154 @@
-import React from 'react'
+import {getProject} from '@theatre/core'
+import * as THREE from 'three'
+import React, {useState, useEffect, useRef} from 'react'
+import {useFrame, Canvas} from '@react-three/fiber'
+import {Shadow, softShadows} from '@react-three/drei'
+import studio from '@theatre/studio'
+import {editable as e, SheetProvider} from '@theatre/r3f'
+import extension from '@theatre/r3f/dist/extension'
 
-export default function App({obj}) {
-  console.log(obj)
-  return <div>hi</div>
+if (process.env.NODE_ENV === 'development') {
+  studio.extend(extension)
+  studio.initialize()
 }
+
+// Soft shadows are expensive, comment and refresh when it's too slow
+softShadows()
+
+// credit: https://codesandbox.io/s/camera-pan-nsb7f
+
+function Button() {
+  const vec = new THREE.Vector3()
+  const light = useRef(undefined)
+  const [active, setActive] = useState(false)
+  const [zoom, set] = useState(true)
+  useEffect(
+    () => void (document.body.style.cursor = active ? 'pointer' : 'auto'),
+    [active],
+  )
+
+  useFrame((state) => {
+    const step = 0.1
+    const camera = state.camera
+    camera.fov = THREE.MathUtils.lerp(camera.fov, zoom ? 10 : 42, step)
+    camera.position.lerp(
+      vec.set(zoom ? 25 : 10, zoom ? 1 : 5, zoom ? 0 : 10),
+      step,
+    )
+    state.camera.lookAt(0, 0, 0)
+    state.camera.updateProjectionMatrix()
+
+    light.current.position.lerp(
+      vec.set(zoom ? 4 : 0, zoom ? 3 : 8, zoom ? 3 : 5),
+      step,
+    )
+  })
+
+  return (
+    <e.mesh
+      receiveShadow
+      castShadow
+      onClick={() => set(!zoom)}
+      onPointerOver={() => setActive(true)}
+      onPointerOut={() => setActive(false)}
+      uniqueName="The Button"
+    >
+      <sphereBufferGeometry args={[0.75, 64, 64]} />
+      <meshPhysicalMaterial
+        color={active ? 'purple' : '#e7b056'}
+        clearcoat={1}
+        clearcoatRoughness={0}
+      />
+      <Shadow
+        position-y={-0.79}
+        rotation-x={-Math.PI / 2}
+        opacity={0.6}
+        scale={[0.8, 0.8, 1]}
+      />
+      <directionalLight
+        ref={light}
+        castShadow
+        intensity={1.5}
+        shadow-camera-far={70}
+      />
+    </e.mesh>
+  )
+}
+
+function Plane({color, uniqueName, ...props}) {
+  return (
+    <e.mesh receiveShadow castShadow {...props} uniqueName={uniqueName}>
+      <boxBufferGeometry />
+      <meshStandardMaterial color={color} />
+    </e.mesh>
+  )
+}
+
+function App() {
+  return (
+    <div>
+      <Canvas
+        // @ts-ignore
+        shadowMap
+        gl={{preserveDrawingBuffer: true}}
+        linear
+        frameloop="demand"
+        dpr={[1.5, 2]}
+      >
+        <SheetProvider
+          sheet={getProject('Playground - R3F').sheet('R3F-Canvas')}
+        >
+          {/* @ts-ignore */}
+          <e.perspectiveCamera makeDefault uniqueName="Camera" />
+          <ambientLight intensity={0.4} />
+          <e.pointLight
+            position={[-10, -10, 5]}
+            intensity={2}
+            color="#ff20f0"
+            uniqueName="Light 1"
+          />
+          <e.pointLight
+            position={[0, 0.5, -1]}
+            distance={1}
+            intensity={2}
+            color="#e4be00"
+            uniqueName="Light 2"
+          />
+          <group position={[0, -0.9, -3]}>
+            <Plane
+              color="hotpink"
+              rotation-x={-Math.PI / 2}
+              position-z={2}
+              scale={[4, 20, 0.2]}
+              uniqueName="plane1"
+            />
+            <Plane
+              color="#e4be00"
+              rotation-x={-Math.PI / 2}
+              position-y={1}
+              scale={[4.2, 0.2, 4]}
+              uniqueName="plane2"
+            />
+            <Plane
+              color="#736fbd"
+              rotation-x={-Math.PI / 2}
+              position={[-1.7, 1, 3.5]}
+              scale={[0.5, 4, 4]}
+              uniqueName="plane3"
+            />
+            <Plane
+              color="white"
+              rotation-x={-Math.PI / 2}
+              position={[0, 4.5, 3]}
+              scale={[2, 0.03, 4]}
+              uniqueName="plane4"
+            />
+          </group>
+          <Button />
+        </SheetProvider>
+      </Canvas>
+    </div>
+  )
+}
+
+export default App
diff --git a/compatibility-tests/test-parcel1-react17/.gitignore b/compatibility-tests/test-parcel1-react17/.gitignore
@@ -0,0 +1,3 @@
+/.cache
+/dist
+/package-lock.json
diff --git a/compatibility-tests/test-parcel1-react17/index.html b/compatibility-tests/test-parcel1-react17/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Theatre.js Example - DOM</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script src="./src/index.js"></script>
+  </body>
+</html>
diff --git a/compatibility-tests/test-parcel1-react17/package.json b/compatibility-tests/test-parcel1-react17/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "@compat/parcel1-react18",
+  "scripts": {
+    "dev": "parcel serve ./index.html"
+  },
+  "dependencies": {
+    "parcel-bundler": "^1.12.5",
+    "@react-three/drei": "^7.3.1",
+    "@react-three/fiber": "^7.0.6",
+    "@theatre/core": "^0.0.1-COMPAT.1",
+    "@theatre/r3f": "^0.0.1-COMPAT.1",
+    "@theatre/studio": "^0.0.1-COMPAT.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "three": "^0.137.0"
+  }
+}
diff --git a/compatibility-tests/test-parcel1-react17/src/App.js b/compatibility-tests/test-parcel1-react17/src/App.js
@@ -0,0 +1,154 @@
+import {getProject} from '@theatre/core'
+import * as THREE from 'three'
+import React, {useState, useEffect, useRef} from 'react'
+import {useFrame, Canvas} from '@react-three/fiber'
+import {Shadow, softShadows} from '@react-three/drei'
+import studio from '@theatre/studio'
+import {editable as e, SheetProvider} from '@theatre/r3f'
+import extension from '@theatre/r3f/dist/extension'
+
+if (process.env.NODE_ENV === 'development') {
+  studio.extend(extension)
+  studio.initialize()
+}
+
+// Soft shadows are expensive, comment and refresh when it's too slow
+softShadows()
+
+// credit: https://codesandbox.io/s/camera-pan-nsb7f
+
+function Button() {
+  const vec = new THREE.Vector3()
+  const light = useRef(undefined)
+  const [active, setActive] = useState(false)
+  const [zoom, set] = useState(true)
+  useEffect(
+    () => void (document.body.style.cursor = active ? 'pointer' : 'auto'),
+    [active],
+  )
+
+  useFrame((state) => {
+    const step = 0.1
+    const camera = state.camera
+    camera.fov = THREE.MathUtils.lerp(camera.fov, zoom ? 10 : 42, step)
+    camera.position.lerp(
+      vec.set(zoom ? 25 : 10, zoom ? 1 : 5, zoom ? 0 : 10),
+      step,
+    )
+    state.camera.lookAt(0, 0, 0)
+    state.camera.updateProjectionMatrix()
+
+    light.current.position.lerp(
+      vec.set(zoom ? 4 : 0, zoom ? 3 : 8, zoom ? 3 : 5),
+      step,
+    )
+  })
+
+  return (
+    <e.mesh
+      receiveShadow
+      castShadow
+      onClick={() => set(!zoom)}
+      onPointerOver={() => setActive(true)}
+      onPointerOut={() => setActive(false)}
+      uniqueName="The Button"
+    >
+      <sphereBufferGeometry args={[0.75, 64, 64]} />
+      <meshPhysicalMaterial
+        color={active ? 'purple' : '#e7b056'}
+        clearcoat={1}
+        clearcoatRoughness={0}
+      />
+      <Shadow
+        position-y={-0.79}
+        rotation-x={-Math.PI / 2}
+        opacity={0.6}
+        scale={[0.8, 0.8, 1]}
+      />
+      <directionalLight
+        ref={light}
+        castShadow
+        intensity={1.5}
+        shadow-camera-far={70}
+      />
+    </e.mesh>
+  )
+}
+
+function Plane({color, uniqueName, ...props}) {
+  return (
+    <e.mesh receiveShadow castShadow {...props} uniqueName={uniqueName}>
+      <boxBufferGeometry />
+      <meshStandardMaterial color={color} />
+    </e.mesh>
+  )
+}
+
+function App() {
+  return (
+    <div>
+      <Canvas
+        // @ts-ignore
+        shadowMap
+        gl={{preserveDrawingBuffer: true}}
+        linear
+        frameloop="demand"
+        dpr={[1.5, 2]}
+      >
+        <SheetProvider
+          sheet={getProject('Playground - R3F').sheet('R3F-Canvas')}
+        >
+          {/* @ts-ignore */}
+          <e.perspectiveCamera makeDefault uniqueName="Camera" />
+          <ambientLight intensity={0.4} />
+          <e.pointLight
+            position={[-10, -10, 5]}
+            intensity={2}
+            color="#ff20f0"
+            uniqueName="Light 1"
+          />
+          <e.pointLight
+            position={[0, 0.5, -1]}
+            distance={1}
+            intensity={2}
+            color="#e4be00"
+            uniqueName="Light 2"
+          />
+          <group position={[0, -0.9, -3]}>
+            <Plane
+              color="hotpink"
+              rotation-x={-Math.PI / 2}
+              position-z={2}
+              scale={[4, 20, 0.2]}
+              uniqueName="plane1"
+            />
+            <Plane
+              color="#e4be00"
+              rotation-x={-Math.PI / 2}
+              position-y={1}
+              scale={[4.2, 0.2, 4]}
+              uniqueName="plane2"
+            />
+            <Plane
+              color="#736fbd"
+              rotation-x={-Math.PI / 2}
+              position={[-1.7, 1, 3.5]}
+              scale={[0.5, 4, 4]}
+              uniqueName="plane3"
+            />
+            <Plane
+              color="white"
+              rotation-x={-Math.PI / 2}
+              position={[0, 4.5, 3]}
+              scale={[2, 0.03, 4]}
+              uniqueName="plane4"
+            />
+          </group>
+          <Button />
+        </SheetProvider>
+      </Canvas>
+    </div>
+  )
+}
+
+export default App
diff --git a/compatibility-tests/test-parcel1-react17/src/index.js b/compatibility-tests/test-parcel1-react17/src/index.js
@@ -0,0 +1,13 @@
+import ReactDOM from 'react-dom'
+import '@theatre/studio'
+import React from 'react'
+import App from './App'
+
+console.log('hj')
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root'),
+)
diff --git a/compatibility-tests/test-vite-react18/package.json b/compatibility-tests/test-vite-react18/package.json
@@ -8,10 +8,14 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@react-three/drei": "^9.11.3",
+    "@react-three/fiber": "^8.0.19",
     "@theatre/core": "^0.0.1-COMPAT.1",
+    "@theatre/r3f": "^0.0.1-COMPAT.1",
     "@theatre/studio": "^0.0.1-COMPAT.1",
     "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react-dom": "^18.0.0",
+    "three": "^0.141.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",