gpt4 book ai didi

javascript - AFrame 内容无法在使用 hyperHTML 的 Chrome 上呈现

转载 作者:行者123 更新时间:2023-11-30 21:04:23 24 4
gpt4 key购买 nike

在 FireFox 和 Safari 上呈现时,A-Frame 内容不会在 Chrome 上呈现。

根据 CodePen hereconst { hyper, wire } = hyperHTML;

class Box extends hyper.Component {

render() { return this.html`
<a-scene>
<a-box color="red" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>
</a-scene>
`;
}
}

document.body.appendChild(new Box().render());

我确定我遗漏了一些东西,相同的内容在所有浏览器中都可以呈现为静态 HTML (CodePen)。

<body>
<a-scene>
<a-box color="red" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>
</a-scene>
</body>

最佳答案

更新:我已经在 hyperHTML 中强制修复了这个问题,即使它是关于使用自定义元素 V0 的 AFrame。一旦 AFrame 迁移到 V1,我将放弃强制修复。

你的代码笔,还有我的,现在都可以使用了。问候


我已经 forked your pen并编写了几乎相同的代码:

const { hyper } = hyperHTML;

class Box extends hyper.Component {
render() { return this.html`
<a-scene>
<a-box color="red"
position="0 2 -5"
rotation="0 45 45"
scale="2 2 2"></a-box>
</a-scene>`;
}
}

hyper(document.body)`${new Box}`;

但我不得不在最后添加一个非常难看的行:

// if you comment this out nothing works
document.body.innerHTML = document.body.innerHTML;

这是因为 AFrame 使用自定义元素 polyfill(实际上是我的),当它从模板节点克隆时似乎不会触发注册表。

a polyfill known issue我从未能够重现,这可能是我一直在寻找的用例。

不幸的是,现在 AFrame 组件似乎在使用 hyperHTML 时可能会遇到问题。

抱歉,我会尽快解决这个问题。

关于javascript - AFrame 内容无法在使用 hyperHTML 的 Chrome 上呈现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46797635/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com