[英]How to link a html file from A-Frame entity?
我正在尝试在单击<a-entity>
时加载 HTML 文件,但它不适用于传统的 HTML 方法。(使用 href)请参阅下面的代码。
<a-scene>
<a-assets>
<a-asset-item id="mBot" src="../assets/robot1.glb"></a-asset-item>
<img id="panorama" src="../assets/stock.jpg" />
</a-assets>
<!-- Robot -->
<a-entity
gltf-model="#mBot"
scale="4 4 4"
position="0 1 2"
id="mBot-1"
>
<a-animation attribute="rotation" to="0 360 0" repeat="indefinite" >
</a-animation>
</a-entity>
<!-- Robot -->
<a-entity
gltf-model="#mBot"
scale="4 4 4"
position="8 1 2"
id="mBot-2"
>
<a-animation attribute="rotation" to="0 -360 0 " repeat="indefinite">
</a-animation>
</a-entity>
<a-entity position="4 0 8">
<a-camera></a-camera>
</a-entity>
<a-sky src="#panorama"></a-sky>
</a-scene>
单击实体 id=mBot-1 和 mBot-2 时,我想加载两个单独的 html 文件。
非常感谢任何帮助解决这个问题。
通常,您可以向元素添加点击处理程序。
但是,不清楚“加载 HTML 文件”是什么意思。 您的意思是点击该页面的链接吗?
您也没有指定该文件的 URL 是什么。 这是一个使用 stackoverflow.com 作为“HTML 文件”的示例
var entities = document.querySelectorAll('A-ENTITY');
var entity;
for (var i = 1; i < entities.length; i++) {
entity = entities[i];
entity.addEventListener('click', function() {
window.location.href = "https://stackoverflow.com";
});
}
这个问题可以通过自己的js链接来解决。
创建您自己的元素,这将在单击时更改 window.location:
AFRAME.registerComponent("mylink", {
init: function() {
this.el.addEventListener("click", (e)=> {
window.location = this.data.href;
})
}
})
HTML
<a-text color="black" position="1 1 -2" value="goToSchatzkin"
mylink="href: https://schatzkin.com;"></a-text>
最终代码
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
AFRAME.registerComponent("mylink", {
init: function() {
this.el.addEventListener("click", (e) => {
window.location = this.data.href;
})
}
})
</script>
<a-scene cursor="rayOrigin: mouse">
<a-text color="black" position="1 1.6 -2" value="Click the text"
mylink="href: https://schatzkin.com;"></a-text>
<a-entity position="-1 1.6 -2"
link="highlighted: true;
highlightedColor:#000000; backgroundColor: red;
href: https://schatzkin.com; titleColor: black;
title: click the image below.;
image: https://i.imgur.com/wjobVTN.jpg;
visualAspectEnabled: true"></a-entity>
</a-scene>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.