AndrewPrifer · AriaMinaei · May 14, 2021 · May 16, 2021 · May 16, 2021 · May 18, 2021
diff --git a/.gitignore b/.gitignore
@@ -5,3 +5,13 @@ node_modules
 dist
 
 .idea
+.history
+**/.eslintcache
+
+.yarn/*
+!.yarn/patches
+!.yarn/releases
+!.yarn/plugins
+!.yarn/sdks
+!.yarn/versions
+.pnp.*
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,16 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "files.exclude": {
+    "**/node_modules": true,
+    "**/.yarn": true,
+    "**/.cache": true,
+    "**/.temp": true,
+    "**/.history": true
+  },
+  "search.exclude": {
+    "**/node_modules": true,
+    "**/bower_components": true,
+    "**/*.code-search": true,
+    "**/dist": true
+  }
+}
diff --git a/.yarn/releases/yarn-sources.cjs b/.yarn/releases/yarn-sources.cjs
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-sources.cjs
diff --git a/README.md b/README.md
@@ -12,7 +12,7 @@ yarn add react-three-editable
 
 ```tsx
 import React from 'react';
-import { Canvas } from 'react-three-fiber';
+import { Canvas } from '@react-three/fiber';
 import { editable as e, configure } from 'react-three-editable';
 
 // Import your previously exported state

diff --git a/example/.eslintcache b/example/.eslintcache
diff --git a/example/index.html b/example/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/example/package.json b/example/package.json
@@ -3,36 +3,23 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
-    "@types/jest": "^26.0.15",
-    "@types/node": "^12.0.0",
-    "react-scripts": "4.0.1",
-    "web-vitals": "^0.2.4"
+    "@react-three/drei": "^4.3.3",
+    "@theatre/core": "0.3.0-dev",
+    "@theatre/studio": "0.3.0-dev",
+    "@types/jest": "^26.0.23",
+    "@types/node": "^15.0.3",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-three-editable": "workspace:*",
+    "@react-three/fiber": "^6.0.13",
+    "three": "^0.128.0"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "start": "vite"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+  "devDependencies": {
+    "@vitejs/plugin-react-refresh": "^1.3.3",
+    "typescript": "^4.2.4",
+    "vite": "^2.3.2"
   }
 }
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -1,49 +1,139 @@
-import React from 'react';
-import { Canvas } from 'react-three-fiber';
-import { EditableManager, editable as e, configure } from '../../';
+import '@theatre/studio';
+import { editable as e, configure } from 'react-three-editable';
 import { PerspectiveCamera } from '@react-three/drei';
+import { getProject } from '@theatre/core';
+import * as THREE from 'three';
+import React, { useState, useEffect, useRef } from 'react';
+import { Canvas, useFrame } from '@react-three/fiber';
+import { softShadows, Shadow } from '@react-three/drei';
+
+// console.log(studio);
 
 const ECamera = e(PerspectiveCamera, 'perspectiveCamera');
 
-function App() {
+const bindToCanvas = configure({});
+
+// 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();
+  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;
+    state.camera.fov = THREE.MathUtils.lerp(
+      state.camera.fov,
+      zoom ? 10 : 42,
+      step
+    );
+    state.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 (
-    <Canvas shadowMap>
-      <EditableManager />
-      <ECamera makeDefault uniqueName="Camera" />
-      <e.spotLight
-        uniqueName="Key Light"
-        shadow-mapSize-width={2048}
-        shadow-mapSize-height={2048}
-        castShadow
+    <mesh
+      receiveShadow
+      castShadow
+      onClick={() => set(!zoom)}
+      onPointerOver={() => setActive(true)}
+      onPointerOut={() => setActive(false)}
+    >
+      <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]}
       />
-      <e.spotLight
-        uniqueName="Fill Light"
-        shadow-mapSize-width={2048}
-        shadow-mapSize-height={2048}
+      <directionalLight
+        ref={light}
         castShadow
+        intensity={1.5}
+        shadow-camera-far={70}
+      />
+    </mesh>
+  );
+}
+
+function Plane({ color, uniqueName, ...props }) {
+  return (
+    <e.mesh receiveShadow castShadow {...props} uniqueName={uniqueName}>
+      <boxBufferGeometry />
+      <meshStandardMaterial color={color} />
+    </e.mesh>
+  );
+}
+
+function App() {
+  return (
+    <Canvas
+      shadowMap
+      onCreated={bindToCanvas({
+        theatreProject: getProject('Example project'),
+      })}
+    >
+      <ECamera makeDefault uniqueName="Camera" />
+      <ambientLight intensity={0.4} />
+      <pointLight position={[-10, -10, 5]} intensity={2} color="#ff20f0" />
+      <pointLight
+        position={[0, 0.5, -1]}
+        distance={1}
+        intensity={2}
+        color="#e4be00"
       />
-      <e.mesh uniqueName="Ground" receiveShadow>
-        <planeBufferGeometry />
-        <meshStandardMaterial color="lightblue" />
-      </e.mesh>
-      <e.group uniqueName="Ice Cream">
-        <e.mesh uniqueName="Cone" castShadow>
-          <coneBufferGeometry />
-          <meshStandardMaterial color="orange" />
-        </e.mesh>
-        <e.mesh uniqueName="Scoop 1" castShadow>
-          <sphereBufferGeometry />
-          <meshStandardMaterial color="red" />
-        </e.mesh>
-        <e.mesh uniqueName="Scoop 2" castShadow>
-          <sphereBufferGeometry />
-          <meshStandardMaterial color="green" />
-        </e.mesh>
-        <e.mesh uniqueName="Scoop 3" castShadow>
-          <sphereBufferGeometry />
-          <meshStandardMaterial color="blue" />
-        </e.mesh>
-      </e.group>
+      <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 />
     </Canvas>
   );
 }

diff --git a/example/src/index.tsx b/example/src/index.tsx
@@ -2,16 +2,10 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
-import reportWebVitals from './reportWebVitals';
 
 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
   document.getElementById('root')
 );
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
diff --git a/example/src/reportWebVitals.ts b/example/src/reportWebVitals.ts
diff --git a/example/src/setupTests.ts b/example/src/setupTests.ts
diff --git a/example/tsconfig.json b/example/tsconfig.json
@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -17,10 +13,13 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
+    "rootDir": ".",
     "noEmit": true,
-    "jsx": "react"
+    "jsx": "react",
+    "paths": {
+      "react-three-editable": ["../src/index.tsx"]
+    }
   },
-  "include": [
-    "src"
-  ]
+  "include": ["src"],
+  "exclude": ["**/node_modules"]
 }
diff --git a/example/vite.config.ts b/example/vite.config.ts
@@ -0,0 +1,24 @@
+import { defineConfig } from 'vite';
+import reactRefresh from '@vitejs/plugin-react-refresh';
+import * as path from 'path';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  resolve: {
+    alias: {
+      'react-three-editable': path.resolve(__dirname, '../src/index.tsx'),
+    },
+  },
+  define: {
+    global: 'window',
+  },
+  plugins: [reactRefresh()],
+  server: {
+    fsServe: {
+      root: '..',
+    },
+  },
+  optimizeDeps: {
+    include: ['@theatre/studio'],
+  },
+});
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		nodeLinker: node-modules

		yarnPath: .yarn/releases/yarn-sources.cjs