skills.rest
MCERQUA
MCERQUACOMMUNITY
Explore all skills by this author →
GitHub

threejs-html-surfaces

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
One-click install
npx skills add https://github.com/MCERQUA/jam-skills --skill threejs-html-surfaces
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
CesarG503CesarG503

threejs-animation

Animate Three.js objects with keyframes, skeletal GLTF, morph targets, and blending.

Community
Advanced
belokonmbelokonm
8

threejs-pro

Render interactive 3D graphics with Three.js, React Three Fiber, and WebGL shaders.

Community
Advanced
afoveaafovea

threejs-fundamentals

Configure Three.js scenes, cameras, and 3D coordinate systems for WebGL rendering.

Community
Intermediate
video-production-buddyvideo-production-buddy
602

threejs-materials

Configure and optimize Three.js materials for 3D meshes.

Official
Intermediate