added aframe map component
This commit is contained in:
Felix Baumgärtner
parent
b8ad31544e
commit
16acf15649
270
src/components/Map.svelte
Normal file
270
src/components/Map.svelte
Normal file
@ -0,0 +1,270 @@
|
|||||||
|
<script>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:head>
|
||||||
|
<script>
|
||||||
|
AFRAME.registerComponent("foo", {
|
||||||
|
init: function() {
|
||||||
|
this.canvas = document.querySelector("#cam");
|
||||||
|
this.ctx = this.canvas.getContext("2d");
|
||||||
|
this.secondaryCam = document.querySelector("#secondarycam").components.camera.camera;
|
||||||
|
},
|
||||||
|
tick: function() {
|
||||||
|
if (!this.secondaryCam) return;
|
||||||
|
|
||||||
|
this.el.renderer.render(this.el.sceneEl.object3D, this.secondaryCam);
|
||||||
|
this.ctx.drawImage(this.el.renderer.domElement, 0, 0, 480, 270);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
AFRAME.registerComponent('mqtt-control', {
|
||||||
|
init: function () {
|
||||||
|
let oldDirection = "";
|
||||||
|
let currentDirection = "";
|
||||||
|
let animationFrameId;
|
||||||
|
|
||||||
|
const moveContinuously = () => {
|
||||||
|
const entity = this.el;
|
||||||
|
const currentPosition = entity.getAttribute('position');
|
||||||
|
const currentRotation = entity.getAttribute('rotation');
|
||||||
|
|
||||||
|
let speedPos = 0.01;
|
||||||
|
let speedRot = 2;
|
||||||
|
|
||||||
|
let deltaMove;
|
||||||
|
let deltaRotate;
|
||||||
|
|
||||||
|
switch (currentDirection) {
|
||||||
|
case "bwd":
|
||||||
|
speedPos = speedPos * -1;
|
||||||
|
// fall through
|
||||||
|
case "fwd":
|
||||||
|
deltaMove = new AFRAME.THREE.Vector3(
|
||||||
|
currentPosition.x + speedPos * Math.sin(currentRotation.y * (Math.PI / 180)),
|
||||||
|
currentPosition.y,
|
||||||
|
currentPosition.z + speedPos * Math.cos(currentRotation.y * (Math.PI / 180))
|
||||||
|
);
|
||||||
|
entity.setAttribute('position', deltaMove);
|
||||||
|
break;
|
||||||
|
case "right":
|
||||||
|
speedRot = speedRot * -1;
|
||||||
|
// fall through
|
||||||
|
case "left":
|
||||||
|
deltaRotate = new AFRAME.THREE.Vector3(
|
||||||
|
currentRotation.x,
|
||||||
|
currentRotation.y + speedRot,
|
||||||
|
currentRotation.z
|
||||||
|
);
|
||||||
|
entity.setAttribute('rotation', deltaRotate);
|
||||||
|
|
||||||
|
deltaMove = new AFRAME.THREE.Vector3(
|
||||||
|
currentPosition.x + speedPos * Math.sin(currentRotation.y * (Math.PI / 180)),
|
||||||
|
currentPosition.y,
|
||||||
|
currentPosition.z + speedPos * Math.cos(currentRotation.y * (Math.PI / 180))
|
||||||
|
);
|
||||||
|
entity.setAttribute('position', deltaMove);
|
||||||
|
break;
|
||||||
|
case "turnRight":
|
||||||
|
speedRot = speedRot * -1;
|
||||||
|
// fall through
|
||||||
|
case "turnLeft":
|
||||||
|
deltaRotate = new AFRAME.THREE.Vector3(
|
||||||
|
currentRotation.x,
|
||||||
|
currentRotation.y + speedRot,
|
||||||
|
currentRotation.z
|
||||||
|
);
|
||||||
|
entity.setAttribute('rotation', deltaRotate);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
animationFrameId = requestAnimationFrame(moveContinuously);
|
||||||
|
};
|
||||||
|
|
||||||
|
const client = mqtt.connect('mqtt://sxl6.feba.me:9002');
|
||||||
|
|
||||||
|
client.on("connect", () => {
|
||||||
|
client.subscribe('fts/1/send/fwd');
|
||||||
|
client.subscribe('fts/1/send/bwd');
|
||||||
|
client.subscribe('fts/1/send/left');
|
||||||
|
client.subscribe('fts/1/send/right');
|
||||||
|
client.subscribe('fts/1/send/turnLeft');
|
||||||
|
client.subscribe('fts/1/send/turnRight');
|
||||||
|
});
|
||||||
|
|
||||||
|
client.on('message', (topic, message) => {
|
||||||
|
const content = message.toString();
|
||||||
|
|
||||||
|
if (topic.startsWith('fts/1/send/')) {
|
||||||
|
const newDirection = topic.replace('fts/1/send/', '');
|
||||||
|
|
||||||
|
if (content == 1) {
|
||||||
|
if (newDirection !== currentDirection) {
|
||||||
|
oldDirection = newDirection;
|
||||||
|
currentDirection = newDirection;
|
||||||
|
cancelAnimationFrame(animationFrameId);
|
||||||
|
animationFrameId = requestAnimationFrame(moveContinuously);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
cancelAnimationFrame(animationFrameId);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
function animateToDest(dest) {
|
||||||
|
|
||||||
|
skipAnimation = false;
|
||||||
|
if (dest == "cannon") {
|
||||||
|
destCoords = {x: 5, y: 0.025, z: 1};
|
||||||
|
skipAnimation = true;
|
||||||
|
} else if (dest == "station-a") {
|
||||||
|
destCoords = {x: 3, y: 0.025, z: 2};
|
||||||
|
} else if (dest == "station-b") {
|
||||||
|
destCoords = {x: 1, y: 0.025, z: 4};
|
||||||
|
}
|
||||||
|
|
||||||
|
rotation = 0;
|
||||||
|
function startAnimation1(entity) {
|
||||||
|
// console.log(entity.getAttribute('rotation').y);
|
||||||
|
// if (entity.getAttribute('rotation').y == -90) {
|
||||||
|
// document.getElementById("cam-front-view").setAttribute("visible", false);
|
||||||
|
// document.getElementById("cam-back-view").setAttribute("visible", true);
|
||||||
|
// } else {
|
||||||
|
// document.getElementById("cam-back-view").setAttribute("visible", false);
|
||||||
|
// document.getElementById("cam-front-view").setAttribute("visible", true);
|
||||||
|
// }
|
||||||
|
|
||||||
|
if (entity.getAttribute('position').z < destCoords.z) {
|
||||||
|
rotation = -90;
|
||||||
|
} else if (entity.getAttribute('position').z >= destCoords.z) {
|
||||||
|
rotation = 90;
|
||||||
|
}
|
||||||
|
|
||||||
|
// check if starting from cannon to skip this step
|
||||||
|
if (JSON.stringify(entity.getAttribute('position')) != JSON.stringify({x: 5, y: 0.025, z: 1})) {
|
||||||
|
entity.setAttribute('animation__1', {
|
||||||
|
'property': 'position',
|
||||||
|
'to': `5 ${entity.getAttribute('position').y} ${entity.getAttribute('position').z}`,
|
||||||
|
'startEvents': 'start1',
|
||||||
|
'dur': 1500
|
||||||
|
});
|
||||||
|
entity.emit('start1', null, false);
|
||||||
|
entity.addEventListener('animationcomplete', onAnimationComplete);
|
||||||
|
} else {
|
||||||
|
startAnimation03(entity);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function startAnimation02(entity) {
|
||||||
|
entity.setAttribute('animation__2', {
|
||||||
|
'property': 'rotation',
|
||||||
|
'to': `${entity.getAttribute('rotation').x} ${entity.getAttribute('rotation').y + rotation} ${entity.getAttribute('rotation').z}`,
|
||||||
|
'startEvents': 'start2',
|
||||||
|
'dur': 500
|
||||||
|
});
|
||||||
|
entity.emit('start2', null, false);
|
||||||
|
entity.addEventListener('animationcomplete', onAnimationComplete);
|
||||||
|
}
|
||||||
|
function startAnimation03(entity) {
|
||||||
|
entity.setAttribute('animation__3', {
|
||||||
|
'property': 'position',
|
||||||
|
'to': `5 ${entity.getAttribute('position').y} ${destCoords.z}`,
|
||||||
|
'startEvents': 'start3',
|
||||||
|
'dur': 1500
|
||||||
|
});
|
||||||
|
entity.emit('start3', null, false);
|
||||||
|
entity.addEventListener('animationcomplete', onAnimationComplete);
|
||||||
|
}
|
||||||
|
function startAnimation04(entity) {
|
||||||
|
entity.setAttribute('animation__4', {
|
||||||
|
'property': 'rotation',
|
||||||
|
'to': `${entity.getAttribute('rotation').x} ${entity.getAttribute('rotation').y + rotation} ${entity.getAttribute('rotation').z}`,
|
||||||
|
'startEvents': 'start4',
|
||||||
|
'dur': 500
|
||||||
|
});
|
||||||
|
entity.emit('start4', null, false);
|
||||||
|
entity.addEventListener('animationcomplete', onAnimationComplete);
|
||||||
|
}
|
||||||
|
function startAnimation05(entity) {
|
||||||
|
entity.setAttribute('animation__5', {
|
||||||
|
'property': 'position',
|
||||||
|
'to': destCoords,
|
||||||
|
'startEvents': 'start5',
|
||||||
|
'dur': 1500
|
||||||
|
});
|
||||||
|
entity.emit('start5', null, false);
|
||||||
|
}
|
||||||
|
|
||||||
|
// chain animations through animation complete event
|
||||||
|
function onAnimationComplete(event) {
|
||||||
|
var eventName = event.detail.name;
|
||||||
|
var entity = event.target;
|
||||||
|
|
||||||
|
switch (eventName) {
|
||||||
|
case 'animation__1':
|
||||||
|
startAnimation02(entity);
|
||||||
|
break;
|
||||||
|
case 'animation__2':
|
||||||
|
startAnimation03(entity);
|
||||||
|
break;
|
||||||
|
case 'animation__3':
|
||||||
|
if (skipAnimation !== true) {
|
||||||
|
startAnimation04(entity);
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case 'animation__4':
|
||||||
|
startAnimation05(entity);
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
// Handle other animation events if needed
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
startAnimation1(document.getElementById("fts"));
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</svelte:head>
|
||||||
|
|
||||||
|
<canvas id="cam" width="480" height="270"></canvas>
|
||||||
|
<div id="aframe-wrapper">
|
||||||
|
<a-scene embedded background="color: #FAFAFA" foo>
|
||||||
|
<a-assets>
|
||||||
|
<!-- <a-asset-item id="fts-case" src="/aframe/fts-case.glb"></a-asset-item> -->
|
||||||
|
<a-asset-item id="warehouse" src="/aframe/Factory_Warehouse.glb"></a-asset-item>
|
||||||
|
</a-assets>
|
||||||
|
|
||||||
|
<!-- <a-entity gltf-model="#warehouse" position="3 0 2.5" scale="0.1 0.1 0.1"></a-entity> -->
|
||||||
|
|
||||||
|
<!-- description -->
|
||||||
|
<a-text value="Cannon" position="5 0.5 1" rotation="-90 0 0" align="center" opacity="0.5"></a-text>
|
||||||
|
<a-text value="Station A" position="3 0.5 2" rotation="-90 0 0" align="center" opacity="0.5"></a-text>
|
||||||
|
<a-text value="Station B" position="1 0.5 4" rotation="-90 0 0" align="center" opacity="0.5"></a-text>
|
||||||
|
<!-- lines -->
|
||||||
|
<a-box color="tomato" position="5 0 2.5" depth="3" height="0.001" width="0.01"></a-box>
|
||||||
|
<a-box color="tomato" position="4 0 2" depth="0.01" height="0.001" width="2"></a-box>
|
||||||
|
<a-box color="tomato" position="3 0 4" depth="0.01" height="0.001" width="4"></a-box>
|
||||||
|
|
||||||
|
|
||||||
|
<a-entity id="aerial-cam" position="3 4 4.1" rotation="-90 0 0">
|
||||||
|
<a-camera id="cam1" camera wasd-controls-enabled="false" look-controls-enabled="false" fov="60"></a-camera>
|
||||||
|
</a-entity>
|
||||||
|
<!-- dynamic cam fts -->
|
||||||
|
<a-entity id="fts" position="5 0.025 1" rotation="0 0 0" mqtt-control>
|
||||||
|
<a-entity id="secondarycam" camera="active: false" camrender="cid: cam-front" position="0 0.005 0.06" rotation="10 180 0" material="opacity: 0" canvas-updater></a-entity>
|
||||||
|
<a-entity gltf-model="/aframe/fts-case-decimated-export.glb" position="0 -0.02 0" scale="0.1 0.1 0.1"></a-entity>
|
||||||
|
</a-entity>
|
||||||
|
|
||||||
|
</a-scene>
|
||||||
|
</div>
|
||||||
|
<button onclick="animateToDest('cannon')">Cannon</button>
|
||||||
|
<button onclick="animateToDest('station-a')">Station A</button>
|
||||||
|
<button onclick="animateToDest('station-b')">Station B</button>
|
||||||
|
<p>Toggle camera view: Follow, Manual, Zoom?</p>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
#aframe-wrapper {
|
||||||
|
aspect-ratio: 2/1.4;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user