aframe注册组件添加onclick属性。

问题描述 投票:0回答:1

我想用frame创建动态组件,但我不能在组件上添加onclick。

这是我的代码

AFRAME.registerComponent('cylinders', {
init: function(){
let el = this.el;
let sceneEl = document.getElementById('scene1');
let cyl = document.createElement('a-cylinder'); 
    cyl.setAttribute('position', '0 0 0');
    cyl.setAttribute('rotation', '0 0 0');
    cyl.setAttribute('scale', '0 0 0');
    cyl.setAttribute('radius', 1);
    cyl.setAttribute('height', 0.1);
    cyl.setAttribute('color', '#39BB82');
    cyl.setAttribute('checkpoint', '');
    cyl.setAttribute('class', 'clickable');
    cyl.setAttribute('onclick', 'myFunction()');
    sceneEl.appendChild(cyl);
       }           
    }
});

我的代码工作正常,但我不能设置onlick。如果我写这样的底部,我可以使用onclick。

<a-cylinder 
class="clickable" 
checkpoint="" 
radius="1" 
height="0.1" 
position="0 0 0" 
rotation="0 0 0" 
scale="0 0 0" 
onclick="myFunction()"
color="#39BB82">
</a-cylinder>

谁能帮帮我?我只是需要registerComponent与我的onclick一起工作。

javascript jquery aframe virtual-reality webvr
1个回答
0
投票

阅读关于 前身

//https://aframe.io/docs/1.0.0/guides/building-a-minecraft-demo.html#try-it-out
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aframe-teleport-controls.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aframe-controller-cursor-component.min.js"></script>
<script src="https://rawgit.com/ngokevin/kframe/csstricks/scenes/aincraft/components/random-color.js"></script>
<script src="https://rawgit.com/ngokevin/kframe/csstricks/scenes/aincraft/components/snap.js"></script>
<script src="https://rawgit.com/ngokevin/kframe/csstricks/scenes/aincraft/components/intersection-spawn.js"></script>

<body>
  <a-scene>
    <a-assets>
      <img id="groundTexture" src="https://cdn.aframe.io/a-painter/images/floor.jpg">
      <img id="skyTexture" src="https://cdn.aframe.io/a-painter/images/sky.jpg">
      <a-mixin id="voxel"
         geometry="primitive: box; height: 0.5; width: 0.5; depth: 0.5"
         material="shader: standard"
         random-color
         snap="offset: 0.25 0.25 0.25; snap: 0.5 0.5 0.5"
      ></a-mixin>
    </a-assets>

    <a-cylinder id="ground" src="#groundTexture" radius="30" height="0.1"></a-cylinder>

    <a-sky id="background" src="#skyTexture" theta-length="90" radius="30"></a-sky>

    <!-- Hands. -->
    <a-entity id="teleHand" hand-controls="left" teleport-controls="type: parabolic; collisionEntities: [mixin='voxel'], #ground"></a-entity>
    <a-entity id="blockHand" hand-controls="right" controller-cursor intersection-spawn="event: click; mixin: voxel"></a-entity>

    <!-- Camera. -->
    <a-camera>
      <a-cursor intersection-spawn="event: click; mixin: voxel"></a-cursor>
    </a-camera>
  </a-scene>
</body>
© www.soinside.com 2019 - 2024. All rights reserved.