html - 模型查看器大纲
问题描述
<!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; }
难道我做错了什么?
解决方案
只需确保 focus-visible.js 包含在您的页面中即可。您可能从一个没有包含它的旧示例开始您的模型查看器页面。
从 repo 或此链接中获取它: https ://unpkg.com/focus-visible@5.1.0/dist/focus-visible.js
推荐阅读
- php - nginx - fastcgi_read_timeout,什么是最佳值?
- range - 如何将 SUMIF 公式复制到整个列而不更改 Google 表格中的范围
- python - 使用 os 分割 Python shall 命令
- azure - 创建 Azure 函数以调用 Yammer API 并在 Flow 中使用它
- android - 如何在 AsyncTask 的 onProgressUpdate 中使用 Toast?
- pointers - 指针字符串切片(* []字符串)的Cgo指针传递规则?
- rest - 对服务器的 HTTP REST 请求是否应该以客户端期望的特定格式返回数据?
- scala - Json响应在scala slick
- c++ - 为什么 for 循环和 while 循环之间的 continue 不同?
- html - Bootstrap Toggle 在 Firefox 上不起作用,(在 Chrome 上工作正常)