I built my résumé as a 3D hotel you can walk through

说明与用途

该作品集被改造成一个交互式 3D 酒店，使用无外部模型、优化渲染和多语言支持。

问题

Traditional portfolios are static scrollable pages; the author wanted an interactive, immersive experience to showcase résumé content.

结果

The portfolio became an interactive 3D hotel with reduced download size, optimized rendering (down to 1,045 draw calls on lobby), and multilingual support, all delivered as a single-page application.

工作流

• Design hotel layout and map résumé sections to floors
• Generate geometry procedurally with Three.js primitives
• Paint materials on canvases at load time
• Synthesize music with Web Audio API
• Implement performance optimizations: merge static meshes, vertex‑shader traffic, shared light layout, adaptive resolution, no bundler
• Add multilingual support with pre‑rendered URLs and Arabic canvas patch
• Deploy as plain ES modules with import map and modulepreload

证据

There are no 3D models, image textures or audio files. Geometry is built from Three.js primitives, the marble, wood, carpets, wallpaper and city windows are painted on canvases at load time, and the lounge music is synthesized live with the Web Audio API.

来源

The lobby went from 1,906 to 1,045 draw calls, and the rooftop from 673 to 303.

来源

The site is plain ES modules and an import map. The build writes every module into the map with a content hash, so they're cached for a year and a deploy only re-downloads what changed.

来源