@crapthings/run3d 0.2.3 → 0.2.4

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.2.3",
+  "version": "0.2.4",
   "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

@@ -1,4 +1,13 @@
 # Rules
 
+## Commands
+
 - Only run `pnpm build`, `pnpm lint`, or `pnpm test` when explicitly requested by the user.
+
+## Code Style
+
 - Follow JavaScript Standard Style (standard.js) when writing `.js` and `.jsx` files.
+
+## Scene Lighting
+
+- Avoid ambient lighting by default. Only add ambient lighting (such as `AmbientLight` or `HemisphereLight`) when explicitly requested by the user.

package/template/src/Scene.jsx

@@ -1,5 +1,11 @@
-import { Canvas } from '@react-three/fiber'
-import { Grid, OrbitControls } from '@react-three/drei'
+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 (
@@ -10,13 +16,52 @@ function Box () {
   )
 }
 
+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: [3, 2.4, 4.6], fov: 45 }} shadows>
-      <color attach='background' args={['#f8fafc']} />
-      <ambientLight intensity={0.8} />
-      <directionalLight castShadow intensity={2} position={[4, 6, 3]} />
+    <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'
@@ -29,7 +74,7 @@ export function Scene () {
         sectionSize={2}
         sectionThickness={1}
       />
-      <OrbitControls makeDefault />
+      <OrbitControls makeDefault target={[0, 0.7, 0]} />
     </Canvas>
   )
 }