File size: 4,458 Bytes
089f324 43854a2 a7617e0 43854a2 a7617e0 43854a2 a7617e0 43854a2 a7617e0 43854a2 089f324 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 |
<!DOCTYPE html>
<html>
<head>
<title>Finite State Machine Demo with 3D Bird Swarm</title>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
</head>
<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-assets>
<a-sky src="#skyTexture"></a-sky>
<a-plane src="#groundTexture" rotation="-90 0 0" height="100" width="100"></a-plane>
<a-entity id="player" position="0 1.5 -5" movement></a-entity>
<a-entity id="bird-swarm">
<a-sphere color="#F44336" position="0 1.5 -10" radius="0.5"></a-sphere>
<a-sphere color="#E91E63" position="0 1.5 -11" radius="0.5"></a-sphere>
<a-sphere color="#9C27B0" position="0 1.5 -12" radius="0.5"></a-sphere>
<a-sphere color="#2196F3" position="0 1.5 -13" radius="0.5"></a-sphere>
<a-sphere color="#4CAF50" position="0 1.5 -14" radius="0.5"></a-sphere>
</a-entity>
</a-scene>
<script src="https://cdnjs.cloudflare.com/ajax/libs/javascript-state-machine/3.0.0/state-machine.min.js"></script>
<script>
AFRAME.registerComponent('movement', {
init: function () {
var el = this.el;
var playerState = 'idle';
var stateMachine = new StateMachine({
init: 'idle',
transitions: [
{ name: 'moveForward', from: ['idle', 'moveBackward'], to: 'moveForward' },
{ name: 'moveBackward', from: ['idle', 'moveForward'], to: 'moveBackward' },
{ name: 'stop', from: ['moveForward', 'moveBackward'], to: 'idle' }
],
methods: {
onEnterMoveForward: function () {
el.setAttribute('animation', 'property: position; to: 0 1.5 -2; dur: 2000');
},
onEnterMoveBackward: function () {
el.setAttribute('animation', 'property: position; to: 0 1.5 -8; dur: 2000');
},
onLeaveMoveForward: function () {
el.setAttribute('animation', '');
},
onLeaveMoveBackward: function () {
el.setAttribute('animation', '');
}
}
});
document.addEventListener('keydown', function (event) {
switch (event.key) {
case 'ArrowUp':
stateMachine.moveForward();
break;
case 'ArrowDown':
stateMachine.moveBackward();
break;
}
});
document.addEventListener('keyup', function (event) {
switch (event.key) {
case 'ArrowUp':
case 'ArrowDown':
stateMachine.stop();
break;
}
});
var birdSwarm = document.querySelector('#bird-swarm');
var birdState = 'idle';
var birdStateMachine = new StateMachine({
init: 'follow',
transitions: [
{ name: 'follow', from: 'idle', to: 'follow' },
{ name: 'stop', from: 'follow', to: 'idle' }
],
methods: {
onEnterFollow: function () {
birdSwarm.setAttribute('animation', 'property: position; to: 0 1.5 -6; dur: 2000');
},
onLeaveFollow: function () {
birdSwarm.setAttribute('animation', '');
}
}
});
function updateBirdPosition () {
var playerPosition = el.getAttribute('position');
birdSwarm.setAttribute('position', playerPosition.x + ' ' + playerPosition.y + ' ' + (playerPosition.z - 5));
}
setInterval(function () {
updateBirdPosition();
}, 100);
document.addEventListener('keydown', function (event) {
switch (event.key) {
case 'ArrowUp':
case 'ArrowDown':
birdStateMachine.follow();
break;
}
});
document.addEventListener('keyup', function (event) {
switch (event.key) {
case 'ArrowUp':
case 'ArrowDown':
birdStateMachine.stop();
break;
}
});
}
});
</script>
</body>
</html>
|