# Kirchentagswürfel - ktwu # h1 ## Kirchentag ### Download Bildmaterial & Logos -> [Print, Social Media, Web](https://kirchentag.sharepoint.com/sites/Medien-extern/Freigegebene%20Dokumente/Forms/AllItems.aspx?id=%2Fsites%2FMedien%2Dextern%2FFreigegebene%20Dokumente%2FDownloadbereich%2FKampagne&p=true&ga=1) ![](https://i.imgur.com/6StfaTs.png) ![](https://i.imgur.com/kpuDdIH.jpg) ### Als Target Marker ![](https://i.imgur.com/UQ3EWlQ.jpg) ## How to choose a good Target Marker https://pictarize.com/image-analyzer/?ref=mindar-org # MINDAR ## Image Targets Compuler https://hiukim.github.io/mind-ar-js-doc/tools/compile/ ## Beispiel-URL https://lmy.de/uSCLy ``` <a-entity id="redBox" geometry="" material="color: #f00" position="-4 1 0" animation="property: object3D.rotation.y; to: 360; loop: true; easing: linear; dur: 9600"></a-entity> ``` ## Beispielscode ``` <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/dist/mindar-image.prod.js"></script> <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/dist/mindar-image-aframe.prod.js"></script> </head> <body> <a-scene mindar-image="imageTargetSrc: https://www.joerg-lohrer.de/ar/marker/targets.mind;" color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false"> <a-assets> <img id="card" src="https://i.imgur.com/2o040hy.png" /> <a-asset-item id="avatarModel" src="https://models.readyplayer.me/61027d348099cfb7d8be1a02.glb"></a-asset-item> </a-assets> <a-box position="0 2 -5" rotation="0 45 45" scale="2 2 2" src="#boxTexture"> <a-camera position="0 0 0" look-controls="enabled: false"></a-camera> <a-entity mindar-image-target="targetIndex: 0"> <a-plane src="#card" position="0 0 0" height="1" width="1" rotation="0 0 0"></a-plane> <a-gltf-model rotation="90 0 0 " position="0 0 0.5" scale="0.5 0.5 0.5" src="#avatarModel" animation="property: position; to: 0 0 0; dur: 1000; easing: easeInOutQuad; loop: true; dir: alternate"></a-gltf-model> <a-text value="Hack den Wuerfel!" color="#BBB" position="-1 -0.5 -0.5" scale="0.8 0.8 0.8"></a-text> </a-entity> </a-scene> </body> </html> ``` ``` <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/mind-ar@1.2.0/dist/mindar-image-aframe.prod.js"></script> </head> <body> <a-scene mindar-image="imageTargetSrc: https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.0.0/examples/image-tracking/assets/card-example/card.mind;" color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false"> <a-assets> <img id="card" src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.0.0/examples/image-tracking/assets/card-example/card.png" /> <a-asset-item id="avatarModel" src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.0.0/examples/image-tracking/assets/card-example/softmind/scene.gltf"></a-asset-item> </a-assets> <a-camera position="0 0 0" look-controls="enabled: false"></a-camera> <a-entity mindar-image-target="targetIndex: 0"> <a-plane src="#card" position="0 0 0" height="0.552" width="1" rotation="0 0 0"></a-plane> <a-gltf-model rotation="0 0 0 " position="0 0 0.1" scale="0.005 0.005 0.005" src="#avatarModel" animation="property: position; to: 0 0.1 0.1; dur: 1000; easing: easeInOutQuad; loop: true; dir: alternate" > </a-entity> </a-scene> </body> </html> ``` meins: ``` <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/dist/mindar-image.prod.js"></script> <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/dist/mindar-image-aframe.prod.js"></script> </head> <body> <a-scene mindar-image="imageTargetSrc: https://www.joerg-lohrer.de/ar/marker/targets.mind;" color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false"> <a-assets> <img id="card" src="https://i.imgur.com/2o040hy.png" /> <a-asset-item id="avatarModel" src="https://raw.githubusercontent.com/joerglohrer/ar/main/gltf/BoxTextured.gltf"></a-asset-item> </a-assets> <a-camera position="0 0 0" look-controls="enabled: false"></a-camera> <a-entity mindar-image-target="targetIndex: 0"> <a-plane src="#card" position="0 0 0" height="0.552" width="1" rotation="0 0 0"></a-plane> <a-gltf-model rotation="0 0 0 " position="0 0 0.1" scale="0.005 0.005 0.005" src="#avatarModel" animation="property: position; to: 0 0.1 0.1; dur: 1000; easing: easeInOutQuad; loop: true; dir: alternate"> </a-entity> </a-scene> </body> </html> ``` ## Merge Cube https://merge-ar.glitch.me/ ``` <a-entity id="infoPanel" position="0 0 0.5" info-panel="" visible="" scale="" geometry="primitive: plane; width: 1.5; height: 1.8" material="color: #333333; shader: flat" class="raycastable"> <a-entity id="ponyoMovieImage" mixin="movieImage" material="" visible="false" geometry=""></a-entity> <a-entity id="kazetachinuMovieImage" mixin="movieImage" material="" visible="" geometry="" position="0 0.31657 0.002"></a-entity> <a-entity id="karigurashiMovieImage" mixin="movieImage" material="" visible="false" geometry=""></a-entity> <a-entity id="movieTitle" position="-0.68 -0.1 0" text="shader: msdf; anchor: left; width: 1.5; font: https://cdn.aframe.io/examples/ui/Viga-Regular.json; color: white; value: The Wind Rises (2013)"></a-entity> <a-entity id="movieDescription" position="-0.68 -0.2 0" text="baseline: top; shader: msdf; anchor: left; font: https://cdn.aframe.io/examples/ui/Viga-Regular.json; color: white; value: The Wind Rises is a fictionalised biographical film of Jiro Horikoshi (1903, 1982), designer of the Mitsubishi A5M fighter aircraft and its successor, the Mitsubishi A6M Zero, used by the Empire of Japan during World War II. The film is adapted from Miyazaki's manga of the same name, which was in turn loosely based on both the 1937 novel The Wind Has Risen by Tatsuo Hori and the life of Jiro Horikoshi."></a-entity> </a-entity> ```