A-frame 将 onclick 函数添加到着色器答案

【问题标题】：A-frame add onclick function to a shaderA-frame 将 onclick 函数添加到着色器
【发布时间】：2021-08-18 09:50:49
【问题描述】：

我有一些用框架 (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>

我还没有找到一种方法来实现它，所以当我点击对象时会触发一个函数。我尝试向 html 元素添加一个简单的 onclick 函数，但没有成功。有谁知道我如何向上面的元素添加onclick 函数？

【问题讨论】：

看看你的控制台看看/你有一个错误（在你的 jsfiddle 中）

标签： javascript html jquery css aframe

【解决方案1】：

实际上它不起作用，因为

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>

【讨论】：

我尝试运行代码并且它可以工作，但是当您单击任意位置时，p 标签在工作场景中，而不仅仅是。你知道我怎么能改变它，让它只在点击时才在部分上工作吗？我尝试在场景内和外移动
标签，但这也没有成功。
实际上 a-entity 还不支持 onclick 事件。您的工作必须依赖使用 p 标签或其他标签。
您可以在您的 a-entity 之外添加 a-box。
如果对您有帮助，请接受答案。
抱歉忘记接受答案。我会尝试盒子方法。