将 3d 文件从服务器加载到 AR 中-解网

问：

我制作了一个应用程序，在其中显示来自 URL 的 3d。我正在尝试使用模型查看器访问 3D 文件，当我尝试使用 AR 时，它显示以下错误：

Can't open url: intent://arvr.google.com/scene-viewer/1.0?mode=ar_preferred&disable_occlusion=true&file=https%3A%2F%2Fcdn-luma.com%2Fede55bce1c8f80f445e9ada9adc27ff4ec7b8c463f370c14c5e7ae9302a29d06%2FLord_Krishna_textured_mesh_glb.glb#Intent;scheme=https;package=com.google.ar.core;action=android.intent.action.VIEW;S.browser_fallback_url=https%3A%2F%2Fluma-modal-viewer.netlify.app%2F%3Fmodel%3Dhttps%3A%2F%2Fcdn-luma.com%2Fede55bce1c8f80f445e9ada9adc27ff4ec7b8c463f370c14c5e7ae9302a29d06%2FLord_Krishna_textured_mesh_glb.glb%26metadata%3D%7B%2522title%2522%3A%2522Lord%2520Krishna%2522%2C%2522status%2522%3A%2522complete%2522%7D%23model-viewer-no-ar-fallback;end;

这是我的代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script
      type="module"
      src="https://cdn.jsdelivr.net/npm/@google/model-viewer@2/dist/model-viewer.js"></script>
    <script
      type="module"
      src="https://cdn.jsdelivr.net/npm/@google/model-viewer@2/dist/webxr-polyfill.js"></script>

    <title>3D MODEL</title>

    <script
      type="module"
      src="https://cdn.jsdelivr.net/npm/@google/model-viewer@2/dist/model-viewer.js"></script>
    <style>
      body {
        width: 100%;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
      }
      .container {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 2rem;
        flex-direction: column;
      }
      .container > #model {
        margin: 1rem;
        border: 1px solid #ccc;
        padding: 0.5rem;
        min-height: 330px;
        min-width: 330px;
        border-radius: 0.5rem;
        box-shadow: 0px 0px 20px 0px #000;
      }
      .model-info {
        margin-top: 1rem;
        text-align: center;
      }
      .model-info label {
        all: unset;
        width: 100%;
        color: black;
        opacity: 0.6;
      }
      .model-info p {
        width: 100%;
        font-size: 1.5rem;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <model-viewer
        id="model"
        alt="3D MODEL"
        src=""
        ar
        ar-button
        ar-modes="webxr scene-viewer quick-look"
        auto-rotate
        shadow-intensity="1"
        camera-controls
        touch-action="pan-y">
        <button
          style="
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);

            color: #fff;
            border: none;
            border-radius: 30px;
            cursor: pointer;
            transition: background-color 0.3s;
            margin-top: 45px;
            padding: 15px 20px;
          "
          type="button"
          slot="ar-button"
          id="customARButton"
          class="disabled-button"
          disabled>
          Start Experience
        </button>
      </model-viewer>
      <div class="model-info">
        <label for="title">Model Title</label>
        <p id="title">Loading...</p>
        <label for="description">Model Description</label>
        <p id="description"></p>
      </div>
    </div>

    <script>
      const urlParams = new URLSearchParams(window.location.search);
      const modelUrl = urlParams.get('model');
      const metadataString = urlParams.get('metadata');
      const modelViewer = document.querySelector('model-viewer');
      const customARButton = document.getElementById('customARButton');

      modelViewer.addEventListener('load', () => {
        customARButton.removeAttribute('disabled');
        customARButton.classList.remove('disabled-button');
        if (customARButton.disabled) {
          customARButton.style.backgroundColor = '#ccc';
        } else {
          customARButton.style.backgroundColor = '#007bff';
        }
      });

      if (modelUrl) {
        const filename = modelUrl.split('/').pop();

        modelViewer.src = filename;
        console.log('path' + filename);
      }

      if (metadataString) {
        const metadata = JSON.parse(decodeURIComponent(metadataString));
        const title = metadata.title || 'No Title';
        const description = metadata.description || 'No Description';

        const titleElement = document.getElementById('title');
        titleElement.textContent = title;

        const descriptionElement = document.getElementById('description');
        descriptionElement.textContent = description;
      }
    </script>
  </body>
</html>

javascript html react-native 模型查看

答： 暂无答案

上一个：我的金字塔直立的正确 GLfloat 顶点是什么？[关闭]

下一个：如何从 Next.js 中的 iframe 启动 WebXR？

将 3d 文件从服务器加载到 AR 中

Loading 3d file from server into AR

评论