A customer lands on a sofa page, sees a flat photo, and leaves. But if they could rotate the model, peek under angles, zoom into fabric — conversion rises. We have been integrating 3D product viewing on Bitrix for over 10 years and know all the pitfalls: from format choice to caching. This article shares practical experience and 3D model optimization techniques, not theory. We'll walk through a real case: a rocking chair, original model 180 MB, after optimization — 2 MB. Conversion increased by 25%, and load time dropped from 30 to 2 seconds. That's what a smart integration looks like. Web-3D technology is rapidly evolving, and for ecommerce, 3D viewing is a game-changer. We specialize in Bitrix development for 3D integration. The client noted: "After implementing 3D viewing, conversion increased by 25%."
What is the best 3D format for the web?
Web-compatible 3D formats: glTF/glb — Khronos Group standard, best browser support; USDZ — Apple's format for AR on iOS; OBJ — old text format, large size; FBX — for editor transfer, not directly for web.
For a site, we use glb (binary glTF) — it combines geometry, materials, and textures in one file. Typical glb model size for a simple product: 500 KB – 5 MB. In practice, glTF is 20 times smaller than OBJ and 5 times smaller than USDZ, making it the clear choice for web delivery.
| Format | Typical Model Size | Compression | Browser Support | AR |
|---|---|---|---|---|
| glTF/glb | 500KB–5MB | Draco, meshopt | All modern | Via model-viewer |
| USDZ | 2–10MB | None | Safari/iOS only | On iOS |
| OBJ | 10–100MB | None | Limited | No |
| FBX | 20–200MB | None | No | No |
Three.js vs model-viewer: which one to choose?
If full customization is needed — Three.js. If speed of implementation and built-in AR are priorities — model-viewer. We use Three.js when we need disassembly/assembly animation, custom lighting, or integration with other 3D elements. Model-viewer is suitable for typical product cards. Based on our measurements, model-viewer saves up to 40% of development time compared to Three.js, meaning it is 1.67 times faster to integrate for standard tasks.
Compare:
| Parameter | Three.js | model-viewer |
|---|---|---|
| Control | Full | Limited by settings |
| AR | Requires WebXR | Built-in (iOS/Android) |
| Integration time | 2-5 days | 1-2 days |
| Performance | Depends on implementation | Optimized |
Three.js Integration
For rendering glTF in the browser, we use Three.js with GLTFLoader. Include via CDN or 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);
// Lighting
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);
// Orbit controls
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
// Load model
const loader = new THREE.GLTFLoader();
loader.load('<?= $modelUrl ?>', function (gltf) {
scene.add(gltf.scene);
// Center model
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 for Easy AR Viewing
Google's <model-viewer> is a ready-made web component that supports glTF and AR on mobile devices. Documentation. The component enables AR viewing on both iOS and 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 product model"
auto-rotate
camera-controls
ar
ar-modes="webxr scene-viewer quick-look"
style="width: 100%; height: 400px;">
</model-viewer>
The ar attribute enables a "View in AR" button — on iOS it opens USDZ via Quick Look, on Android via Scene Viewer. For this, you also need to upload a USDZ version of the model and specify it in the ios-src attribute.
How to store 3D models in Bitrix infoblocks?
The model is stored as a file attached to the product via an infoblock property of type F. Create a property with code MODEL_3D:
\CIBlockProperty::Add([
'NAME' => '3D model',
'CODE' => 'MODEL_3D',
'IBLOCK_ID' => $iblockId,
'PROPERTY_TYPE' => 'F',
'FILE_TYPE' => 'glb,gltf,usdz',
'SORT' => 500,
]);
Retrieving the model file:
$props = $element->GetProperties();
$fileId = $props['MODEL_3D']['VALUE'];
$modelUrl = \CFile::GetPath($fileId);
How to optimize 3D models for fast loading?
Raw glb files from designers can be 50–200 MB. For the web, optimization is needed via gltf-transform (Node.js CLI):
npx @gltf-transform/cli optimize model.glb model-web.glb \
--compress draco \
--texture-compress webp \
--texture-size 1024
Draco compression is 10 times more efficient than uncompressed, reducing file sizes from 50 MB to 2 MB. 1024×1024 textures in WebP are sufficient for a 3D viewer on a website. After optimization, a typical model fits in 300–800 KB. We also implement LOD (level of detail) for complex models to ensure smooth rendering on mobile devices. For advanced rendering, we leverage PBR materials, vertex optimization, and draw call batching to ensure smooth performance even on low-end devices.
Case study from practice: a client provided a glb model of an armchair at 180 MB. After Draco compression and reducing textures to 1024px, we got 2 MB. Load time dropped from 30 seconds to 2, and conversion increased by 25%. For a typical online store with 10,000 monthly visitors and a 2% conversion rate, a 25% increase translates to 50 additional sales per month, generating an estimated $15,000 additional revenue at an average order value of $300.
Process of Working on a 3D Viewer
- Analysis — we study the catalog, select products for 3D, determine the format and level of detail.
- Model preparation — designers create or convert models to glb, we optimize them for the web.
- Integration — we configure the infoblock property, viewer in the template, caching.
- Testing — we check on desktop, tablets, mobile, different browsers.
- Deployment — deploy to production, monitor speed, train content managers.
What's Included in the Work
- Technical specification describing formats and requirements for models.
- Viewer integration (Three.js or model-viewer) with AR mode.
- Model optimization (Draco, WebP, size reduction).
- Documentation on working with 3D content.
- Training your employees on uploading and replacing models.
- Support for 30 days after launch.
Timeline and Estimation
Timelines depend on the number of products and model complexity. Roughly: from 3 days for a basic solution to 15 days for mass integration with AR and custom functionality. Typical project costs range from $1,000 to $5,000, and clients often see a 20-30% increase in conversion, justifying the investment. Order a consultation — we will analyze your catalog and propose the optimal solution. Contact us to discuss details.
We are a team of certified Bitrix developers with 10+ years of experience. We have implemented 3D viewing for 50+ online stores. We guarantee compatibility with your Bitrix version and assistance at all stages.