HTML Model Element for 3D on the Web

import SwiftUI
import WebKit

struct ModelElementView: UIViewRepresentable {
    let usdзURL: String
    let fallbackImageURL: String

    func makeUIView(context: Context) -> WKWebView {
        let config = WKWebViewConfiguration()
        config.allowsInlineMediaPlayback = true
        let webView = WKWebView(frame: .zero, configuration: config)
        webView.scrollView.isScrollEnabled = false
        webView.isOpaque = false
        webView.backgroundColor = .clear
        return webView
    }

    func updateUIView(_ webView: WKWebView, context: Context) {
        let html = """
        <!DOCTYPE html>
        <html>
        <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
          body { margin: 0; background: #f2f2f7; display: flex;
                 flex-direction: column; align-items: center;
                 font-family: -apple-system, sans-serif; padding: 16px; }
          model {
            width: 320px;
            height: 320px;
            background-color: #ffffff;
            border-radius: 16px;
          }
          #spinner { font-size: 14px; color: #888; margin-top: 8px; }
          .controls { margin-top: 12px; display: flex; gap: 8px; }
          button {
            padding: 8px 16px;
            border-radius: 8px;
            border: none;
            background: #007aff;
            color: white;
            font-size: 14px;
          }
          a.ar-link {
            margin-top: 12px;
            padding: 10px 20px;
            background: #34c759;
            color: white;
            border-radius: 8px;
            text-decoration: none;
            font-size: 14px;
          }
        </style>
        </head>
        <body>
          <p id="spinner">Loading 3D model…</p>

          <!-- Native HTML Model Element with orbit interaction -->
          <model id="myModel"
                 src="\(usdzURL)"
                 stagemode="orbit">
            <!-- Fallback for browsers without Model element support -->
            <img src="\(fallbackImageURL)"
                 alt="Product preview"
                 width="320" height="320"
                 style="border-radius:16px;object-fit:cover">
          </model>

          <!-- AR Quick Look: wrap model source in <a rel=ar> -->
          <a class="ar-link"
             href="\(usdzURL)"
             rel="ar">
            View in AR
          </a>

          <div class="controls">
            <button onclick="showSide()">Side View</button>
            <button onclick="resetView()">Reset</button>
          </div>

          <script>
            const model = document.getElementById('myModel');
            const spinner = document.getElementById('spinner');
            let initialTransform = null;

            // Await the ready promise before interacting
            model.ready
              .then(() => {
                spinner.textContent = 'Interactive 3D model';
                initialTransform = model.entityTransform;
              })
              .catch(() => {
                spinner.textContent = 'Could not load model';
              });

            function showSide() {
              // Disable orbit to allow manual transform
              model.removeAttribute('stagemode');
              const m = new DOMMatrix();
              m.rotateSelf(0, 135, 0);
              model.entityTransform = m;
            }

            function resetView() {
              if (initialTransform) {
                model.entityTransform = initialTransform;
              }
              model.setAttribute('stagemode', 'orbit');
            }
          </script>
        </body>
        </html>
        """
        webView.loadHTMLString(html, baseURL: nil)
    }
}

struct ContentView: View {
    var body: some View {
        VStack(spacing: 0) {
            Text("Camping Mallet")
                .font(.title2.bold())
                .padding(.top, 24)
            ModelElementView(
                usdzURL: "https://example.com/models/mallet.usdz",
                fallbackImageURL: "https://example.com/images/mallet.jpg"
            )
            .frame(height: 480)
            Spacer()
        }
        .background(Color(uiColor: .systemGroupedBackground))
    }
}

#Preview {
    ContentView()
}