fb/app.craft.vin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added second render to aframe

Browse Source
This commit is contained in:
Felix Baumgärtner 2024-01-16 08:55:19 +01:00
parent 532dd754ed
commit b9cd2a0622
1 changed files with 60 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
src/components/Map.svelte
View File

@ -1,19 +1,43 @@
<script> <script>
import { page } from '$app/stores';
var canvasVisible = false;
$: $page.url.pathname == '/control' ? canvasVisible = true : canvasVisible = false;
var frontalView = true;
function setFrontalView(bool) {
frontalView = bool;
}
</script> </script>
<svelte:head> <svelte:head>
<script> <script>
AFRAME.registerComponent("foo", { AFRAME.registerComponent("additional-cams", {
init: function() { init: function() {
this.canvas = document.querySelector("#cam"); this.frontalCanvas = document.querySelector("#frontal-canvas");
this.ctx = this.canvas.getContext("2d"); this.frontalCtx = this.frontalCanvas.getContext("2d");
this.secondaryCam = document.querySelector("#secondarycam").components.camera.camera; this.frontalCam = document.querySelector("#frontal-cam").components.camera.camera;
this.topCanvas = document.querySelector("#top-canvas");
this.topCtx = this.topCanvas.getContext("2d");
this.topCam = document.querySelector("#top-cam").components.camera.camera;
}, },
tick: function() { tick: function() {
if (!this.secondaryCam) return; if (!this.frontalCam && !this.topCam) return;
this.el.renderer.render(this.el.sceneEl.object3D, this.secondaryCam); if (this.frontalCanvas.parentElement.classList.contains('hidden') == false) {
this.ctx.drawImage(this.el.renderer.domElement, 0, 0, 480, 270); this.el.renderer.render(this.el.sceneEl.object3D, this.frontalCam);
this.frontalCtx.drawImage(this.el.renderer.domElement, 0, 0, 480, 270);
} else {
// console.error('Canvas not found or not supported');
}
if (this.topCanvas.parentElement.classList.contains('hidden') == false) {
this.el.renderer.render(this.el.sceneEl.object3D, this.topCam);
this.topCtx.drawImage(this.el.renderer.domElement, 0, 0, 270, 480);
} else {
// console.error('Canvas not found or not supported');
}
} }
}); });
@ -227,15 +251,16 @@
</script> </script>
</svelte:head> </svelte:head>
<canvas id="cam" width="480" height="270"></canvas> <canvas id="frontal-canvas" class="w-full {canvasVisible == true && frontalView == true ? "block" : "hidden"}" width="480" height="270"></canvas>
<div id="aframe-wrapper"> <canvas id="top-canvas" class="w-full {canvasVisible == true && frontalView == false ? "block" : "hidden"}" width="270" height="480"></canvas>
<a-scene embedded background="color: #FAFAFA" foo> <div id="aframe-wrapper" class="{canvasVisible == false ? "block" : "hidden"}" allowfullscreen="no">
<a-scene embedded background="color: #FAFAFA" xr-mode-ui="enabled: false" additional-cams>
<a-assets> <a-assets>
<!-- <a-asset-item id="fts-case" src="/aframe/fts-case.glb"></a-asset-item> --> <!-- <a-asset-item id="fts-case" src="/aframe/fts-case-decimated-export.glb"></a-asset-item>
<a-asset-item id="warehouse" src="/aframe/Factory_Warehouse.glb"></a-asset-item> <a-asset-item id="warehouse" src="/aframe/Factory_Warehouse.glb"></a-asset-item> -->
</a-assets> </a-assets>
<!-- <a-entity gltf-model="#warehouse" position="3 0 2.5" scale="0.1 0.1 0.1"></a-entity> --> <a-entity gltf-model="/aframe/Factory_Warehouse.glb" position="3 0 2.5" scale="0.1 0.1 0.1"></a-entity>
<!-- description --> <!-- description -->
<a-text value="Cannon" position="5 0.5 1" rotation="-90 0 0" align="center" opacity="0.5"></a-text> <a-text value="Cannon" position="5 0.5 1" rotation="-90 0 0" align="center" opacity="0.5"></a-text>
@ -252,19 +277,32 @@
</a-entity> </a-entity>
<!-- dynamic cam fts --> <!-- dynamic cam fts -->
<a-entity id="fts" position="5 0.025 1" rotation="0 0 0" mqtt-control> <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 id="frontal-cam" camera="active: false" position="0 0.005 0.06" rotation="10 180 0" material="opacity: 0"></a-entity>
<a-entity id="top-cam" camera="active: false" position="0 0.3 0" rotation="-90 180 0" material="opacity: 0"></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 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-entity>
</a-scene> </a-scene>
</div> </div>
<div class="btn-group variant-filled-primary grid grid-cols-3">
<button onclick="animateToDest('cannon')">Cannon</button> <button onclick="animateToDest('cannon')">Cannon</button>
<button onclick="animateToDest('station-a')">Station A</button> <button onclick="animateToDest('station-a')">Station A</button>
<button onclick="animateToDest('station-b')">Station B</button> <button onclick="animateToDest('station-b')">Station B</button>
<p>Toggle camera view: Follow, Manual, Zoom?</p> </div>
<div class="{canvasVisible == true ? "block" : "hidden"}">
<h2>Toggle camera</h2>
<div class="btn-group variant-filled-primary grid grid-cols-2">
<button on:click={() => setFrontalView(true)}>Dynamic</button>
<button on:click={() => setFrontalView(false)}>Static</button>
</div>
</div>
<style> <style lang="postcss">
#aframe-wrapper { #aframe-wrapper {
aspect-ratio: 2/1.4; aspect-ratio: 2/1.4;
} }
button {
@apply grow;
}
</style> </style>