#javascript #html #addeventlistener #aframe
#javascript #HTML #addeventlistener #aframe
Вопрос:
Я пытаюсь сделать одну из самых простых вещей, которые когда-либо были, добавить прослушиватели событий к элементу в A-Frame. Однако я новичок в A-Frame и сталкиваюсь со множеством проблем. Дело даже не в том, что код не поворачивает объект при наведении курсора мыши, а в том, что никакие щелчки не регистрируются через консоль. Я подумал, что это может быть как-то связано с тем фактом, что компонент «fishing-logic» добавлен к родительскому элементу, позиция которого равна (0,0,0), в то время как часть модели, которую я пытаюсь щелкнуть, имеет позицию (0, 1, -3), но даже когда я добавляю компонент «fishing-logic» к нему, он все еще не регистрирует щелчки. Кто-нибудь может помочь мне понять, что я делаю не так?
AFRAME.registerComponent('fishing-logic', {
init: function() {
var el = this.el;
var isDragging = false;
el.addEventListener('mouseenter', function() {
console.log("Calling mouse enter!");
});
el.addEventListener('mouseleave', function() {
console.log("Calling mouse leave!");
});
el.addEventListener('mousedown', function(evt) {
console.log("Calling mouse down!");
isDragging = true;
if(this.isDragging){
el.object3D.rotation.x = Math.PI;
}
});
el.addEventListener('mouseup', function(evt) {
console.log("Calling mouse up!");
});
}
}); <!DOCTYPE html>
<html lang="en">
<head>
<title>A-Frame Starter</title>
<meta name="description" content="Base Project">
<script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-event-set-component@4.2.1/dist/aframe-event-set-component.min.js"></script>
<script src="//cdn.rawgit.com/donmccurdy/aframe-extras/v6.0.0/dist/aframe-extras.min.js"></script>
<script src="//cdn.rawgit.com/donmccurdy/aframe-physics-system/v3.3.0/dist/aframe-physics-system.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<a-scene>
<a-assets><a-asset-item id="fishing_pole" src="assets/Fishing_Pole_01.gltf"></a-assets>
<a-entity fishing-logic>
<a-gltf-model src="#fishing_pole"
position="0 1 -3"
rotation="0 0 0"
scale="0.1 0.1 0.1"></a-gltf-model>
<a-entity line="start: 0, 3.3, -2.9; end:0 0 -5; color: white"></a-entity>
</a-entity>
<a-sky color="#111133"></a-sky>
<a-plane rotation="-90 0 0" color="#000011" width="64" height="64" depth="64" shadow></a-plane>
</a-scene>
<div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
<script src="https://button.glitch.me/button.js"></script>
</body>
</html> Ответ №1:
Проблема в том, что, поскольку fishing-logic находится на родительской a-сущности для a-gtlf-модели, для нее требовался «взаимодействующий» селектор запросов / класс для raycaster. Это можно увидеть во фрагменте кода ниже. Затем я добавил взаимодействующий компонент наряду с компонентом fishing-logic в a-entity, и теперь регистрируются клики.
AFRAME.registerComponent('interactable', {
init() {
let el = this.el;
let originalColor = el.getAttribute('material').color;
el.addEventListener('raycaster-intersected', function() {
el.setAttribute('material', 'color', '#24CAFF');
});
el.addEventListener('raycaster-intersected-cleared', function() {
el.setAttribute('material', 'color', originalColor);
});
el.addEventListener('mousedown', function() {
el.body.applyImpulse(
new CANNON.Vec3(0, 3, 0),
new CANNON.Vec3().copy(el.getAttribute('position'))
);
});
}
});