Add some bullshit

.direnv/bin/nix-direnv-reload

@@ -0,0 +1,8 @@
+#!/usr/bin/env bash
+dir="$(realpath $(dirname ${BASH_SOURCE[0]})/../..)"
+_nix_direnv_force_reload=1 direnv exec "$dir" true
+direnv reload
+# direnv reload updates the mtime of .envrc. Also update the timestamp of the
+# profile_rc file to keep track that we actually are up to date.
+touch $dir/.direnv/{nix,flake}-profile-*.rc
+

.direnv/flake-inputs/2n6a4hmaqn29szsaipzs18qk7ny7wx7c-source

@@ -0,0 +1 @@
+/nix/store/2n6a4hmaqn29szsaipzs18qk7ny7wx7c-source

.direnv/flake-inputs/l2azilwxx2s8w3i4rf7s8l9g63hq8rnb-source

@@ -0,0 +1 @@
+/nix/store/l2azilwxx2s8w3i4rf7s8l9g63hq8rnb-source

.direnv/flake-inputs/na7sykizsgkzh9i3wc8m8pz5xfqib2rv-source

@@ -0,0 +1 @@
+/nix/store/na7sykizsgkzh9i3wc8m8pz5xfqib2rv-source

.direnv/flake-inputs/yj1wxm9hh8610iyzqnz75kvs6xl8j3my-source

@@ -0,0 +1 @@
+/nix/store/yj1wxm9hh8610iyzqnz75kvs6xl8j3my-source

.direnv/flake-profile-a5d5b61aa8a61b7d9d765e1daf971a9a578f1cfa

@@ -0,0 +1 @@
+/nix/store/aas4h73h9hk22gwkp9y6c255hxd4kyhk-nix-shell-env

.envrc

@@ -0,0 +1 @@
+use flake

.eslintrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.md

@@ -0,0 +1,30 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default {
+  // other rules...
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: ['./tsconfig.json', './tsconfig.node.json'],
+    tsconfigRootDir: __dirname,
+  },
+}
+```
+
+- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
+- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list

flake.lock

@@ -0,0 +1,61 @@
+{
+  "nodes": {
+    "nixpkgs": {
+      "locked": {
+        "lastModified": 1714656196,
+        "narHash": "sha256-kjQkA98lMcsom6Gbhw8SYzmwrSo+2nruiTcTZp5jK7o=",
+        "owner": "NixOS",
+        "repo": "nixpkgs",
+        "rev": "94035b482d181af0a0f8f77823a790b256b7c3cc",
+        "type": "github"
+      },
+      "original": {
+        "owner": "NixOS",
+        "ref": "nixpkgs-unstable",
+        "repo": "nixpkgs",
+        "type": "github"
+      }
+    },
+    "root": {
+      "inputs": {
+        "nixpkgs": "nixpkgs",
+        "utils": "utils"
+      }
+    },
+    "systems": {
+      "locked": {
+        "lastModified": 1681028828,
+        "narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=",
+        "owner": "nix-systems",
+        "repo": "default",
+        "rev": "da67096a3b9bf56a91d16901293e51ba5b49a27e",
+        "type": "github"
+      },
+      "original": {
+        "owner": "nix-systems",
+        "repo": "default",
+        "type": "github"
+      }
+    },
+    "utils": {
+      "inputs": {
+        "systems": "systems"
+      },
+      "locked": {
+        "lastModified": 1710146030,
+        "narHash": "sha256-SZ5L6eA7HJ/nmkzGG7/ISclqe6oZdOZTNoesiInkXPQ=",
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "rev": "b1d9ab70662946ef0850d488da1c9019f3a9752a",
+        "type": "github"
+      },
+      "original": {
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "type": "github"
+      }
+    }
+  },
+  "root": "root",
+  "version": 7
+}

flake.nix

@@ -0,0 +1,18 @@
+{
+  inputs = {
+    nixpkgs.url = "github:NixOS/nixpkgs/nixpkgs-unstable";
+    utils.url = "github:numtide/flake-utils";
+  };
+
+  outputs = { self, nixpkgs, utils }:
+      utils.lib.eachDefaultSystem (system:
+        let 
+          pkgs = import nixpkgs { inherit system; };
+        in {
+          devShell = with pkgs; mkShell {
+            buildInputs = with pkgs; [ nodejs_22 ];
+            LD_LIBRARY_PATH = lib.makeLibraryPath [ stdenv.cc.cc.lib ];
+          };
+        }
+      );
+}

index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package.json

@@ -0,0 +1,33 @@
+{
+  "name": "react-three-silly",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@react-three/fiber": "^8.16.3",
+    "@react-three/rapier": "^1.3.1",
+    "@types/three": "^0.164.0",
+    "maath": "^0.10.7",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "three": "^0.164.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.64",
+    "@types/react-dom": "^18.2.21",
+    "@typescript-eslint/eslint-plugin": "^7.1.1",
+    "@typescript-eslint/parser": "^7.1.1",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "typescript": "^5.2.2",
+    "vite": "^5.1.6"
+  }
+}

public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

src/App.tsx

@@ -0,0 +1,79 @@
+import { Canvas, useFrame, useThree } from '@react-three/fiber'
+import { CuboidCollider, Physics, RigidBody } from '@react-three/rapier';
+import { useRef, useState } from 'react'
+import { DirectionalLight, Euler, PCFSoftShadowMap, VSMShadowMap, Vector3 } from 'three';
+
+function Sub() {
+  const camera = useThree(s => s.camera);
+
+  camera.position.y = 2;
+  camera.position.z = 5;
+  camera.rotation.x = -(Math.PI / 6);
+  return <></>
+}
+
+function HeRotates() {
+  const rotation = useRef(0);
+  const objRef = useRef<DirectionalLight>(null);
+  useFrame((three, dt) => {
+    rotation.current += dt;
+    const radius = 5;
+    const centerX = 0;
+    const centerY = 0;
+  
+    const x = (radius * Math.cos(rotation.current)) + centerX;
+    const z = (radius * Math.sin(rotation.current)) + centerY;
+    if (objRef.current) {
+      objRef.current.position.x = x;
+      objRef.current.position.z = z;
+    }
+  });
+  
+  return <directionalLight color="white" position={[0, 3, 0]} ref={objRef} intensity={3.0} castShadow={true} />
+}
+
+function App() {
+  const testRef = useRef();
+  window.amogus = testRef;
+  return (
+    <>
+      <Canvas style={{
+        height: '100%'
+      }}
+      shadows={{
+        type: PCFSoftShadowMap,
+      }}
+      camera={{
+        fov: 90
+      }}
+      >
+        <Sub />
+        <ambientLight intensity={0.1} />
+        <HeRotates />
+        <Physics
+        debug
+        >
+          <RigidBody friction={0} enabledRotations={[true, true, true]} mass={2}>
+            <mesh position={new Vector3(0, 1.5, 0)} rotation={new Euler(-Math.PI/4, 0, -Math.PI/4)}  castShadow={true}>
+              <boxGeometry args={[1, 1, 1]} />
+              <meshStandardMaterial color={'red'} />
+            </mesh>
+          </RigidBody>
+          <RigidBody ref={testRef} friction={0} enabledRotations={[true, true, true]} mass={50} angularVelocity={[50, 50, 50]}>
+            <mesh position={new Vector3(3, 1.5, 0)} rotation={new Euler(-Math.PI/4, 0, -Math.PI/4)}  castShadow={true}>
+              <boxGeometry args={[1, 1, 1]} />
+              <meshStandardMaterial color={'red'} />
+            </mesh>
+          </RigidBody>
+          <CuboidCollider args={[5, 1, 5]} position={[0, -1, 0]} friction={2}/>
+          <mesh rotation={new Euler(-Math.PI/2, 0, 0)} receiveShadow={true}>
+            <planeGeometry args={[10, 10]} />
+            <meshStandardMaterial color={'white'} />
+          </mesh>
+        </Physics>
+      </Canvas>
+    </>
+  )
+}
+
+export default App

src/index.css

@@ -0,0 +1,8 @@
+body {
+  margin: 0;
+
+}
+#root {
+  width: 100vw;
+  height: 100vh;
+}

src/main.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.tsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}

vite.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})