模型查看器大纲

Question

<!doctype html>
<html>

<head>
    <meta charset="utf-8">


</head>

<body>
    <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js"></script>
<script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>
<!-- Use it like any other HTML element -->
<model-viewer src="shared-assets/models/Astronaut.glb" alt="A 3D model of an astronaut" auto-rotate camera-controls></model-viewer>
</body>

</html>

当您单击模型查看器时，轮廓出现，我无法从 model-viewer 中删除轮廓，如何删除它？

编辑

/**
 * This is mixin function is designed to be applied to a class that inherits
 * from HTMLElement. It makes it easy for a custom element to coordinate with
 * the :focus-visible polyfill.
 *
 * @param {Function} SuperClass The base class implementation to decorate with
 * implementation that coordinates with the :focus-visible polyfill
 */
export function FocusVisiblePolyfillMixin(SuperClass) {
  var coordinateWithPolyfill = function(instance) {
    // If there is no shadow root, there is no need to coordinate with the
    // polyfill. If we already coordinated with the polyfill, we can skip
    // subsequent invokcations:
    if (
      instance.shadowRoot == null ||
      instance.hasAttribute('data-js-focus-visible')
    ) {
      return;
    }

    // The polyfill might already be loaded. If so, we can apply it to the
    // shadow root immediately:
    if (self.applyFocusVisiblePolyfill) {
      self.applyFocusVisiblePolyfill(instance.shadowRoot);
    } else {
      // Otherwise, wait for the polyfill to be loaded lazily. It might never
      // be loaded, but if it is then we can apply it to the shadow root at
      // the appropriate time by waiting for the ready event:
      self.addEventListener(
        'focus-visible-polyfill-ready',
        function() {
          self.applyFocusVisiblePolyfill(instance.shadowRoot);
        },
        { once: true }
      );
    }
  };

  // IE11 doesn't natively support custom elements or JavaScript class syntax
  // The mixin implementation assumes that the user will take the appropriate
  // steps to support both:
  return class extends SuperClass {
    // Attempt to coordinate with the polyfill when connected to the document:
    connectedCallback() {
      super.connectedCallback && super.connectedCallback();
      coordinateWithPolyfill(this);
    }
  };
}

所以我在文件名中添加了这个focus-visible.js

将此添加到 html

<body>
    <!-- The :focus-visible polyfill removes the focus ring for some input types -->
    <script src="focus-visible.js" defer></script>
    <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js"></script>
    <script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>
    <!-- Use it like any other HTML element -->
    <model-viewer src="shared-assets/models/Astronaut.glb" alt="A 3D model of an astronaut" auto-rotate camera-controls>
    </model-viewer>
</body>

这在 css :focus-visible polyfill{ outline: none; }

我是不是做错了什么？

Answer 1

这似乎是 model-viewer 的一个持续问题，因为它仍在开发中。我会就他们的 github page, or see if this issue 与您的相匹配留下一些反馈。

Answer 2

需要根据模型查看器官方文档添加此脚本

<script src="./_model-viewer_ Interactive Example_files/focus-visible.js.download" defer=""></script>

Answer 3

只需确保焦点-visible.js 包含在您的页面中。您可能使用一个没有包含它的旧示例开始您的模型查看器页面。

从 repo 或这个 link 中获取它： https://unpkg.com/focus-visible@5.1.0/dist/focus-visible.js

Answer 4

我将属性 data-js-focus-visible 添加到 <model-viewer>。像这样：

<model-viewer src="myFile.glb" data-js-focus-visible></model-viewer>

之后轮廓就不再显示了。

如果您从官方文档 https://modelviewer.dev/ 检查主要示例中的 <model-viewer> 组件，您可以看到它们使用 data-js-focus-visible 属性：

<model-viewer src="shared-assets/models/Astronaut.glb" alt="A 3D model of an astronaut" auto-rotate="" camera-controls="" data-js-focus-visible="" ar-status="not-presenting"></model-viewer>

模型查看器大纲

Model-viewer outline

html

css

model-viewer