Cursor rule
.cursor/rules/3d-graphics.mdcThree.js / React Three Fiber syntax: scene setup, R3F hooks, models, controls. Load for 3D code — taste, perf budgets, and mobile WebGL live in the 3d-web-experiences skill.
Cursor rules
Quality
62/100
Scores the file, not the repository.Length
552 words
9 headings · 6 code blocksRepository
124
— · pushed 49 days agoLast changed
3 days ago
First indexed 3 days ago.1234567# 3D Graphics — Syntax Reference89Mechanical patterns for Three.js, React Three Fiber (R3F), and `@react-three/drei`. For aesthetic direction, performance tiers, responsive/mobile WebGL, degradation, accessibility, and verified recipes, load the **`3d-web-experiences`** skill (`reference.md` for full scenes and bug catalog).1011Verify package APIs against installed versions before asserting prop names.1213---1415## CRITICAL: Container Dimensions1617A WebGL canvas without a sized parent renders at zero height or wrong aspect.1819```jsx20// WRONG21<div><Canvas><Scene /></Canvas></div>2223// CORRECT — explicit height on the container24<div style={{ height: '500px', width: '100%' }}>25 <Canvas><Scene /></Canvas>26</div>27```2829Vanilla Three.js: size the renderer to the **container**, not always `window` — use `ResizeObserver` or container `clientWidth` / `clientHeight`.3031---3233## R3F Canvas Baseline3435```jsx36import { Canvas } from '@react-three/fiber';37import { OrbitControls, Environment } from '@react-three/drei';3839export function Scene() {40 return (41 <div style={{ height: '500px', width: '100%' }}>42 <Canvas shadows dpr={[1, 2]} camera={{ position: [0, 0, 5], fov: 45 }}>43 <Environment preset="city" />44 <ambientLight intensity={0.4} />45 <directionalLight position={[5, 5, 5]} castShadow />46 <Mesh />47 <OrbitControls enableDamping />48 </Canvas>49 </div>50 );51}52```5354Set tone mapping and output color space on the renderer for PBR that is not flat — see `3d-web-experiences` → renderer baseline.5556---5758## Hooks & Imports (common bugs)5960```jsx61import { useRef, useState } from 'react';62import { useFrame } from '@react-three/fiber'; // NOT from 'react'63import type { Mesh } from 'three';6465function AnimatedBox() {66 const ref = useRef<Mesh>(null);67 useFrame((_, delta) => {68 if (ref.current) ref.current.rotation.y += delta;69 });70 return (71 <mesh ref={ref}>72 <boxGeometry />73 <meshStandardMaterial />74 </mesh>75 );76}77```7879| Mistake | Fix |80|---------|-----|81| `useFrame` from `react` | Import from `@react-three/fiber` |82| `<Detail>` from `three` | Use drei `<Detailed distances={[0, 10, 20]}>` with child meshes |83| `InstancedMesh` from fiber | Use JSX `<instancedMesh>`; `Object3D` from `three` |8485---8687## Models & Loading8889```jsx90import { Suspense } from 'react';91import { useGLTF, Html, useProgress } from '@react-three/drei';9293function Model({ url }) {94 const { scene } = useGLTF(url);95 return <primitive object={scene} />;96}97useGLTF.preload('/models/asset.glb');9899function Loader() {100 const { progress } = useProgress();101 return <Html center>{progress.toFixed(0)}%</Html>;102}103104// Wrap async assets:105<Suspense fallback={<Loader />}><Model url="…" /></Suspense>106```107108Prefer `.glb` with Draco/Meshopt compression for web (see skill → asset pipeline).109110---111112## LOD & Instancing (mechanics)113114```jsx115import { Detailed } from '@react-three/drei';116117<Detailed distances={[0, 10, 25]}>118 <HighPolyMesh />119 <MediumPolyMesh />120 <LowPolyMesh />121</Detailed>122```123124For many copies of the same geometry, use `<instancedMesh>` or drei `<Instances>`. Budgets, DPR clamps, and `frameloop="demand"`: **`3d-web-experiences`**.125126---127128## Camera Controls (drei)129130```jsx131import { OrbitControls, MapControls } from '@react-three/drei';132133<OrbitControls enableDamping dampingFactor={0.05} minDistance={2} maxDistance={20} />134```135136Respect `prefers-reduced-motion` — pause auto-rotate and heavy camera motion (skill → accessibility).137138---139140## Verification (3D changes)141142| Check | How |143|-------|-----|144| Renders | Browser load — not blank/black canvas |145| Console | No WebGL / shader compile errors |146| Resize | Container height preserved; canvas scales with parent |147| Mobile | DPR/effects tier reduced when skill budget applies |148149Browser verification required; use console + visual check minimum.150151---152153## When NOT to Load This File154155- 2D UI only — use `design-systems` + `anti-slop-design`.156- “Make it look good” / hero aesthetic — start with **`3d-web-experiences`** Step 1 (direction + slop catalog), then use this file for syntax.157
Also in madebyaris/advance-minimax-m3-cursor-rules
Diff this repo’s formatsOne repository carrying more than one format is the comparison this product exists for: does anyone actually write different content in each file, or is one a copy of the other?
| Repository | Format | Stack | Covers | Score | Changed |
|---|---|---|---|---|---|
| madebyaris/advance-minimax-m3-cursor-rules.cursor/rules/agent-teams.mdc · 124 | Cursor rules | setupstylegitapi+3 | 73/100 | 3 days ago | |
| madebyaris/advance-minimax-m3-cursor-rules.cursor/rules/cursor-agent-orchestration.mdc · 124 | Cursor rules | styledo-notagent-behaviour | 73/100 | 3 days ago | |
| madebyaris/advance-minimax-m3-cursor-rules.cursor/rules/cursor-mcp-optimization.mdc · 124 | Cursor rules | styledo-notagent-behaviour | 65/100 | 3 days ago | |
| madebyaris/advance-minimax-m3-cursor-rules.cursor/rules/cursor-tools-mastery.mdc · 124 | Cursor rules | stylemonorepoagent-behaviour | 58/100 | 3 days ago | |
| madebyaris/advance-minimax-m3-cursor-rules.cursor/rules/design-systems.mdc · 124 | Cursor rules | lint-formatstyleuido-not | 77/100 | 3 days ago | |
| madebyaris/advance-minimax-m3-cursor-rules.cursor/rules/fable5-reasoning.mdc · 124 | Cursor rules | style | 58/100 | 3 days ago | |
| madebyaris/advance-minimax-m3-cursor-rules.cursor/rules/devops-infrastructure.mdc · 124 | Cursor rules | stylesecuritydeploymentdo-not | 79/100 | 3 days ago | |
| madebyaris/advance-minimax-m3-cursor-rules.cursor/rules/language-agnostic-patterns.mdc · 124 | Cursor rules | teststylearchtesting-strategy+5 | 58/100 | 3 days ago | |
| madebyaris/advance-minimax-m3-cursor-rules.cursor/rules/minimax-m3-core.mdc · 124 | Cursor rules | buildtestlint-formatstyle+4 | 75/100 | 3 days ago | |
| madebyaris/advance-minimax-m3-cursor-rules.cursor/rules/minimax-m3-self-evolution.mdc · 124 | Cursor rules | styledo-notagent-behaviour | 65/100 | 3 days ago | |
| madebyaris/advance-minimax-m3-cursor-rules.cursor/rules/minimax-m3-status-verification.mdc · 124 | Cursor rules | styletypestesting-strategyapi+1 | 65/100 | 3 days ago | |
| madebyaris/advance-minimax-m3-cursor-rules.cursor/rules/minimax-m3-verification.mdc · 124 | Cursor rules | buildtestlint-formatstyle+3 | 89/100 | 3 days ago | |
| madebyaris/advance-minimax-m3-cursor-rules.cursor/rules/minimax-mcp-tools.mdc · 124 | Cursor rules | styleagent-behaviour | 54/100 | 3 days ago | |
| madebyaris/advance-minimax-m3-cursor-rules.cursor/rules/mobile-cross-platform.mdc · 124 | Cursor rules | setupperformancedeployment | 68/100 | 3 days ago | |
| madebyaris/advance-minimax-m3-cursor-rules.cursor/rules/skill-authoring.mdc · 124 | Cursor rules | stylesecurityapi | 58/100 | 3 days ago | |
| madebyaris/advance-minimax-m3-cursor-rules.cursor/rules/clarify-first-prompting.mdc · 124 | Cursor rules | styledo-not | 61/100 | 3 days ago | |
| madebyaris/advance-minimax-m3-cursor-rules.cursor/rules/fable5-coding-craft.mdc · 124 | Cursor rules | teststylearchtesting-strategy+1 | 58/100 | 3 days ago | |
| madebyaris/advance-minimax-m3-cursor-rules.cursor/rules/model-compatibility.mdc · 124 | Cursor rules | styledeploymentagent-behaviour | 66/100 | 3 days ago | |
| madebyaris/advance-minimax-m3-cursor-rules.cursor/rules/tool-discovery.mdc · 124 | Cursor rules | styletypesdatabaseagent-behaviour | 58/100 | 3 days ago |
Diff against .cursor/rules/agent-teams.mdc Diff against .cursor/rules/cursor-agent-orchestration.mdc Diff against .cursor/rules/cursor-mcp-optimization.mdc Diff against .cursor/rules/cursor-tools-mastery.mdc Diff against .cursor/rules/design-systems.mdc Diff against .cursor/rules/fable5-reasoning.mdc Diff against .cursor/rules/devops-infrastructure.mdc Diff against .cursor/rules/language-agnostic-patterns.mdc Diff against .cursor/rules/minimax-m3-core.mdc Diff against .cursor/rules/minimax-m3-self-evolution.mdc Diff against .cursor/rules/minimax-m3-status-verification.mdc Diff against .cursor/rules/minimax-m3-verification.mdc Diff against .cursor/rules/minimax-mcp-tools.mdc Diff against .cursor/rules/mobile-cross-platform.mdc Diff against .cursor/rules/skill-authoring.mdc Diff against .cursor/rules/clarify-first-prompting.mdc Diff against .cursor/rules/fable5-coding-craft.mdc Diff against .cursor/rules/model-compatibility.mdc Diff against .cursor/rules/tool-discovery.mdc
Similar configs
Same format, overlapping stack, ranked by quality.
| Repository | Format | Stack | Covers | Score | Changed |
|---|---|---|---|---|---|
| TechSquidTV/Hermes.cursor/rules/10-hermes-api.mdc · 45 | Cursor rules | testlint-formatstylearch+5 | 100/100 | 3 days ago | |
| TechSquidTV/Hermes.cursor/rules/20-hermes-api-tests.mdc · 45 | Cursor rules | teststyletesting-strategysecurity+3 | 97/100 | 3 days ago | |
| langflow-ai/langflow.cursor/rules/docs_development.mdc · 153k | Cursor rules | setupbuildtestlint-format+7 | 97/100 | 3 days ago | |
| nerds-odd-e/doughnut.cursor/rules/cli.mdc · 49 | Cursor rules | setupbuildteststyle+4 | 96/100 | 3 days ago | |
| iloveitaly/llm-ide-rules.cursor/rules/general.mdc · 13 | Cursor rules | teststyledo-notagent-behaviour+1 | 92/100 | 3 days ago | |
| danielvm-git/bigpowers.cursor/rules/organize-workspace.mdc · 119 | Cursor rules | buildstylegitdeployment+2 | 89/100 | 3 days ago | |
| danielvm-git/bigpowers.cursor/rules/guard-git.mdc · 119 | Cursor rules | stylearchgitsecurity+2 | 89/100 | 3 days ago | |
| nerds-odd-e/doughnut.cursor/rules/frontend-testing.mdc · 49 | Cursor rules | buildteststyletesting-strategy+2 | 89/100 | 3 days ago |
