Spaces:
Running
Running
| import streamlit as st | |
| # A-Frame HTML template with drag-and-drop functionality | |
| aframe_html = """ | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script> | |
| <!-- Include the drag-and-drop component --> | |
| <script src="https://unpkg.com/aframe-physics-system/dist/aframe-physics-system.min.js"></script> | |
| <script src="https://unpkg.com/aframe-environment-component/dist/aframe-environment-component.min.js"></script> | |
| </head> | |
| <body> | |
| <a-scene physics="debug: true"> | |
| <!-- Card entity --> | |
| <a-box id="card" position="0 0.5 0" rotation="0 45 0" depth="0.01" height="0.64" width="0.44" | |
| src="https://your-server.com/path/to/card-texture.png" | |
| dynamic-body | |
| grabbable | |
| constraint="target: #hand; type: lock"> | |
| </a-box> | |
| <!-- Environment --> | |
| <a-entity environment="preset: forest;"></a-entity> | |
| <!-- Camera --> | |
| <a-entity camera look-controls position="0 1.6 0"> | |
| <a-entity id="hand" cursor="fuse: true; fuseTimeout: 500" | |
| position="0 0 -1" | |
| geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03" | |
| material="color: black; shader: flat"> | |
| </a-entity> | |
| </a-entity> | |
| </a-scene> | |
| </body> | |
| </html> | |
| """ | |
| # Streamlit command to render the A-Frame scene | |
| st.markdown(aframe_html, unsafe_allow_html=True) | |