@crapthings/run3d 0.2.4 → 0.2.5

package/README.md

@@ -14,7 +14,9 @@ cd my-project
 pnpm dev
 ```
 
-Edit `src/Scene.jsx` to make it your own. To install dependencies later, add `--skip-install` to the first command.
+Edit the components in `src/Scenes` to make the starter scene your own. To install dependencies later, add `--skip-install` to the first command.
+
+Drag to orbit the scene, scroll to zoom, and right-drag to pan. Edit `src/Scenes/index.jsx` for the scene and its settings.
 
 ## Included tools
 
@@ -52,5 +54,6 @@ Edit `src/Scene.jsx` to make it your own. To install dependencies later, add `--
 
 - [React Router](https://github.com/remix-run/react-router) — connects URLs to pages and handles navigation.
 - [Tailwind CSS](https://github.com/tailwindlabs/tailwindcss) — styles the app.
+- [React Hotkeys Hook](https://github.com/JohannesKlauss/react-hotkeys-hook) — adds declarative keyboard shortcuts with a React hook.
 - [Headless UI](https://github.com/tailwindlabs/headlessui) — provides accessible, unstyled React UI components.
 - [Floating UI](https://github.com/floating-ui/floating-ui) — positions menus, tooltips, and popovers.

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "From idea to interactive 3D prototype in one command. A JavaScript starter with Vite, React Three Fiber, and tools for creative experimentation.",
   "type": "module",
   "bin": {

package/template/AGENTS.md

@@ -2,7 +2,7 @@
 
 ## Commands
 
-- Only run `pnpm build`, `pnpm lint`, or `pnpm test` when explicitly requested by the user.
+- Only run `pnpm build`, `pnpm lint`, or `pnpm test` when explicitly requested by the user, and never run `pnpm dev`.
 
 ## Code Style
 
@@ -11,3 +11,7 @@
 ## Scene Lighting
 
 - Avoid ambient lighting by default. Only add ambient lighting (such as `AmbientLight` or `HemisphereLight`) when explicitly requested by the user.
+
+## Texture Maps
+
+- When using texture maps, process them with the installed `three-hex-tiling` package to reduce visible texture repetition instead of relying on basic repeating UV tiling alone.

package/template/package.json

@@ -31,6 +31,7 @@
     "postprocessing": "^6.39.5",
     "react": "19.2.8",
     "react-dom": "19.2.8",
+    "react-hotkeys-hook": "^5.3.3",
     "react-router": "^7.18.3",
     "recast-navigation": "^0.43.1",
     "three": "^0.186.0",

package/template/pnpm-lock.yaml

@@ -220,6 +220,9 @@ importers:
       react-dom:
         specifier: 19.2.8
         version: 19.2.8(react@19.2.8)
+      react-hotkeys-hook:
+        specifier: ^5.3.3
+        version: 5.3.3(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       react-router:
         specifier: ^7.18.3
         version: 7.18.3(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
@@ -1327,6 +1330,12 @@ packages:
     peerDependencies:
       react: ^19.2.8
 
+  react-hotkeys-hook@5.3.3:
+    resolution: {integrity: sha512-aswgyWUnE25hmhzHTfKDmKzsaSE5DJ4LKaU/o6rQSXkDd/1Bh9TfAFQbHkf6fLy11HvlYkp+cDDarGdhmCDhoQ==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
   react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
@@ -2557,6 +2566,11 @@ snapshots:
       react: 19.2.8
       scheduler: 0.27.0
 
+  react-hotkeys-hook@5.3.3(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
+    dependencies:
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+
   react-is@16.13.1: {}
 
   react-router@7.18.3(react-dom@19.2.8(react@19.2.8))(react@19.2.8):

package/template/src/App.jsx

@@ -1,4 +1,4 @@
-import { Scene } from '@/Scene'
+import { Scene } from '@/Scenes'
 
 export function App () {
   return (

package/template/src/Scenes/index.jsx

@@ -0,0 +1,42 @@
+import { Canvas, extend } from '@react-three/fiber'
+import { Grid, OrbitControls, Sky } from '@react-three/drei'
+import { Perf } from 'r3f-perf'
+import { SunLight } from 'three/addons/lights/SunLight.js'
+
+extend({ SunLight })
+
+// One world unit represents one meter.
+export function Scene () {
+  return (
+    <Canvas camera={{ position: [4, 3.4, 6], fov: 50, far: 100 }} dpr={1} shadows>
+      {import.meta.env.DEV && <Perf position='top-right' />}
+      <sunLight
+        args={['#fff2e3', 2]}
+        position={[30, 45, 20]}
+        castShadow
+        shadow-camera-far={60}
+      />
+      <Sky distance={1000} rayleigh={1} sunPosition={[30, 45, 20]} turbidity={4} />
+      <mesh castShadow position-y={0.7}>
+        <boxGeometry args={[1.4, 1.4, 1.4]} />
+        <meshStandardMaterial color='#38bdf8' metalness={0.15} roughness={0.35} />
+      </mesh>
+      <mesh receiveShadow rotation-x={-Math.PI / 2} position-y={-0.01}>
+        <planeGeometry args={[64, 64]} />
+        <shadowMaterial transparent opacity={0.25} depthWrite={false} />
+      </mesh>
+      <Grid
+        args={[64, 64]}
+        cellColor='#cbd5e1'
+        cellSize={1}
+        cellThickness={0.5}
+        fadeDistance={32}
+        infiniteGrid
+        sectionColor='#94a3b8'
+        sectionSize={2}
+        sectionThickness={0.8}
+      />
+      <OrbitControls makeDefault target={[0, 0.7, 0]} />
+    </Canvas>
+  )
+}

package/template/src/Scene.jsx

@@ -1,80 +0,0 @@
-import { Canvas, extend } from '@react-three/fiber'
-import { Grid, OrbitControls, Sky, SpotLight } from '@react-three/drei'
-import { Perf } from 'r3f-perf'
-import { SunLight } from 'three/addons/lights/SunLight.js'
-
-extend({ SunLight })
-
-const SUN_POSITION = [30, 45, 20]
-
-function Box () {
-  return (
-    <mesh castShadow position-y={0.7}>
-      <boxGeometry args={[1.4, 1.4, 1.4]} />
-      <meshStandardMaterial color='#38bdf8' metalness={0.15} roughness={0.35} />
-    </mesh>
-  )
-}
-
-function Atmosphere () {
-  return (
-    <>
-      <Sky
-        distance={80}
-        mieCoefficient={0.005}
-        mieDirectionalG={0.8}
-        rayleigh={1}
-        sunPosition={SUN_POSITION}
-        turbidity={6}
-      />
-      <SpotLight
-        angle={0.35}
-        anglePower={4}
-        attenuation={80}
-        castShadow={false}
-        color='#fff2e3'
-        distance={70}
-        intensity={0}
-        opacity={0.035}
-        position={SUN_POSITION}
-        radiusBottom={14}
-        radiusTop={1}
-      />
-    </>
-  )
-}
-
-export function Scene () {
-  return (
-    <Canvas camera={{ position: [6, 4.8, 9.2], fov: 45, far: 100 }} dpr={[1, 1.5]} shadows>
-      {import.meta.env.DEV && <Perf position='top-right' />}
-      <color attach='background' args={['#b9d2e5']} />
-      <fogExp2 attach='fog' args={['#b9d2e5', 0.01]} />
-      <sunLight
-        args={[0xfff2e3, 3]}
-        castShadow
-        position={SUN_POSITION}
-        shadow-camera-far={60}
-      />
-      <Atmosphere />
-      <Box />
-      <mesh receiveShadow rotation-x={-Math.PI / 2} position-y={-0.01}>
-        <planeGeometry args={[60, 60]} />
-        <shadowMaterial transparent opacity={0.25} depthWrite={false} />
-      </mesh>
-      <Grid
-        args={[12, 12]}
-        cellColor='#cbd5e1'
-        cellSize={0.5}
-        cellThickness={0.6}
-        fadeDistance={18}
-        fadeStrength={1}
-        infiniteGrid
-        sectionColor='#94a3b8'
-        sectionSize={2}
-        sectionThickness={1}
-      />
-      <OrbitControls makeDefault target={[0, 0.7, 0]} />
-    </Canvas>
-  )
-}