如何解决无法创建 WebComponent 来扩展 Aframe 的 AEntity
我正在尝试通过 WebComponent 扩展 AFRAME.AEntity。我知道这不是 AFRAME 的使用方式,但它仍然应该工作。我正在构建类似于 react/vue/angular 的视图框架。它适用于 HTML 组合,也适用于 Aframe 组合,但对于这一问题。
customElements.define('vr-box',VrBox,{ extends: 'a-entity' });
当我尝试定义我的 WebComponent 时,我收到以下错误(Chrome);
未捕获的 NotSupportedError:无法执行 'define' 'CustomElementRegistry': "a-entity" 是一个有效的自定义元素名称"
这似乎是在暗示我不能“扩展”某些东西,因为它已经存在?!如果我尝试扩展 HTMLDivElement,一切正常..当然除了 VrBox 没有呈现,因为 DIV 在 AFRAME 上下文中没有意义..但 DOM 符合预期。
我创建了一个片段来突出问题;
class VrBox extends AFRAME.AEntity {
constructor() {
super();
const shadow = this.attachShadow({mode: 'open'});
const child = document.createElement('a-box');
shadow.appendChild(child);
//this.innerHTML = '<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>';
}
}
customElements.define('vr-box',{ extends: 'a-entity' });
<html>
<head>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-entity is="vr-box" id="box"></a-entity>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
</body>
</html>
或在jsfiddle
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。