Hugging Face's logo

Spaces:
sasu1205
/
3d_tuning
Runtime error

App Files Community
3d_tuning
File size: 3,216 Bytes 
30e8948
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
 
<!DOCTYPE html>
<html>

<head>
    <!-- Import the component -->
    <script src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.1.1/model-viewer.min.js" type="module"></script>

    <script>

        document.addEventListener('DOMContentLoaded', () => {

            const modelViewers = document.querySelectorAll('model-viewer');

            const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);



            modelViewers.forEach(modelViewer => {

                //modelViewer.setAttribute(

                //    "environment-image",

                //    "/static/env_maps/gradient.jpg"

                //);

                // if (!isSafari) {

                //     modelViewer.setAttribute(

                //         "environment-image",

                //         "/static/env_maps/gradient.jpg"

                //     );

                // } else {

                //     modelViewer.addEventListener('load', (event) => {

                //         const [material] = modelViewer.model.materials;

                //         let color = [43, 44, 46, 255];

                //         color = color.map(x => x / 255);

                //         material.pbrMetallicRoughness.setMetallicFactor(0.1); // ๅฎŒๅ…จ้‡‘ๅฑž

                //         material.pbrMetallicRoughness.setRoughnessFactor(0.7); // ไฝŽ็ฒ—็ณ™ๅบฆ

                //         material.pbrMetallicRoughness.setBaseColorFactor(color);  // CornflowerBlue in RGB

                //     });

                // }

                 modelViewer.addEventListener('load', (event) => {

                     const [material] = modelViewer.model.materials;

                     let color = [43, 44, 46, 255];

                     color = color.map(x => x / 255);

                     material.pbrMetallicRoughness.setMetallicFactor(0.1); // ๅฎŒๅ…จ้‡‘ๅฑž

                     material.pbrMetallicRoughness.setRoughnessFactor(0.7); // ไฝŽ็ฒ—็ณ™ๅบฆ

                     material.pbrMetallicRoughness.setBaseColorFactor(color);  // CornflowerBlue in RGB

                 });

            });

        });

    </script>

    <style>

        body {

            margin: 0;

            font-family: Arial, sans-serif;

        }



        .centered-container {

            display: flex;

            justify-content: center;

            align-items: center;

            border-radius: 8px;

            border-color: #e5e7eb;

            border-style: solid;

            border-width: 1px;

        }

    </style>
</head>

<body>
<div class="centered-container">
    <div class="column is-mobile is-centered">
        <model-viewer id="modelviewer" style="height: #height#px; width: #width#px;"

                      rotation-per-second="10deg"

                      src="#src#" disable-tap

                      environment-image="neutral"

                      camera-target="0m 0m 0m"

                      camera-orbit="0deg 90deg 8m"

                      orientation="0deg 0deg 0deg"

                      shadow-intensity=".9"

                      ar auto-rotate

                      camera-controls>
        </model-viewer>
    </div>
</div>
</body>

</html>