我想用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一起工作。
阅读关于 前身
//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>