时间戳

首页 > 解决方案 > A-Frame：如何在点击时创建可移动实体？

javascript - A-Frame：如何在点击时创建可移动实体？

问题描述

我正在尝试制作一个用户可以创建房屋的 A-Frame 游戏。我已经为 4 个不同的房子（obj 模型）制作了房子模板。每个房子都会在悬停时显示一个单独的名称。我还有 4 个“按钮”（框）应该可以创建一个房子。用户应该能够单击一个按钮来创建一个可移动且可命名的房子（在平面上附加文本）。在它被命名并移动到所需的位置后，它应该被保存。这甚至可能吗？

这就是我所拥有的（一所房子）：

<a-obj-model src="#basic-house-obj" scale=".015 .015 .015" position="-1.958 0 -4.376" color="red" change-color-on-hover="color: #4CC3D9"
                event-set__enter="_event: mouseenter; _target: #modelBox; visible: true"
                event-set__leave="_event: mouseleave; _target: #modelBox; visible: false">
        <a-plane id="modelBox" hide-on-click visible="false" position="-35.872 135 23.300" material="opacity:0.4; color: black; side: front" scale="100 200">
            <a-text id="houseTitle" value="Test Kindergarden" align="center" color="#fff" position="0 0.4 0" scale="0.5 0.5 20"></a-text>
          </a-plane>
   </a-obj-model>

标签： javascripthtmlaframe

解决方案

因此，您希望单击一个按钮，您可以使用单击事件侦听器在其中侦听，然后从模板（例如，document.createElement+ .setAttributes）创建一个房屋，将一个文本实体附加为子项，并能够使用任一光标移动它/鼠标/或VR手控制器？

推荐阅读