Files

T

kdletters 071faa482c 统一 Rust 与 TypeScript 格式化门禁

纳入 AGC Cargo workspace 的统一 rustfmt 检查与格式化入口

完成项目 TypeScript/Prettier 与 Rust 全量格式化

修复 Pingora expected executable 门禁的空白敏感误报

同步开发运维文档与 AGC skill pack 格式化忽略规则

2026-09-01 16:28:34 +08:00

1.4 KiB

Raw Blame History

React Three Fiber Starter

Use this as the smallest canonical starting point for a React-hosted 3D scene.

Files

src/
  App.tsx

`src/App.tsx`

import { Canvas } from '@react-three/fiber';

function Spinner() {
  return (
    <mesh rotation={[0.4, 0.6, 0]}>
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color="#3dd9b8" />
    </mesh>
  );
}

export default function App() {
  return (
    <div className="app-shell">
      <Canvas camera={{ position: [0, 1.5, 4], fov: 60 }}>
        <color attach="background" args={['#101418']} />
        <ambientLight intensity={0.7} />
        <directionalLight position={[4, 6, 3]} intensity={1.2} />
        <Spinner />
      </Canvas>
      <div className="hud">
        <div className="objective-chip">Reach the lantern bridge.</div>
        <div className="hint-pill">WASD to move. Hold mouse to look.</div>
      </div>
    </div>
  );
}

Notes

Start here when the 3D scene lives inside an existing React app.
Keep the initial HUD sparse. One compact objective surface and one transient hint is usually enough for a first playable scaffold.
Put lore, notes, map, and settings behind drawers or modals instead of opening them all by default.
Add GLB loading with gltf-loading-starter.md.
Add physics with rapier-integration-starter.md.
Use three-hud-layout-patterns.md for low-chrome 3D overlay defaults.

1.4 KiB Raw Blame History

React Three Fiber Starter

Files

src/App.tsx

Notes

1.4 KiB

Raw Blame History

`src/App.tsx`