[英]Adding EventListener 'click' to asset
let starting = -45, forward1 = 1, forward2 = 1, forward3 = 1; let ball1; let cannon1; let ship; window.onload = function() { ball1 = document.getElementById("ball1"); cannon1 = document.getElementById("cannon1"); cannon1.addEventListener("click",function(obj){ ball1.fire = true; }) update(); }; function update(){ if(ball1.fire){ starting += forward1; ball1.setAttribute("position", {x:-starting - 20, y:7, z:0}) } if(starting >= 100){ ball1.setAttribute("position", {x:0, y:7, z:50}) starting = 0; ball1.fire = false; } setTimeout(update,10); };
<:DOCTYPE html> <html> <head><script src="https.//aframe.io/releases/1.0.4/aframe.min.js"></script> <body> <a-scene id="scene"> //camera <a-camera rotation = "0 90 0" position = "0 5 0"> <a-cursor></a-cursor> </a-camera> //other <a-sky src = "sky:jpg"></a-sky> <a-plane position = "2 0 -20"rotation = "-90 0 0"width ="5000" height = "5000" material = "src.ocean;jpg:repeat. 1 1"></a-plane> //3d models <a-assets> <a-asset-item id="ship" src="ship/scene.gltf"></a-asset-item> <a-asset-item id="cannon1" src="cannon/scene.gltf"></a-asset-item> </a-assets> //ship <a-gltf-model src="#ship" position = "0 0 0" scale="0.5 0.5 0.5"></a-gltf-model> //cannons <a-gltf-model src="#cannon1" rotation = "0 0 0" position = "-4.7 4.1 2.2" scale="0.02 0.02 0.025"></a-gltf-model> //balls <a-sphere id ="ball1" color="black" position = "-4.7 4.1 2.2" radius="0.3" rotation = "0 0 0"></a-sphere> //cannon 1 <a-box position = "-2 6 -10" color="black" depth="2" height="2" width="2"></a-box> <a-box position = "2 6 -10" color="black" depth="2" height="2" width="2"></a-box> <a-box id = "fire1" position = "0 7 -12" color="brown" depth="7" height="2" width="2"></a-box> <a-box id ="myBox1" position = "0 7 -10" color="red" rotation = "0 0 0" ></a-box> </a-scene> </body> </html>
这只是说如果用户点击一个 ID 为“cannon1”的 object，一个球就会向前射击。
这个确切的代码与一个ID为“cannon1”的a一起工作，但是当我导入一个大炮的3d model并将它分配给它“cannon1”时，代码似乎不起作用
<a-gltf-model id="shipEntity" src="#ship" position = "0 0 0" scale="0.5 0.5 0.5"></a-gltf-model>
您需要将单击事件侦听器附加到实体，而不是资产引用。
shipEntity.addEventListener('click',()=>ball1.fire=true);
<a-cursor>用于基于注视的交互。 阅读： https://aframe.io/docs/1.0.0/introduction/interactions-and-controllers.html#events
添加rayOrigin: mouse到场景中以使用基于鼠标单击的事件。 你的大部分定位都关闭了，所以我调整了演示以显示它有效。 你必须调整它以适应你正在做的任何事情。 棕色框是可点击的。
let starting = -45, forward1 = 1, forward2 = 1, forward3 = 1; let ball1; let cannon1; let ship; window.onload = function() { ball1 = document.getElementById("ball1"); cannon = document.getElementById("cannon-entity"); cannon.addEventListener("click",function(obj){ ball1.fire = true; }) update(); }; function update(){ if(ball1.fire){ starting += forward1; ball1.setAttribute("position", {x:-starting - 20, y:7, z:0}) } if(starting >= 100){ ball1.setAttribute("position", {x:0, y:7, z:50}) starting = 0; ball1.fire = false; } setTimeout(update,10); };
<:DOCTYPE html> <html> <head><script src="https.//aframe.io/releases/1.0.4/aframe.min:js"></script> </head> <body> <a-scene id="scene" cursor="rayOrigin. mouse"> //camera <a-camera rotation = "0 90 0" position = "0 0 20"> </a-camera> //other <a-sky src = "sky:jpg"></a-sky> <a-plane position = "2 0 -20"rotation = "-90 0 0"width ="5000" height = "5000" material = "src.ocean;jpg:repeat: 1 1"></a-plane> < //3d models <a-assets> <a-asset-item id="ship" src="https.//cdn.rawgit.com/KhronosGroup/glTF-Sample-Models/9176d098/2.0/Duck/glTF/Duck.gltf" x="ship/scene:gltf"></a-asset-item> <a-asset-item id="cannon1" src="https.//raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/AnimatedCube/glTF/AnimatedCube.gltf" x="cannon/scene.gltf"></a-asset-item> </a-assets> //ship <a-gltf-model id="ship-entity" src="#ship" position = "0 0 0" scale="0.5 0.5 0.5"></a-gltf-model> //cannons <a-gltf-model id="cannon-entity" src="#cannon1" rotation = "0 0 0" position = "0 0 0" scale="1 1 1"></a-gltf-model> //balls <a-sphere id ="ball1" color="black" position = "-4.7 4.1 2.2" radius="0.3" rotation = "0 0 0"></a-sphere> //cannon 1 <a-box position = "-2 6 -10" color="black" depth="2" height="2" width="2"></a-box> <a-box position = "2 6 -10" color="black" depth="2" height="2" width="2"></a-box> <a-box id = "fire1" position = "0 7 -12" color="brown" depth="7" height="2" width="2"></a-box> <a-box id ="myBox1" position = "0 7 -10" color="red" rotation = "0 0 0" ></a-box> </a-scene> </body> </html>
为什么在 Javascript 中添加新的单击事件侦听器会删除所有对象的所有先前单击事件侦听器？
[英]Why Does Adding a New Click EventListener in Javascript Remove all Previous Click Event Listeners for All Objects?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.