Hugging Face's logo

Spaces:
tencent
/
Hunyuan3D-2mv
Running on Zero

App Files Community
2
Hunyuan3D-2mv
File size: 3,136 Bytes 
04b20ec
 
 
 
 
 
 
 
 
 
 
 
 
1270fc6
 
 
 
04b20ec
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1270fc6
 
 
 
 
 
 
 
04b20ec
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>