html-to-3d-texture

HTML to 3D Texture Pipeline

Capture React components as PNG images for use as textures on 3D model screens.

The snippets below are implementation examples, not installed capture tools. Inspect the project's dependencies, capture route/selector and output directory before adapting them. Playwright and its browser, html2canvas and sharp are not supplied by this skill. Use available authorized tooling; missing prerequisites leave capture UNVERIFIED. Dependency installation, service startup and browser access follow the task's existing authority, not the presence of these examples.

Architecture

React Component → Capture (Playwright/html2canvas) → PNG → Three.js Texture → 3D Mesh

Method 1: Playwright Capture (recommended for quality)

Best for: production screenshots, pixel-perfect captures.

// scripts/capture-screen.mjs
import { chromium } from 'playwright';

const PORT = process.argv[2] || 3000;
const WIDTH = 440;   // Native screen width
const HEIGHT = 956;  // Native screen height
const SCALE = 2;     // Retina (output: 880x1912)

async function capture() {
  const browser = await chromium.launch();
  const page = await browser.newPage({
    viewport: { width: WIDTH, height: HEIGHT },
    deviceScaleFactor: SCALE,
  });

  await page.goto(`http://localhost:${PORT}/capture`);
  await page.waitForLoadState('networkidle');

  // Find target element
  const el = await page.locator('[data-screen-id="main"]');
  await el.screenshot({
    path: 'public/textures/screen.png',
    type: 'png',
  });

  await browser.close();
  console.log(`Captured: ${WIDTH * SCALE}x${HEIGHT * SCALE}px`);
}

capture();

Method 2: html2canvas (runtime capture)

Best for: dynamic content that changes during session.

import html2canvas from 'html2canvas';
import * as THREE from 'three';

async function captureToTexture(element: HTMLElement): Promise<THREE.CanvasTexture> {
  const canvas = await html2canvas(element, {
    scale: 2,
    useCORS: true,
    backgroundColor: null, // transparent
  });

  const texture = new THREE.CanvasTexture(canvas);
  texture.colorSpace = THREE.SRGBColorSpace;
  texture.needsUpdate = true;

  return texture;
}