threejs-html-surfaces

Name: threejs-html-surfaces
Availability: InStock
Author: MCerqua

Embed interactive HTML onto named mesh objects in Three.js scenes.

1|Updated Mar 5, 2026

Search Tags:#Three.js #3D interaction #HTML embedding #interactive 3D interfaces #scene integration

Ready to run

npx skills add https://github.com/MCERQUA/jam-skills --skill threejs-html-surfaces

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: threejs-html-surfaces
Source: https://github.com/MCERQUA/jam-skills/tree/main/threejs-html-surfaces
Command: npx skills add https://github.com/MCERQUA/jam-skills --skill threejs-html-surfaces

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and assets (resource) components.

What problem does it solve?

This Skill provides the ability to add live HTML, such as interactive canvases and DOM widgets, directly onto specific named objects within a Three.js scene, creating rich and engaging interactive 3D environments.

Core Features & Use Cases

Embed Live HTML: Insert dynamic HTML elements (including interactive features) into specified areas of a 3D scene.
Mesh Targeting: Target specific objects within the scene using their names, such as "tv_screen" or "desk_tablet".
Declarative API: Use a simple JSON-like syntax to specify HTML sources, size, and other attributes without extensive scripting.

Quick Start

Add the 'threejs-html-surfaces' skill and call 'mountHtmlSurfaces' to specify the target object, source HTML, and size.

Frequently Asked Questions about threejs-html-surfaces

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I embed live HTML into a Three.js scene for 3D interaction?▼

To embed live HTML into a Three.js scene, you use the mountHtmlSurfaces function to map interactive DOM widgets and canvas pages directly onto specific named 3D mesh objects. This allows dynamic UI elements to render via WebGL while maintaining full user interactivity.

Can I target a specific mesh object to display an interactive HTML interface?▼

Yes, you can target specific mesh objects within your 3D scene by referencing their assigned names, such as "tv_screen" or "desk_tablet", to precisely place interactive HTML elements onto those designated 3D surfaces.

Does Three.js support interactive DOM widgets mapped onto 3D surfaces?▼

Yes, Three.js supports interactive DOM widgets by utilizing WebGL for rendering and mapping dynamic canvas pages onto 3D surfaces, ensuring that the embedded HTML elements remain fully interactive for users within the 3D environment.

What is the best way to add dynamic UI elements to a 3D environment without extensive scripting?▼

The best way to add dynamic UI elements without extensive scripting is using a declarative API with simple JSON-like syntax to specify HTML sources, target meshes, and sizes, embedding interactive canvases directly into your 3D scene.

How do I mount an interactive canvas page onto a 3D mesh using a declarative API?▼

You mount an interactive canvas page by calling the mountHtmlSurfaces function, which uses a declarative JSON-like syntax to specify the target mesh object, the source HTML, and the size attributes required for the 3D surface integration.