模型-查看器轮廓
模型-查看器轮廓
提问于 2020-05-27 13:44:03
<!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; }中
我做错了什么吗？
回答 4
Stack Overflow用户
回答已采纳
发布于 2020-05-31 03:29:24
要求按照模型查看器正式文档添加此脚本。
<script src="./_model-viewer_ Interactive Example_files/focus-visible.js.download" defer=""></script>Stack Overflow用户
发布于 2020-07-17 06:23:53
只需确保焦点-visible.js包含在您的页面中。您可能在启动模型查看器页面时使用了一个没有包含它的旧示例。
从回购或以下链接中获取它：https://unpkg.com/focus-visible@5.1.0/dist/focus-visible.js
Stack Overflow用户
发布于 2021-01-20 10:20:34
我将属性data-js-focus-visible添加到<model-viewer>。如下所示：
<model-viewer src="myFile.glb" data-js-focus-visible></model-viewer>之后，轮廓就不再显示了。
如果在主示例中检查官方文档<model-viewer>中的https://modelviewer.dev/组件，可以看到它们使用了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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62044624
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号