add: preview

2026-06-08 00:01:40 +03:00
parent 46ddb283b2
commit d36f8355f5
2 changed files with 91 additions and 0 deletions
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <script type="importmap">
+    {
+      "imports": {
+        "three": "https://unpkg.com/three@0.160.0/build/three.module.js"
+      }
+    }
+  </script>
+  <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.4.0/model-viewer.min.js"></script>
+
+  <style>
+    body { 
+      margin: 0; 
+      padding: 0; 
+      overflow: hidden;
+    }
+    model-viewer {
+      width: 100vw;
+      height: 100vh;
+      background-color: #111111; 
+    }
+  </style>
+</head>
+<body>
+  <model-viewer 
+    id="model-viewer"
+    src="model.glb" 
+    alt=""
+    camera-controls
+    autoplay
+    loop
+    environment-image="neutral"
+    shadow-intensity="0"
+    animation-name="走り"
+  >
+  </model-viewer>
+
+  <script type="module">
+    import * as THREE from 'three';
+    const viewer = document.querySelector('#model-viewer');
+    viewer.addEventListener('load', () => {
+        const model = viewer.model;
+        const symbols = Object.getOwnPropertySymbols(model);
+
+        const materialsSymbol = symbols.find(sym => sym.toString() === 'Symbol(materials)');
+        
+        if (materialsSymbol && model[materialsSymbol]) {
+          const materials = model[materialsSymbol];
+          let updatedCount = 0;
+
+          materials.forEach(matWrapper => {
+            const correlatedSymbol = Object.getOwnPropertySymbols(matWrapper)
+              .find(sym => sym.toString() === 'Symbol(correlatedObjects)');
+
+            if (correlatedSymbol && matWrapper[correlatedSymbol]) {
+              const threeObjects = matWrapper[correlatedSymbol];
+
+              threeObjects.forEach(obj => {
+                if (obj.isMaterial) {
+                  obj.side = THREE.DoubleSide;
+                  if (obj.isMeshStandardMaterial || obj.isMeshPhysicalMaterial) {
+                    if (obj.map) {
+                      obj.emissiveMap = obj.map;
+                      obj.emissive = new THREE.Color(0xffffff);
+                      obj.emissiveIntensity = 1.0;
+                    } else {
+                      obj.emissive = obj.color.clone();
+                      obj.emissiveIntensity = 1.0;
+                    }
+
+                    obj.color.setHex(0x000000);
+                    obj.metalness = 0;
+                    obj.roughness = 1;
+                  }
+
+                  obj.needsUpdate = true;
+                  updatedCount++;
+                }
+              });
+            }
+          });
+        }
+    });
+  </script>
+</body>
+</html>