Интеграция 3D-просмотрщика на сайте: Three.js, Babylon.js, GLTF

Типичная ситуация: клиент предоставил GLB-модель дивана весом 50 МБ, а сайт на старом хостинге не тянет загрузку — посетители уходят через 5 секунд ожидания. Решение — встроить 3D-просмотрщик на Three.js или Babylon.js с оптимизацией: Draco-компрессия, LOD, правильное освещение. Мы реализовали такие проекты для десятков клиентов: от интерьерных конфигураторов до витрин ювелирных украшений. Наш опыт — более 5 лет веб-разработки и свыше 30 успешных интеграций 3D-просмотрщиков, что позволило клиентам сократить время загрузки до 2 секунд и увеличить конверсию на 15-20%. При этом Three.js загружается в 3 раза быстрее Babylon.js для простых сцен, но уступает в физике и XR. Экономия на хостинге при Draco-сжатии может достигать $500 в месяц для крупных проектов.

Проблемы, которые решаем

Типичные технические сложности при внедрении 3D-просмотрщиков:

• Большие файлы моделей: GLTF-модели мебели или автомобилей могут весить десятки мегабайт. Без Draco-компрессии и LOD пользователи ждут загрузку по 30 секунд, что критично для конверсии.
• Кросс-браузерность: WebGL стабилен в Chrome, Firefox, Edge, но на старых версиях Safari возможны артефакты. Нужна корректная проверка WebGLRenderingContext и fallback-сообщение.
• Производительность на мобильных: рендеринг сцены с высоким Pixel Ratio быстро сажает батарею. Ограничение devicePixelRatio до 2× и отключение теней на слабых GPU — обязательные меры.

Three.js vs Babylon.js: как выбрать?

Three.js — минималистичная библиотека рендеринга (~600 КБ), огромное сообщество, тысячи примеров. Требует больше ручной работы для сложных сцен (физика, collision detection).

Babylon.js — полноценный игровой движок в браузере (~2 МБ). Встроенная физика, PBR-материалы, Inspector, GUI, XR-поддержка. Хорош для сложных интерактивных сцен.

Для просмотра 3D-моделей — Three.js. Для интерактивных конфигураторов и сцен — Babylon.js. В 80% наших проектов используем Three.js из-за простоты интеграции и меньшего размера.

Three.js: просмотрщик GLTF-модели

npm install three @types/three 

import * as THREE from 'three' import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader' import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls' import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader' import { useEffect, useRef } from 'react' interface ModelViewerProps { modelUrl: string envMapUrl?: string } export function ModelViewer({ modelUrl, envMapUrl }: ModelViewerProps) { const mountRef = useRef<HTMLDivElement>(null) useEffect(() => { const container = mountRef.current! const width = container.clientWidth const height = container.clientHeight // Сцена const scene = new THREE.Scene() scene.background = new THREE.Color(0xf8fafc) // Камера const camera = new THREE.PerspectiveCamera(50, width / height, 0.01, 1000) camera.position.set(2, 1.5, 3) // Рендерер const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, }) renderer.setSize(width, height) renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)) renderer.toneMapping = THREE.ACESFilmicToneMapping renderer.toneMappingExposure = 1.2 renderer.outputColorSpace = THREE.SRGBColorSpace container.appendChild(renderer.domElement) // Освещение const ambientLight = new THREE.AmbientLight(0xffffff, 0.5) scene.add(ambientLight) const dirLight = new THREE.DirectionalLight(0xffffff, 2) dirLight.position.set(5, 10, 5) dirLight.castShadow = true dirLight.shadow.mapSize.set(2048, 2048) scene.add(dirLight) const fillLight = new THREE.DirectionalLight(0x8bb8e8, 0.5) fillLight.position.set(-5, 2, -5) scene.add(fillLight) // Orbit Controls const controls = new OrbitControls(camera, renderer.domElement) controls.enableDamping = true controls.dampingFactor = 0.08 controls.minDistance = 0.5 controls.maxDistance = 20 controls.autoRotate = true controls.autoRotateSpeed = 1.5 // GLTF загрузчик с Draco сжатием const dracoLoader = new DRACOLoader() dracoLoader.setDecoderPath('/draco/') // Копируем в public/draco/ const loader = new GLTFLoader() loader.setDRACOLoader(dracoLoader) let mixer: THREE.AnimationMixer | null = null loader.load( modelUrl, (gltf) => { const model = gltf.scene // Центрируем модель const box = new THREE.Box3().setFromObject(model) const center = box.getCenter(new THREE.Vector3()) const size = box.getSize(new THREE.Vector3()) const maxDim = Math.max(size.x, size.y, size.z) model.position.sub(center) camera.position.multiplyScalar(maxDim * 0.8) controls.update() scene.add(model) // Анимации if (gltf.animations.length > 0) { mixer = new THREE.AnimationMixer(model) gltf.animations.forEach((clip) => { mixer!.clipAction(clip).play() }) } }, (xhr) => { const progress = Math.round((xhr.loaded / xhr.total) * 100) console.log(`Loading: ${progress}%`) }, (error) => console.error('Error loading model:', error) ) // Анимационный цикл const clock = new THREE.Clock() let animFrameId: number function animate() { animFrameId = requestAnimationFrame(animate) const delta = clock.getDelta() mixer?.update(delta) controls.update() renderer.render(scene, camera) } animate() // Resize function handleResize() { const w = container.clientWidth const h = container.clientHeight camera.aspect = w / h camera.updateProjectionMatrix() renderer.setSize(w, h) } window.addEventListener('resize', handleResize) return () => { window.removeEventListener('resize', handleResize) cancelAnimationFrame(animFrameId) controls.dispose() renderer.dispose() container.removeChild(renderer.domElement) } }, [modelUrl]) return ( <div ref={mountRef} style={{ width: '100%', height: '500px' }} className="rounded-xl overflow-hidden cursor-grab active:cursor-grabbing" /> ) } 

Конфигуратор цвета материала

function changeModelColor(scene: THREE.Scene, meshName: string, color: string) { scene.traverse((object) => { if (object instanceof THREE.Mesh && object.name === meshName) { const material = object.material as THREE.MeshStandardMaterial material.color.set(color) } }) } // Использование в UI <div className="flex gap-2"> {['#ef4444', '#3b82f6', '#22c55e', '#f59e0b', '#8b5cf6'].map((color) => ( <button key={color} onClick={() => changeModelColor(sceneRef.current!, 'Body', color)} style={{ background: color }} className="w-8 h-8 rounded-full border-2 border-white shadow" /> ))} </div> 

Babylon.js: альтернатива для сложных сцен

npm install @babylonjs/core @babylonjs/loaders 

import { Engine, Scene, ArcRotateCamera, HemisphericLight, Vector3 } from '@babylonjs/core' import { SceneLoader } from '@babylonjs/core/Loading/sceneLoader' import '@babylonjs/loaders/glTF' function BabylonViewer({ modelUrl }: { modelUrl: string }) { const canvasRef = useRef<HTMLCanvasElement>(null) useEffect(() => { const engine = new Engine(canvasRef.current!, true, { preserveDrawingBuffer: true, stencil: true, }) const scene = new Scene(engine) const camera = new ArcRotateCamera('camera', -Math.PI / 2, Math.PI / 4, 5, Vector3.Zero(), scene) camera.attachControl(canvasRef.current!, true) camera.lowerRadiusLimit = 1 camera.upperRadiusLimit = 20 new HemisphericLight('light', new Vector3(0, 1, 0), scene) SceneLoader.ImportMeshAsync('', '', modelUrl, scene).then(({ meshes }) => { // Автоцентрирование camera.setTarget(meshes[0]) }) engine.runRenderLoop(() => scene.render()) const handleResize = () => engine.resize() window.addEventListener('resize', handleResize) return () => { window.removeEventListener('resize', handleResize) engine.dispose() } }, [modelUrl]) return <canvas ref={canvasRef} style={{ width: '100%', height: '500px' }} /> } 

Почему важна оптимизация производительности?

Пользователи не готовы ждать загрузку дольше 3 секунд. Вот ключевые методы:

• Draco-компрессия GLTF снижает размер геометрии на 60–90%. Это уменьшает время загрузки в 3-5 раз по сравнению с несжатым файлом.
• renderer.setPixelRatio(Math.min(devicePixelRatio, 2)) — не рендерим выше 2x, что экономит энергопотребление.
• LOD (Level of Detail) — более детальная модель вблизи, упрощённая вдали. На мобильных LOD даёт прирост FPS до 50%.
• Instanced Mesh для множества одинаковых объектов (деревья, кресла).
• Отключаем autoRotate во время взаимодействия пользователя.

Что такое Draco-компрессия?

Draco — библиотека от Google для сжатия 3D-геометрии. Она кодирует позиции вершин, нормали, текстурные координаты в компактный формат. На клиенте декодер восстанавливает оригинальные данные. Для GLTF достаточно подключить DRACOLoader и указать путь к декодеру. Сжатие без потерь, но для анимаций не применяется.

Что входит в работу?

1. Анализ модели — проверка геометрии, текстур, анимаций. Конвертация в GLTF с Draco.
2. Настройка сцены — освещение (окружение, направленный свет), тени, камера.
3. Интеграция — React-компонент с загрузчиком, контролами, адаптивностью.
4. Конфигуратор (опционально) — выбор цвета/материала, переключение моделей.
5. Оптимизация — тесты на мобильных устройствах, настройка LOD.
6. Документация — описание API компонента, инструкция по замене модели.

Сроки ориентировочно

• Простой просмотрщик с загрузкой GLTF и orbit controls — 2–3 дня.
• Конфигуратор с выбором цвета/материала и несколькими моделями — 5–7 дней.

Стоимость рассчитывается индивидуально в зависимости от сложности сцены и количества интерактивных элементов. Стоимость базового просмотрщика начинается от $1000, сложные конфигураторы — от $3000. Экономия на трафике может составлять до 30%. При больших объёмах возможна экономия бюджета — обсудим на консультации.

Как мы гарантируем качество?

Мы тестируем просмотрщик на трёх последних версиях Chrome, Firefox, Safari и Edge. Для мобильных устройств проверяем iPhone (Safari) и Android (Chrome). Предоставляем гарантию на работоспособность в течение 30 дней после сдачи. Наш опыт — более 5 лет в WebGL-разработке, более 30 успешных проектов.

Свяжитесь с нами для оценки вашего проекта. Закажите консультацию — обсудим требования и подготовим коммерческое предложение под ключ.