Skip to content

Commit 0105277

Browse files
kwokcbkwokcb
authored
Add PolyHaven zip preview (#30)
1 parent 5397856 commit 0105277

3 files changed

Lines changed: 167 additions & 38 deletions

File tree

‎javascript/JsPolyHaven/index.html‎

Lines changed: 55 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8">
56
<meta name="viewport" content="width=device-width, initial-scale=1.0">
67
<title>Poly Haven MaterialX Materials</title>
7-
<link rel="icon" type="image/png" href="https://raw.githubusercontent.com/kwokcb/materialxMaterials/refs/heads/main/documents/images/download.png">
8+
<link rel="icon" type="image/png"
9+
href="https://raw.githubusercontent.com/kwokcb/materialxMaterials/refs/heads/main/documents/images/download.png">
810
<!-- Bootstrap 5.3.2 CSS -->
911
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
1012
<!-- Bootstrap Icons -->
@@ -15,25 +17,31 @@
1517
cursor: pointer;
1618
height: 100%;
1719
}
20+
1821
.material-card:hover {
1922
transform: scale(1.03);
2023
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
2124
}
25+
2226
.material-img {
2327
height: 180px;
2428
object-fit: cover;
2529
}
30+
2631
.loading-spinner {
2732
display: none;
2833
}
34+
2935
.category-badge {
3036
margin-right: 5px;
3137
margin-bottom: 5px;
3238
}
39+
3340
#materialPreview {
3441
max-height: 400px;
3542
object-fit: contain;
3643
}
44+
3745
.map-badge {
3846
font-size: 0.8rem;
3947
}
@@ -44,20 +52,28 @@
4452
}
4553

4654
@keyframes spin {
47-
from { transform: rotate(0deg); }
48-
to { transform: rotate(360deg); }
55+
from {
56+
transform: rotate(0deg);
57+
}
58+
59+
to {
60+
transform: rotate(360deg);
61+
}
4962
}
5063
</style>
5164
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
5265
<!-- Code mirror -->
5366
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.css">
5467
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/theme/material.min.css">
5568
</head>
69+
5670
<body>
5771
<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
5872
<div class="container-fluid">
5973
<a class="navbar-brand d-flex align-items-center" href="#">
60-
<img class="px-1" src="https://raw.githubusercontent.com/kwokcb/materialxMaterials/refs/heads/main/documents/images/download.png" width="48px" alt="MaterialX Materials Icon">
74+
<img class="px-1"
75+
src="https://raw.githubusercontent.com/kwokcb/materialxMaterials/refs/heads/main/documents/images/download.png"
76+
width="48px" alt="MaterialX Materials Icon">
6177
<span class="ms-2">Poly Haven MaterialX Materials</span>
6278
</a>
6379
<!-- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
@@ -75,17 +91,17 @@
7591
<div class="container-fluid py-4">
7692
<div class="row mb-4">
7793
<div class="col-12">
78-
79-
<div class="row g-3 align-items-center mb-3">
94+
95+
<div class="row g-3 align-items-center mb-2">
8096
<div class="col-md-6">
8197
<div class="input-group">
8298
<span class="input-group-text"><i class="bi bi-search"></i></span>
8399
<input type="text" id="searchInput" class="form-control" placeholder="Search materials...">
84-
<button class="btn btn-primary" id="searchButton">Search</button>
100+
<button class="btn btn-sm btn-primary" id="searchButton">Search</button>
85101
</div>
86102
</div>
87103
<div class="col-md-3">
88-
<select class="form-select" id="categoryFilter">
104+
<select class="form-select form-select-sm" id="categoryFilter">
89105
<option value="">All Categories</option>
90106
</select>
91107
</div>
@@ -98,20 +114,20 @@
98114
</select>
99115
</div>
100116
</div>
101-
117+
102118
<div class="d-flex justify-content-center">
103119
<div class="spinner-border loading-spinner text-primary" role="status" id="mainSpinner">
104120
<span class="visually-hidden">Loading...</span>
105121
</div>
106122
</div>
107123
</div>
108124
</div>
109-
125+
110126
<div class="row" id="materialsContainer">
111127
<!-- Materials will be loaded here -->
112128
</div>
113129
</div>
114-
130+
115131
<!-- Material Preview Modal -->
116132
<div class="modal fade" id="materialModal" tabindex="-1" aria-labelledby="materialModalLabel" aria-hidden="true">
117133
<div class="modal-dialog modal-lg">
@@ -120,54 +136,66 @@
120136
<h5 class="modal-title" id="materialModalLabel">Material Details</h5>
121137
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
122138
</div>
123-
<div class="modal-body">
139+
<div class="modal-body" style="font-size: 11px">
124140
<div class="row">
125-
<div class="col-md-6">
126-
<img src="" alt="Material Preview" class="img-fluid rounded mb-3" id="materialPreview">
127-
<div id="materialTags" class="mb-3"></div>
128-
<div id="materialCategories" class="mb-3"></div>
141+
<div class="col-md">
142+
<img src="" alt="Material Preview" class="img-fluid rounded mb-2" id="materialPreview">
143+
<div id="materialTags" class="mb-2"></div>
144+
<div id="materialCategories" class="mb-2"></div>
129145
</div>
130-
<div class="col-md-6">
131-
<h4 id="materialTitle"></h4>
146+
<div class="col-md-7">
132147
<p id="materialDescription"></p>
133-
<div class="mb-3">
148+
<div class="mb-2">
134149
<label for="materialResolution" class="form-label">Image Resolution</label>
135-
<select class="form-select" id="materialResolution">
150+
<select class="form-select form-select-sm" id="materialResolution" >
136151
<option value="1k" selected>1K</option>
137152
<option value="2k">2K </option>
138153
<option value="4k">4K</option>
139154
<option value="8k">8K</option>
140155
</select>
141156
</div>
142-
<div class="mb-3">
157+
<div class="mb-2">
143158
<label class="form-label" style="display: none;">Maps Available</label>
144159
<div id="materialMaps" class="d-flex flex-wrap gap-2"></div>
145160
</div>
146-
<div class="d-grid gap-2">
147-
<button class="btn btn-primary" id="downloadMaterial">
161+
<div class="d-grid gap-1">
162+
<button style="font-size: 11px;" class="btn btn-sm btn-primary" id="downloadMaterial">
148163
<i class="bi bi-download me-2"></i>Download Material
149164
</button>
150-
<button class="btn btn-outline-secondary" id="copyMaterialLink">
165+
<button style="font-size: 11px;" class="btn btn-sm btn-primary" id="copyMaterialLink">
151166
<i class="bi bi-link me-2"></i>Copy Material Link
152167
</button>
168+
<button style="font-size: 11px;" class="btn btn-sm btn-primary" id="previewMaterial">
169+
<i class="bi bi-eye me-2"></i>Preview
170+
</button>
171+
<div class="row-sm p-0 m-0 g-0">
172+
<!-- Viewer -->
173+
<div class="col-sm p-0 m-0 g-0">
174+
<iframe id="viewer" src="" class="p-0"
175+
style="width: 100%; height: 480px; overflow: auto; border: none; display:none;"
176+
frameborder="0" allowfullscreen>
177+
</iframe>
178+
</div>
179+
</div>
153180
</div>
154181
</div>
155-
<div id="contentPreview" class="mt-3"></div>
182+
<div id="contentPreview" class="mt-1"></div>
156183
<!-- <textarea id="mtlxEditor" style="display:none;"></textarea> -->
157184
</div>
158185
</div>
159186
<div class="modal-footer">
160-
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
187+
<button type="button" style="font-size: 11px" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Close</button>
161188
</div>
162189
</div>
163190
</div>
164191
</div>
165-
192+
166193
<!-- Bootstrap and loader -->
167194
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
168195
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.js"></script>
169196
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/xml/xml.min.js"></script>
170197
<script src="jsPolyHavenLoader.js"></script>
171198
<script src="main.js"></script>
172199
</body>
200+
173201
</html>

‎javascript/JsPolyHaven/jsPolyHavenLoader.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -187,6 +187,7 @@ class JsPolyHavenAPILoader {
187187
// 1. Download and add the main MaterialX file
188188
const mtlxContent = await this.downloadMaterialXContent(mtlxData.url);
189189
zip.file(`${material.id}.mtlx`, mtlxContent);
190+
console.log(`Added MaterialX file to ZIP: ${material.id}.mtlx, ${mtlxContent}`);
190191

191192
// 2. Download and add all included texture files
192193
const textureFiles = mtlxData.include || {};
@@ -209,6 +210,9 @@ class JsPolyHavenAPILoader {
209210
if (path.toLowerCase().endsWith('.exr')) {
210211
console.warn(`EXR file present which may not be supported by MaterialX texture loader: ${path}`);
211212
}
213+
else {
214+
console.log(`Added texture to ZIP: ${path}`);
215+
}
212216
} catch (error) {
213217
console.error(`Error downloading texture ${path}:`, error);
214218
// Add placeholder file if download fails

0 commit comments

Comments
 (0)
⚡