File size: 1,928 Bytes
6a4d0e7
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
e3052f2
6a4d0e7
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
# NVidiaRaytraceMirrorAframeThreeJS

import streamlit as st
import random

# Import A-Frame and Three.js
from streamlit.components.v1 import ComponentBase
from streamlit.components.v1.iframe import IFrame
import streamlit.components.v1 as components

AFRAME_URL = "https://aframe.io/releases/1.2.0/aframe.min.js"
THREEJS_URL = "https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"

class AframeThreeJS(ComponentBase):
    def __init__(self, html):
        self.html = html
        super().__init__(self)

    def _get_frontend_deps(self):
        return {
            "js": [AFRAME_URL, THREEJS_URL],
        }

    def _get_html(self):
        return self.html

def main():
    st.set_page_config(page_title="NVidia Raytrace Mirror - A-Frame and Three.js", page_icon="🔥")

    # Replace this with your HTML content generated from the query
    html_content = f"""
    <html>
        <head>
            <script src="{AFRAME_URL}"></script>
            <script src="{THREEJS_URL}"></script>
        </head>
        <body>
            <a-scene>
                <a-assets>
                    <img id="sky" src="https://cdn.aframe.io/examples/boilerplate/sky.jpg">
                </a-assets>

                <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow></a-box>
                <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere>
                <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder>
                <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane>
                <a-sky src="#sky"></a-sky>
            </a-scene>
        </body>
    </html>
    """

    # Render the A-Frame and Three.js scene
    #components
    aframe_threejs = AframeThreeJS(html_content)
    st.markdown(aframe_threejs, unsafe_allow_html=True)


if name == "main":
    main()