Adding glb file with 3js in streamlit?

Using Streamlit
, ,
1

So I want to add 3d avataars in my streamlit project. But by three js it is possible. Is it possible to add 3js in my streamlit. If yes then any example code snippet.l to understand

2

Yes, you can do that by using a streamlit component
her is an exemple :

js_content = f'''
            <!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>Three.js GLTF Model</title>
                <style>
                    body {{ margin: 0; }}
                    canvas {{ display: block; }}
                    #three-container {{ width: 100vw; height: 100vh; }}
                </style>
                <script type="importmap">
                {{
                    "imports": {{
                    "three": "https://cdn.jsdelivr.net/npm/three@0.149.0/build/three.module.js",
                    "three/examples/jsm/": "https://cdn.jsdelivr.net/npm/three@0.149.0/examples/jsm/"
                    }}
                }}
                </script>
            </head>
            <body>
                <div id="three-container"></div>
                <script type="module">
                    import * as THREE from 'three';
                    import {{ OrbitControls }} from 'three/examples/jsm/controls/OrbitControls.js';
                    import {{ GLTFLoader }} from 'three/examples/jsm/loaders/GLTFLoader.js';
           // and her u  can write ur code 

</script>
            </body>
            </html>
            

st.components.v1.html(js_content, height=1000, width=1000)