Tech Ease podcast

How to Vibe-Code a 3D SharePoint Page Without Writing Code

2026-11-12
0:00
4:10
Spola tillbaka 15 sekunder
Spola framåt 15 sekunder

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 library
  • Copilot in SharePoint, or a coding agent that can work from a skill folder
  • The interactive-3d-scene skill, in PnP SharePoint Skills: https://pnp.github.io/sharepoint-skills/
  • No Babylon.js knowledge

Option 1: upload the Halloween sample

  1. Download the Halloween sample HTML file from the skill's samples folder.
  2. In SharePoint, choose New, then HTML page.
  3. 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 the page can live

  • A draft HTML page in Site Pages
  • A standalone .html file in a document library, opened with ?web=1

How to check it: the line under the scene should start with "Moving scene." "Still view" means the flat drawing is showing. Don't fix that by adding a CDN or a script tag.

What happened when I tried it: theme Winter, headline Winter Wonderland, a snowman, sled and pine tree. Copilot in SharePoint used the skill and built a working chat preview, with a button for each object, sound off and the status line reading "Moving scene." It saved nothing until I clicked Save as file, then put the file in Documents without saying where, so ask Copilot where it saved it. I asked it to copy the file into Site Pages, and the same 3D scene loaded as a working page. My first save failed and closing the preview lost it; asking Copilot to recreate it was quick.

Next: the code track opens the Halloween yard feature by feature. Follow-up prompts are in the finale, episode 10.

Try the haunted yard: https://anandragav.github.io/copilot-html-dashboards/halloween-haunt/

Chapters

0:00 Two no-code ways to a 3D SharePoint page

0:18 What you need

0:43 What the skill does

1:17 Option one: upload the Halloween sample

1:46 Option two: where your page can live

2:06 The starter prompt

2:40 My winter test with Copilot in SharePoint

3:13 Check the line under the scene

3:43 Next time

SharePoint and Copilot captures have details masked; yard footage recorded from the Halloween Haunt page; cards marked ILLUSTRATION are drawn. Independent, not affiliated with Microsoft. Microsoft, SharePoint and Copilot are trademarks of the Microsoft group of companies.

Episode 1: Inside Halloween Haunt: How This 3D SharePoint Series Works, https://youtu.be/gfyeg56QEXI

Watch on YouTube: https://youtu.be/Yp_HG3VUeNg

Tech Ease on YouTube: https://www.youtube.com/@anandvijayaragavan18

Follow Tech Ease on Spotify: https://open.spotify.com/show/0Cd8NsDE7kdQmLnbXe8Xx1

Fler avsnitt från "Tech Ease"