Solar System VR

An interactive solar system you can fly through in VR. Built with React Three Fiber and @react-three/xr, the scene runs in any WebXR-capable browser (Quest, Vision Pro, etc.) and falls back to orbit controls on desktop.

What’s in it

8 planets orbiting the sun with continuous motion and emissive shading
Clickable planets reveal info cards with facts (Spanish copy)
Starfield background + orbit lines
WebXR entry via createXRStore — single button enters immersive VR
Preview video rendered with Remotion @remotion/three composition, served from the same deployment

Notable decisions

Kept the Remotion composition separate from the live scene so the VR app stays interaction-driven (useFrame) while the video stays deterministic (useCurrentFrame). Both share planet data shape but not code — the 40-line video composition wasn’t worth abstracting.

Learnings

Remotion's @remotion/three works with R3F but useFrame is forbidden — all motion must be derived from useCurrentFrame(), otherwise frames flicker under parallel rendering

Rendering R3F through Remotion on macOS requires --gl=angle, otherwise headless Chromium can't create a WebGL context and every frame fails

The <line> intrinsic in R3F collides with the SVG JSX element under strict TS — switching to <primitive object={new THREE.Line(...)}> avoids the type conflict without touching the global namespace

@vitejs/plugin-basic-ssl + React 19 types treat server.https: true as invalid — passing https: {} (empty options) satisfies the overload