צופה מוצר תלת-ממדי אינטראקטיבי למסחר אלקטרוני

הלקוח רואה תמונת מוצר אך אינו יכול לסובב אותה, להתקרב או להעריך את המרקם. התוצאה היא החזרות עקב ציפיות שלא מומשו ואובדן מכירות. צפייה בתלת-ממד פותרת בעיה זו: המשתמש חוקר את האובייקט באופן עצמאי על ידי סיבוב, שינוי קנה מידה והפעלת מציאות רבודה. מחקרים מראים: המרות בכרטיסי מוצר עם תלת-ממד גבוהות בעד 40% מאשר בלעדיו (לפי נתוני Shopify לריהוט — עד 65%).

הניסיון שלנו בנישות ריהוט, תכשיטים, נעליים ואלקטרוניקה מאשר סטטיסטיקה זו. סיפקנו למעלה מ-15 פרויקטים, שכל אחד מהם דרש גישה אישית למודלים, תאורה ואינטגרציה. ניתן להפחית את עלויות הפקת התוכן בעד 70% באמצעות פוטוגרמטריה, והחזר ההשקעה מיישום צפייה בתלת-ממד יכול לעלות על 300%. צרו קשר כדי לדון באסטרטגיית תלת-ממד לקטלוג שלכם.

אילו פורמטים של מודלים תלת-ממדיים הם הטובים ביותר לאינטרנט?

GLB הוא התקן דה-פקטו לתלת-ממד באינטרנט מפרט glTF 2.0. הכל ארוז בקובץ אחד: גיאומטריה, חומרים, טקסטורות, אנימציות. הוא תומך בחומרי PBR (זרימת עבודה של מתכתיות/חספוס), ומספק עיבוד נכון פיזית.

Three.js — ערימה בסיסית

ווידג'ט תלת-ממדי מינימלי באמצעות Three.js:

import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, container.width / container.height, 0.1, 100);
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.outputColorSpace = THREE.SRGBColorSpace;

// OrbitControls — вращение, зум, пан мышью/тачем
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;
controls.minDistance = 1;
controls.maxDistance = 10;

// DRACO-декомпрессия для сжатых моделей
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('/draco/');
const loader = new GLTFLoader();
loader.setDRACOLoader(dracoLoader);
loader.load('/models/product.glb', gltf => {
    scene.add(gltf.scene);
    fitCameraToObject(camera, controls, gltf.scene);
});

// HDR-окружение для PBR-освещения
new RGBELoader().load('/env/studio.hdr', texture => {
    texture.mapping = THREE.EquirectangularReflectionMapping;
    scene.environment = texture;
});

מה נותן דחיסת Draco?

Draco הוא אלגוריתם דחיסת גיאומטריה תלת-ממדית מגוגל. דחיסה טיפוסית: הגיאומטריה קטנה פי 5–10 ללא אובדן איכות נראה לעין. מודל כיסא של 8MB הופך ל-800KB לאחר Draco.

המרה בצנרת (לא מקוונת, כאשר מנהל מעלה מודל):

# gltf-pipeline от Khronos
npx gltf-pipeline -i input.glb -o output.glb --draco.compressionLevel 7
# или через blender CLI
blender --background --python export_with_draco.py

מפענח ה-Draco בדפדפן הוא מודול WASM (~200KB). יש למקם אותו בשרת ולציין את הנתיב ב-import * as THREE from 'three'; import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'; import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js'; const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(45, container.width / container.height, 0.1, 100); const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.outputColorSpace = THREE.SRGBColorSpace; // OrbitControls — вращение, зум, пан мышью/тачем const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.dampingFactor = 0.05; controls.minDistance = 1; controls.maxDistance = 10; // DRACO-декомпрессия для сжатых моделей const dracoLoader = new DRACOLoader(); dracoLoader.setDecoderPath('/draco/'); const loader = new GLTFLoader(); loader.setDRACOLoader(dracoLoader); loader.load('/models/product.glb', gltf => { scene.add(gltf.scene); fitCameraToObject(camera, controls, gltf.scene); }); // HDR-окружение для PBR-освещения new RGBELoader().load('/env/studio.hdr', texture => { texture.mapping = THREE.EquirectangularReflectionMapping; scene.environment = texture; }); .

# gltf-pipeline от Khronos npx gltf-pipeline -i input.glb -o output.glb --draco.compressionLevel 7 # или через blender CLI blender --background --python export_with_draco.py כרכיב מוכן

אם אין צורך בהתאמה אישית עמוקה, DRACOLoader.setDecoderPath() של גוגל מכסה 90% ממקרי השימוש. פרויקט הקוד הפתוח model-viewer מתוחזק באופן פעיל.

<model-viewer src="/models/chair.glb" ios-src="/models/chair.usdz" alt="Офисное кресло Herman Miller" camera-controls auto-rotate auto-rotate-delay="3000" rotation-per-second="30deg" shadow-intensity="1" exposure="0.8" environment-image="/env/neutral.hdr" ar ar-modes="webxr scene-viewer quick-look" loading="lazy" style="width: 100%; aspect-ratio: 1; background: #f5f5f5;">
  <div slot="progress-bar">
    <div class="progress-bar" style="..."></div>
  </div>
  <button slot="ar-button" class="ar-button"> Посмотреть в вашем интерьере </button>
</model-viewer>

מובנה: OrbitControls, תמיכת מגע, AR (WebXR + Quick Look), צל, טעינה עצלה, מחוון התקדמות.

תאורה וחומרי PBR

איכות העיבוד בדפדפן נקבעת על ידי תאורה. ללא סביבה מתאימה, אפילו מודל טוב נראה שטוח.

מפת סביבת HDR היא פנורמת HDR כדורית של תאורת אולפן או ניטרלית. היא יוצרת השתקפויות נכונות על משטחים מתכתיים ומבריקים. גודל: 2MB–8MB, נטענת פעם אחת ונשמרת במטמון.

למוצרים: HDRI אולפן ניטרלי (רקע אפור, אור אחיד) — <model-viewer> ממאגר model-viewer. לתכשיטים, HDRI עם הדגשות בולטות.

חומרים מונפשים: מעבר בין וריאנטים (צבע, חומר) — שינוי <model-viewer>, <model-viewer src="/models/chair.glb" ios-src="/models/chair.usdz" alt="Офисное кресло Herman Miller" camera-controls auto-rotate auto-rotate-delay="3000" rotation-per-second="30deg" shadow-intensity="1" exposure="0.8" environment-image="/env/neutral.hdr" ar ar-modes="webxr scene-viewer quick-look" loading="lazy" style="width: 100%; aspect-ratio: 1; background: #f5f5f5;" > <div slot="progress-bar"> <div class="progress-bar" style="..."></div> </div> <button slot="ar-button" class="ar-button"> Посмотреть в вашем интерьере </button> </model-viewer> , neutral.hdr. ללא טעינה מחדש של המודל:

const materials = model.querySelector('model-viewer').model.materials;
const chairMaterial = materials.find(m => m.name === 'Fabric');
chairMaterial.pbrMetallicRoughness.setBaseColorFactor([0.8, 0.2, 0.2, 1]); // красный

כיצד לייעל ביצועים?

גודל מודל: גודל GLB יעד לכרטיס מוצר הוא עד 2MB. גדול יותר — המשתמש ממתין, ההמרות יורדות. שיטות אופטימיזציה:

• דחיסת Draco לגיאומטריה (פי 5–10)
• דחיסת טקסטורות KTX2 / Basis Universal (פי 3–5, עם פענוח GPU)
• רטופולוגיה: הסרת פנים נסתרות, פישוט חלקים בלתי נראים
• אפיית פרטים ברזולוציה גבוהה למפת נורמלים על מודל ברזולוציה נמוכה

טעינה עצלה: Three.js/WebGL מאותחל רק כאשר הווידג'ט נכנס לאזור התצוגה באמצעות IntersectionObserver. כאשר הווידג'ט מחוץ למסך, העיבוד מושהה.

יחס פיקסלים: במובייל, הגבל את material.color ל-1.5 מקסימום — חוסך GPU במסכי Retina. השתמש ב-material.roughness עם טעינה עצלה מובנית אם אין צורך בלוגיקה מותאמת אישית.

הערות ונקודות חמות

הערות הן נקודות על המודל התלת-ממדי עם הסברים. המשתמש מרחף/לוחץ — מופיע טולטיפ עם מידע על הפרט.

ב-material.metalnessMap, הערות משתמשות בחריצים:

<model-viewer src="headphones.glb" camera-controls>
  <button slot="hotspot-ear-cup" data-position="-0.3 0.1 0.2" data-normal="-1 0 0" data-visibility-attribute="visible">
    <div class="hotspot-label">
      <strong>Амбушюры</strong> Память-пена с эффектом памяти, 40мм
    </div>
  </button>
</model-viewer>

קואורדינטות const materials = model.querySelector('model-viewer').model.materials; const chairMaterial = materials.find(m => m.name === 'Fabric'); chairMaterial.pbrMetallicRoughness.setBaseColorFactor([0.8, 0.2, 0.2, 1]); // красный — קואורדינטות עולם במערכת הקואורדינטות של המודל. נקבעות ב-Blender או באמצעות בחירה מובנית ב-Three.js.

צנרת הכנת תוכן

פיתוח הווידג'ט והכנת המודל הם משימות מקבילות. צנרת טיפוסית:

1. מודלים תלת-ממדיים (Blender, Cinema 4D) או פוטוגרמטריה (RealityCapture, Meshroom)
2. אופטימיזציה (Blender: רטופולוגיה, LOD), דחיסת Draco
3. טקסטורינג PBR (Substance Painter) + המרת טקסטורות ל-KTX2
4. בקרת איכות בדפדפן: בדיקה ב-model-viewer, בדיקה במובייל
5. המרה ל-USDZ ל-AR ב-iOS (Reality Converter, ממירים מקוונים)
6. העלאה ל-CDN עם כותרות נכונות (devicePixelRatio)

לוח זמנים לפיתוח

הכנת מודלים תלת-ממדיים (אם לא זמינים): מ-4 שעות עד יומיים לכל SKU. לקטלוגים גדולים, פוטוגרמטריה מפחיתה את עלויות הפקת התוכן פי 5–10 בהשוואה למודלים ידניים.

מה כלול בחבילת העבודה שלנו

• ניתוח מודלים קיימים והמלצות לאופטימיזציה
• בחירה והגדרת סביבה (HDR, תאורה)
• אינטגרציית ווידג'ט לתוך ה-CMS או הפרונטאנד שלכם
• הגדרת טעינה עצלה ומטמון
• תיעוד לניהול מודלים
• הדרכת מנהלים בהעלאה והחלפת מודלים
• תמיכת אחריות לחודש אחד לאחר המסירה

הזמינו פיתוח מציג תלת-ממד — כתבו לנו כדי להעריך את הפרויקט שלכם. קבלו ייעוץ לקטלוג שלכם. נציע את הפתרון האופטימלי לתקציב ולמגוון המוצרים שלכם.