Hugging Face's logo

Spaces:
endlesstools
/
apiHunyuan3d
Running on T4

App Files Community
staswrs commited on
Commit
2e0a08b
·
1 Parent(s): a106eac

add front viewer

Browse files
Files changed (2) hide show
  1. assets/modelviewer-template.html +81 -0
  2. assets/modelviewer-textured-template.html +136 -0
assets/modelviewer-template.html ADDED
@@ -0,0 +1,81 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+
4
+ <head>
5
+ <!-- Import the component -->
6
+ <script src="https://cdn.jsdelivr.net/npm/@google/model-viewer@3.1.1/dist/model-viewer.min.js" type="module"></script>
7
+
8
+ <script>
9
+ document.addEventListener('DOMContentLoaded', () => {
10
+ const modelViewers = document.querySelectorAll('model-viewer');
11
+ const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
12
+
13
+ modelViewers.forEach(modelViewer => {
14
+ modelViewer.setAttribute(
15
+ "environment-image",
16
+ "/static/env_maps/gradient.jpg"
17
+ );
18
+ // if (!isSafari) {
19
+ // modelViewer.setAttribute(
20
+ // "environment-image",
21
+ // "/static/env_maps/gradient.jpg"
22
+ // );
23
+ // } else {
24
+ // modelViewer.addEventListener('load', (event) => {
25
+ // const [material] = modelViewer.model.materials;
26
+ // let color = [43, 44, 46, 255];
27
+ // color = color.map(x => x / 255);
28
+ // material.pbrMetallicRoughness.setMetallicFactor(0.1); // 完全金属
29
+ // material.pbrMetallicRoughness.setRoughnessFactor(0.7); // 低粗糙度
30
+ // material.pbrMetallicRoughness.setBaseColorFactor(color); // CornflowerBlue in RGB
31
+ // });
32
+ // }
33
+ // modelViewer.addEventListener('load', (event) => {
34
+ // const [material] = modelViewer.model.materials;
35
+ // let color = [43, 44, 46, 255];
36
+ // color = color.map(x => x / 255);
37
+ // material.pbrMetallicRoughness.setMetallicFactor(0.1); // 完全金属
38
+ // material.pbrMetallicRoughness.setRoughnessFactor(0.7); // 低粗糙度
39
+ // material.pbrMetallicRoughness.setBaseColorFactor(color); // CornflowerBlue in RGB
40
+ // });
41
+ });
42
+ });
43
+ </script>
44
+
45
+ <style>
46
+ body {
47
+ margin: 0;
48
+ font-family: Arial, sans-serif;
49
+ }
50
+
51
+ .centered-container {
52
+ display: flex;
53
+ justify-content: center;
54
+ align-items: center;
55
+ border-radius: 8px;
56
+ border-color: #e5e7eb;
57
+ border-style: solid;
58
+ border-width: 1px;
59
+ }
60
+ </style>
61
+ </head>
62
+
63
+ <body>
64
+ <div class="centered-container">
65
+ <div class="column is-mobile is-centered">
66
+ <model-viewer id="modelviewer" style="height: #height#px; width: #width#px;"
67
+ rotation-per-second="10deg"
68
+ src="#src#" disable-tap
69
+ environment-image="neutral"
70
+ camera-target="0m 0m 0m"
71
+ camera-orbit="0deg 90deg 8m"
72
+ orientation="0deg 0deg 0deg"
73
+ shadow-intensity=".9"
74
+ ar auto-rotate
75
+ camera-controls>
76
+ </model-viewer>
77
+ </div>
78
+ </div>
79
+ </body>
80
+
81
+ </html>
assets/modelviewer-textured-template.html ADDED
@@ -0,0 +1,136 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+
4
+ <head>
5
+ <!-- Import the component -->
6
+ <script src="https://cdn.jsdelivr.net/npm/@google/model-viewer@3.1.1/dist/model-viewer.min.js"
7
+ type="module"></script>
8
+ <style>
9
+ body {
10
+ margin: 0;
11
+ font-family: Arial, sans-serif;
12
+ }
13
+
14
+ .centered-container {
15
+ display: flex;
16
+ justify-content: center;
17
+ align-items: center;
18
+ }
19
+
20
+ .modelviewer-panel-button {
21
+ height: 30px;
22
+ margin: 4px 4px;
23
+ padding: 0px 14px;
24
+ background: white;
25
+ border-radius: 10px;
26
+ box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
27
+ font-size: 14px;
28
+ font-weight: 600;
29
+ display: flex;
30
+ align-items: center;
31
+ justify-content: center;
32
+ cursor: pointer;
33
+ transition: all 0.2s ease;
34
+ }
35
+
36
+ .modelviewer-panel-button.checked {
37
+ background: #6567C9;
38
+ color: white;
39
+ }
40
+
41
+ .modelviewer-panel-button:hover {
42
+ background-color: #e2e6ea;
43
+ }
44
+
45
+ .modelviewer-panel-button-container {
46
+ display: flex;
47
+ justify-content: space-around;
48
+ }
49
+
50
+ .centered-container {
51
+ display: flex;
52
+ flex-direction: column;
53
+ align-items: center;
54
+ }
55
+
56
+ </style>
57
+ </head>
58
+
59
+ <body>
60
+ <div class="centered-container">
61
+ <div class="centered-container">
62
+ <div class="column is-mobile is-centered">
63
+ <model-viewer id="modelviewer" style="height: #height#px; width: #width#px;"
64
+ rotation-per-second="10deg"
65
+ src="#src#" disable-tap
66
+ environment-image="neutral"
67
+ camera-target="0m 0m 0m"
68
+ camera-orbit="0deg 90deg 12m"
69
+ orientation="0deg 0deg 0deg"
70
+ shadow-intensity=".9"
71
+ ar auto-rotate
72
+ camera-controls>
73
+ </model-viewer>
74
+ </div>
75
+
76
+ <div class="modelviewer-panel-button-container">
77
+ <div id="appearance-button" class="modelviewer-panel-button small checked" onclick="showTexture()">
78
+ Appearance
79
+ </div>
80
+ <div id="geometry-button" class="modelviewer-panel-button small" onclick="hideTexture()">Geometry</div>
81
+ </div>
82
+ </div>
83
+ </div>
84
+
85
+ <script>
86
+ document.addEventListener('DOMContentLoaded', () => {
87
+ const modelViewers = document.querySelectorAll('model-viewer');
88
+
89
+ modelViewers.forEach(modelViewer => {
90
+ modelViewer.addEventListener('load', (event) => {
91
+ const [material] = modelViewer.model.materials;
92
+ material.pbrMetallicRoughness.setMetallicFactor(0.1);
93
+ material.pbrMetallicRoughness.setRoughnessFactor(0.5);
94
+ });
95
+ });
96
+ });
97
+
98
+ var window_state = {};
99
+
100
+ function hideTexture() {
101
+ let appearanceButton = document.getElementById('appearance-button');
102
+ let geometryButton = document.getElementById('geometry-button');
103
+ appearanceButton.classList.remove('checked');
104
+ geometryButton.classList.add('checked');
105
+ let modelViewer = document.getElementById('modelviewer');
106
+ if (modelViewer.model.materials[0].pbrMetallicRoughness.baseColorTexture.texture === null) return;
107
+ window_state.textures = [];
108
+ for (let i = 0; i < modelViewer.model.materials.length; i++) {
109
+ window_state.textures.push(modelViewer.model.materials[i].pbrMetallicRoughness.baseColorTexture.texture);
110
+ }
111
+ window_state.exposure = modelViewer.exposure;
112
+ modelViewer.environmentImage = '/static/env_maps/gradient.jpg';
113
+ for (let i = 0; i < modelViewer.model.materials.length; i++) {
114
+ modelViewer.model.materials[i].pbrMetallicRoughness.baseColorTexture.setTexture(null);
115
+ }
116
+ modelViewer.exposure = 4;
117
+ }
118
+
119
+ function showTexture() {
120
+ let appearanceButton = document.getElementById('appearance-button');
121
+ let geometryButton = document.getElementById('geometry-button');
122
+ appearanceButton.classList.add('checked');
123
+ geometryButton.classList.remove('checked');
124
+ let modelViewer = document.getElementById('modelviewer');
125
+ if (modelViewer.model.materials[0].pbrMetallicRoughness.baseColorTexture.texture !== null) return;
126
+ modelViewer.environmentImage = '/static/env_maps/white.jpg';
127
+ for (let i = 0; i < modelViewer.model.materials.length; i++) {
128
+ modelViewer.model.materials[i].pbrMetallicRoughness.baseColorTexture.setTexture(window_state.textures[i]);
129
+ }
130
+ modelViewer.exposure = window_state.exposure;
131
+ }
132
+
133
+ </script>
134
+ </body>
135
+
136
+ </html>