File size: 3,136 Bytes
94f7c5c
 
 
 
 
 
 
 
 
 
 
 
 
0b4067a
 
 
 
94f7c5c
 
 
 
 
 
 
 
 
 
 
 
 
 
 
0b4067a
 
 
 
 
 
 
 
94f7c5c
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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://cdn.jsdelivr.net/npm/@google/[email protected]/dist/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>