How to Vibe-Code a 3D SharePoint Page Without Writing Code
4 min
You don't need to write code to put a clickable 3D page on SharePoint. In episode 2 of Inside Halloween Haunt, I show two no-code starting points with the interactive-3d-scene skill: upload the finished Halloween Haunt sample, or prompt a new themed scene from the skill's starter template. What you need A SharePoint site you can edit, and permission to create a draft page or save a file in a libraryCopilot in SharePoint, or a coding agent that can work from a skill folderThe interactive-3d-scene skill, in PnP SharePoint Skills: https://pnp.github.io/sharepoint-skills/No Babylon.js knowledgeOption 1: upload the Halloween sample Download the Halloween sample HTML file from the skill's samples folder.In SharePoint, choose New, then HTML page.Under "Or bring your own HTML," choose Upload an HTML file and pick the file. It opens as a draft you can edit and publish.Option 2: the starter prompt (fill in the square brackets before you paste) Use the interactive-3d-scene skill. Start from templates/starter-scene.html. Do not fetch Babylon or any other library from a CDN, and do not paste a copy of the library into the file. Keep the template's ka-lib-manifest script line for "babylon" exactly as it is, near the top, before any other script. Build a new clickable 3D scene for SharePoint on this theme: [THEME]. Headline: [HEADLINE]. I want these tappable objects: [OBJECT 1, OBJECT 2, OBJECT 3]. Keep all CSS and JavaScript inside the file. Do not add remote images, fonts, audio files, network requests, or browser storage. Sound must stay off until the visitor turns it on. Include a finished 2D SVG drawing of the same scene as the fallback, and support ?mode=2d so I can force that drawing. Respect prefers-reduced-motion by turning big shakes and spins into a gentle glow. Use real buttons, a live status line, and keyboard access (number keys for the objects, M for sound). Don't publish or upload anything until I say so. Show me the page and a short list of what I can tap. Where t...