Works with the AI tools you already use

    CCCGGVW

    nex design world

    by Nex AI

    1

    Build and deploy a no-build, walkable 3D Three.js portfolio with interactive iframe stations and droid movement.

    Free

    0 installsNo reviews yet

    About this skill

    The problem

    Building high-performance 3D portfolios often requires heavy bundlers and complex frameworks that bloat load times. Developers struggle to integrate live DOM content like iframes into WebGL scenes without breaking spatial immersion or performance.

    What it does

    • Orchestrates a no-build Three.js r128 engine that runs directly from a static server or file system.
    • Implements a depth-hole technique and quad-projection to composite interactive DOM iframes into 3D space.
    • Manages a tracked-droid avatar system with hybrid input support for keyboard, mouse, and virtual joysticks.
    • Controls a solar-system skybox and background video textures served via Cloudflare R2 for 1080p playback.
    • Synchronizes dual-URL deployments to Raspberry Pi environments via Cloudflare Tunnels.

    Frameworks & tools

    Three.js r128, Vanilla JavaScript, HTML5 Canvas, CSS Matrix3D, Cloudflare R2, Cloudflare Tunnel, and Raspberry Pi OS.

    Why this beats prompting it yourself

    Standard LLM prompts often fail at the math required for quad-projection and cross-loop synchronization between WebGL and the DOM. This skill contains the precise architecture for a unique "depth-hole" rendering method that ensures iframes feel like part of the 3D geometry rather than floating overlays.

    Use cases

    • Create a walkable 3D showroom for digital products or agency work.
    • Build a low-overhead, high-impact technical portfolio that runs on a Raspberry Pi.
    • Extend existing Three.js projects with interactive, zoomable media stations and automated guided tours.
    • Deploy synced static mirrors of a 3D site across multiple subdomains.

    Known limitations

    Requires manual cache-busting (?v=N) for asset updates. The YouTube embed functions are dormant in favor of R2 self-hosting.

    ai-agents
    threejs
    webgl
    frontend-development
    raspberry-pi
    portfolio

    Details

    How to install

    Drop the file into your AI Agent. Works with Claude, Cursor, ChatGPT, and 20+ more.

    Reviews

    No reviews yet - be the first to share your experience.

    Only users who have downloaded or purchased this skill can leave a review.

    Security Scanned

    Passed automated security review

    Permissions

    Terminal / Shell
    Network Access

    Allowed Hosts

    media.nex-ai.be
    cal.com
    www.nex-ai.be
    www.patreon.com
    unpkg.com

    File Scopes

    nex-design-world/**

    Creator

    Nex AI

    Founder of Nex AI. I build production-grade Claude Skills from systems that actually run: multi-tenant SaaS, Telegram agents, Raspberry Pi infrastructure, 3D multiplayer rooms. Every skill ships battle-tested patterns, not theory. 33+ open source skills published, commercial catalog growing.

    Frequently Asked Questions

    More Premium Skills

    designing-hybrid-context-layers

    Architects the right retrieval strategy for every query — teaching your agent when to use RAG, a knowledge graph, or a temporal index instead of defaulting to vector search for everything.

    $107 upvotes

    synthesizing-institutional-knowledge

    Builds the organizational memory schema your AI agent needs to answer why — capturing decision provenance, causal chains, and event context that embedding-based retrieval permanently discards.

    $1011 upvotes
    Business Strategist

    Business Strategist

    A framework-driven consultant for business diagnosis, market mapping, and pricing strategy.

    $197 upvotes
    Cinematic Landing Page Builder

    Cinematic Landing Page Builder

    Turn any business URL into a high-end animated landing page with 4K AI assets and GSAP animations via Cloudflare.

    $197 upvotes

    Free