javascript - A-frame 将 onclick 函数添加到着色器
问题描述
我有一些用 a-frame ( https://aframe.io )编写的代码,可以在https://jsfiddle.net/AidanYoung/h0cb1nq8/ 找到我正在尝试找到一种方法来添加 onclick 事件下面的代码:
<a-entity
id="lettersEntity"
onclick='console.log("Hello")'
geometry="primitive: plane; width: 2; height: 2"
rotation="-30 -30 0"
position="-0.2 1.5 -2.5"
material="shader: html; target: #target; transparent: true; ratio: width; fps: 1.5"
></a-entity>
我一直无法找到一种方法来实现它,因此当我单击对象时会触发一个功能。我尝试向onclick
html 元素添加一个简单的函数,但没有成功。有人知道我如何onclick
向上面的元素添加函数吗?
解决方案
实际上它不起作用,因为
- onclick事件监听器不支持以这种方式在 a-frame 上。
- 您在完成页面加载之前添加了事件侦听器。
使用以下代码更新您的代码。我希望这会奏效。我将您的 a-frame 标签包含在 p 标签中,并在页面加载后在其上添加事件侦听器。
window.addEventListener('load', function()
{
var plane = document.getElementById("lettersEntity_2");
plane.addEventListener("click", myFunction);
function myFunction()
{
console.log ("hi")
}
});
function myFunction()
{
console.log("hi")
}
#target {
width: 512px;
height: 256px;
position: absolute;
background: rgba(255,255,0,0.3);
}
/* Hide the HTML using z-index. */
/* Can't use display: none because that would hide the HTML in the rendered material. */
#htmlTarget.hide {
z-index: -1;
}
#target h1 {
font-family: Arial;
font-size: 110px;
margin: 0;
vertical-align: top;
color: white;
}
#target h1 span {
color: tomato;
}
#emoji {
position: absolute;
font-size: 512px;
color: mediumTurquoise;
font-style: serif;
}
#pre {
font-family: monospace;
margin: 0;
padding: 0;
height: 50px;
font-size: 50px;
background: royalblue;
color: tomato;
}
#htmlTarget {
position: absolute;
z-index: 1;
height: 100%;
width: 100%;
overflow: hidden;
position: fixed;
top: 0;
}
#debug {
position: absolute;
bottom: 0;
left: 0;
}
/* Even works with media queries. */
@media (max-width: 768px) {
#target {
width: 256px;
height: 126px;
}
#target h1 {
font-size: 55px;
}
#pre {
height: 50px;
font-size: 25px;
}
}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width">
<title>A-Frame HTML Shader - Dynamic</title>
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-html-shader@0.2.0/dist/aframe-html-shader.min.js"></script>
</head>
<body>
<p id="lettersEntity_2">
<a-scene update-html>
<a-entity id="lettersEntity" onclick='console.log("Hello")' geometry="primitive: plane; width: 2; height: 2" rotation="-30 -30 0" position="-0.2 1.5 -2.5" material="shader: html; target: #target; transparent: true; ratio: width; fps: 1.5"></a-entity>
<a-sky color="pink"></a-sky>
</a-scene>
</p>
<div id="htmlTarget" class="hide">
<div id="emoji"></div>
<div id="target">
<h1>HELLO</h1>
<button>
i1
</button>
</div>
</div>
</body>
</html>
推荐阅读
- c - 32 位 x86 平台 c/c++ 应用程序中的 Tensorflow 2.x 模型推理
- reactjs - 如何从另一个组件中的减速器初始状态中过滤一组对象?
- npm - 如何从任何地方使用安装在 monorepo 的 npm 根目录中的可执行文件?
- html - 在网页中找到文本并单击 - Eclipse Selenium
- selenium - ChromeDriver - 无法登录谷歌帐户
- c++ - std::divides 上的 C++ 等号运算符
- php - 停止 PHP_EOL 将数据附加到上一行
- kubernetes - 如何在 Polyaxon 中使用 TPU Pod
- react-native - 使用 React Native 在 LinearGradient 视图中放置输入包,结果与 IOS 中的以下内容重叠
- primefaces - 如果行不可见,自动取消选中 ap:datatable 中的行