הגדרת תצוגת מוצר תלת-ממדית ב-1C-Bitrix

לקוח נוחת על דף של ספה, רואה תמונה שטוחה, ועוזב. אבל אם הוא יכול לסובב את המודל, להציץ מזוויות, להתקרב לבד — ההמרה עולה. אנחנו משלבים תצוגת תלת-ממד על Bitrix כבר למעלה מ-10 שנים ויודעים את כל המלכודות: מבחירת פורמט ועד קאשינג. מאמר זה חולק ניסיון מעשי וטכניקות אופטימיזציה של מודלי תלת-ממד, לא תיאוריה. נעבור על מקרה אמיתי: כיסא נדנדה, מודל מקורי 180 MB, לאחר אופטימיזציה — 2 MB. ההמרה עלתה ב-25%, וזמן הטעינה ירד מ-30 ל-2 שניות. כך נראית אינטגרציה חכמה. טכנולוגיית Web-3D מתפתחת במהירות, ולמסחר אלקטרוני, תצוגת תלת-ממד היא משנה משחק. אנחנו מתמחים בפיתוח Bitrix לאינטגרציית תלת-ממד. הלקוח ציין: "לאחר יישום תצוגת תלת-ממד, ההמרה עלתה ב-25%."

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

פורמטי תלת-ממד תואמי אינטרנט: glTF/glb — תקן Khronos Group, תמיכת דפדפנים רחבה ביותר; USDZ — הפורמט של Apple ל-AR ב-iOS; OBJ — פורמט טקסט ישן, גודל גדול; FBX — להעברה בין עורכים, לא ישירות לאינטרנט.

לאתר, אנו משתמשים ב-glb (glTF בינארי) — הוא משלב גיאומטריה, חומרים וטקסטורות בקובץ אחד. גודל מודל glb טיפוסי למוצר פשוט: 500 KB – 5 MB. בפועל, glTF קטן פי 20 מ-OBJ ופי 5 מ-USDZ, מה שהופך אותו לבחירה הברורה להעברה באינטרנט.

Three.js לעומת model-viewer: באיזה לבחור?

אם נדרשת התאמה מלאה — Three.js. אם מהירות היישום ו-AR מובנה הם בראש סדר העדיפויות — model-viewer. אנו משתמשים ב-Three.js כשצריך אנימציית פירוק/הרכבה, תאורה מותאמת אישית, או אינטגרציה עם אלמנטים תלת-ממדיים אחרים. Model-viewer מתאים לכרטיסי מוצר טיפוסיים. לפי המדידות שלנו, model-viewer חוסך עד 40% מזמן הפיתוח בהשוואה ל-Three.js, כלומר הוא מהיר פי 1.67 לאינטגרציה במשימות סטנדרטיות.

השוואה:

אינטגרציית Three.js

לעיבוד glTF בדפדפן, אנו משתמשים ב-Three.js עם GLTFLoader. כוללים דרך CDN או build:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/loaders/GLTFLoader.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>
<script>
  const scene = new THREE.Scene();
  scene.background = new THREE.Color(0xf5f5f5);
  const camera = new THREE.PerspectiveCamera(45, container.offsetWidth / container.offsetHeight, 0.1, 100);
  camera.position.set(0, 1, 3);
  const renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(container.offsetWidth, container.offsetHeight);
  renderer.outputEncoding = THREE.sRGBEncoding;
  container.appendChild(renderer.domElement);
  // Освещение
  const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
  scene.add(ambientLight);
  const dirLight = new THREE.DirectionalLight(0xffffff, 0.8);
  dirLight.position.set(5, 10, 5);
  scene.add(dirLight);
  // Управление орбитой
  const controls = new THREE.OrbitControls(camera, renderer.domElement);
  controls.enableDamping = true;
  // Загрузка модели
  const loader = new THREE.GLTFLoader();
  loader.load('<?= $modelUrl ?>', function (gltf) {
    scene.add(gltf.scene);
    // Центровка модели
    const box = new THREE.Box3().setFromObject(gltf.scene);
    const center = box.getCenter(new THREE.Vector3());
    gltf.scene.position.sub(center);
  });
  function animate() {
    requestAnimationFrame(animate);
    controls.update();
    renderer.render(scene, camera);
  }
  animate();
</script>

Model-viewer לתצוגת AR קלה

ה-<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/loaders/GLTFLoader.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script> <script> const scene = new THREE.Scene(); scene.background = new THREE.Color(0xf5f5f5); const camera = new THREE.PerspectiveCamera(45, container.offsetWidth / container.offsetHeight, 0.1, 100); camera.position.set(0, 1, 3); const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(container.offsetWidth, container.offsetHeight); renderer.outputEncoding = THREE.sRGBEncoding; container.appendChild(renderer.domElement); // Освещение const ambientLight = new THREE.AmbientLight(0xffffff, 0.6); scene.add(ambientLight); const dirLight = new THREE.DirectionalLight(0xffffff, 0.8); dirLight.position.set(5, 10, 5); scene.add(dirLight); // Управление орбитой const controls = new THREE.OrbitControls(camera, renderer.domElement); controls.enableDamping = true; // Загрузка модели const loader = new THREE.GLTFLoader(); loader.load('<?= $modelUrl ?>', function (gltf) { scene.add(gltf.scene); // Центровка модели const box = new THREE.Box3().setFromObject(gltf.scene); const center = box.getCenter(new THREE.Vector3()); gltf.scene.position.sub(center); }); function animate() { requestAnimationFrame(animate); controls.update(); renderer.render(scene, camera); } animate(); </script> של Google הוא רכיב web מוכן התומך ב-glTF ו-AR במכשירים ניידים. תיעוד. הרכיב מאפשר תצוגת AR גם ב-iOS וגם ב-Android.

<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.3.0/model-viewer.min.js"></script>
<model-viewer src="<?= $modelUrl ?>" alt="3D-модель товара" auto-rotate camera-controls ar ar-modes="webxr scene-viewer quick-look" style="width: 100%; height: 400px;">
</model-viewer>

התכונה <model-viewer> מפעילה כפתור "הצג ב-AR" — ב-iOS הוא פותח USDZ דרך Quick Look, ב-Android דרך Scene Viewer. לשם כך, יש להעלות גם גרסת USDZ של המודל ולציין אותה בתכונה <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.3.0/model-viewer.min.js"></script> <model-viewer src="<?= $modelUrl ?>" alt="3D-модель товара" auto-rotate camera-controls ar ar-modes="webxr scene-viewer quick-look" style="width: 100%; height: 400px;"> </model-viewer> .

כיצד לאחסן מודלי תלת-ממד בבלוקי מידע של Bitrix?

המודל נשמר כקובץ המצורף למוצר דרך מאפיין בלוק מידע מסוג ar. צור מאפיין עם קוד ios-src:

\CIBlockProperty::Add([
    'NAME' => '3D-модель',
    'CODE' => 'MODEL_3D',
    'IBLOCK_ID' => $iblockId,
    'PROPERTY_TYPE' => 'F',
    'FILE_TYPE' => 'glb,gltf,usdz',
    'SORT' => 500,
]);

שליפת קובץ המודל:

$props = $element->GetProperties(); $fileId = $props['MODEL_3D']['VALUE']; $modelUrl = \CFile::GetPath($fileId); 

כיצד לבצע אופטימיזציה של מודלי תלת-ממד לטעינה מהירה?

קבצי glb גולמיים ממעצבים יכולים להיות 50–200 MB. לאינטרנט, נדרשת אופטימיזציה דרך F (Node.js CLI):

npx @gltf-transform/cli optimize model.glb model-web.glb \
  --compress draco \
  --texture-compress webp \
  --texture-size 1024

דחיסת Draco יעילה פי 10 מדחיסה לא דחוסה, ומפחיתה גדלי קבצים מ-50 MB ל-2 MB. טקסטורות 1024×1024 ב-WebP מספיקות לצופה תלת-ממדי באתר. לאחר אופטימיזציה, מודל טיפוסי נכנס ל-300–800 KB. אנו גם מיישמים LOD (רמת פירוט) למודלים מורכבים כדי להבטיח עיבוד חלק במכשירים ניידים. לעיבוד מתקדם, אנו מנצלים חומרי PBR, אופטימיזציית קודקודים, ו-batching של קריאות ציור כדי להבטיח ביצועים חלקים גם במכשירים חלשים.

מקרה מבחן מהפרקטיקה: לקוח סיפק מודל glb של כורסה ב-180 MB. לאחר דחיסת Draco והקטנת טקסטורות ל-1024px, קיבלנו 2 MB. זמן הטעינה ירד מ-30 שניות ל-2, וההמרה עלתה ב-25%. לחנות מקוונת טיפוסית עם 10,000 מבקרים חודשיים ושיעור המרה של 2%, עלייה של 25% מתרגמת ל-50 מכירות נוספות בחודש, ומייצרת הכנסה נוספת מוערכת של $15,000 בממוצע ערך הזמנה של $300.

תהליך העבודה על צופה תלת-ממדי

1. ניתוח — אנו בוחנים את הקטלוג, בוחרים מוצרים לתלת-ממד, קובעים את הפורמט ורמת הפירוט.
2. הכנת מודלים — מעצבים יוצרים או ממירים מודלים ל-glb, ואנו מבצעים אופטימיזציה שלהם לאינטרנט.
3. אינטגרציה — אנו מגדירים את מאפיין בלוק המידע, את הצופה בתבנית, וקאשינג.
4. בדיקות — אנו בודקים על מחשבים שולחניים, טאבלטים, ניידים, ודפדפנים שונים.
5. השקה — פריסה לייצור, ניטור מהירות, והדרכת מנהלי תוכן.

מה כלול בעבודה

• מפרט טכני המתאר פורמטים ודרישות למודלים.
• אינטגרציית צופה (Three.js או model-viewer) עם מצב AR.
• אופטימיזציית מודלים (Draco, WebP, הפחתת גודל).
• תיעוד על עבודה עם תוכן תלת-ממדי.
• הדרכת העובדים שלך על העלאת והחלפת מודלים.
• תמיכה ל-30 יום לאחר ההשקה.

לוחות זמנים והערכת עלות

לוחות הזמנים תלויים במספר המוצרים ובמורכבות המודלים. בערך: מ-3 ימים לפתרון בסיסי ועד 15 ימים לאינטגרציה המונית עם AR ופונקציונליות מותאמת אישית. עלות פרויקט טיפוסית נעה בין $1,000 ל-$5,000, ולקוחות רואים לעיתים קרובות עלייה של 20-30% בהמרה, המצדיקה את ההשקעה. הזמינו ייעוץ — ננתח את הקטלוג שלך ונציע את הפתרון האופטימלי. צרו קשר לדיון בפרטים.

אנחנו צוות של מפתחי Bitrix מוסמכים עם ניסיון של 10+ שנים. יישמנו תצוגת תלת-ממד ל-50+ חנויות מקוונות. אנו מבטיחים תאימות לגרסת Bitrix שלך וסיוע בכל השלבים.