Building a 3D Product Scene for E-Commerce with Three.js

What Is Three.js?

Three.js is an open-source JavaScript library for creating 3D graphics in web browsers. It abstracts the WebGL API, allowing you to create 3D scenes without low-level graphics programming knowledge.

While model-viewer offers a ready-made solution, Three.js gives full control and customization. If you want to design your own product viewing experience from scratch, Three.js is the right choice.

Basic Scene Setup

Every Three.js application needs three core components:

import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

const scene = new THREE.Scene();
scene.background = new THREE.Color(0xf5f5f5);

const camera = new THREE.PerspectiveCamera(
  45, window.innerWidth / window.innerHeight, 0.1, 100
);
camera.position.set(0, 1, 3);

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.toneMapping = THREE.ACESFilmicToneMapping;
document.body.appendChild(renderer.domElement);

Lighting

const ambient = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambient);

const keyLight = new THREE.DirectionalLight(0xffffff, 1);
keyLight.position.set(5, 5, 5);
scene.add(keyLight);

const fillLight = new THREE.DirectionalLight(0xffffff, 0.3);
fillLight.position.set(-5, 3, -5);
scene.add(fillLight);

For more realistic lighting, use HDRI environment maps loaded via RGBELoader.

Loading 3D Models

const loader = new GLTFLoader();
loader.load('product.glb', (gltf) => {
  const model = gltf.scene;
  const box = new THREE.Box3().setFromObject(model);
  const center = box.getCenter(new THREE.Vector3());
  model.position.sub(center);
  scene.add(model);
});

Camera Controls

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;
controls.minDistance = 1;
controls.maxDistance = 10;
controls.maxPolarAngle = Math.PI / 2;

Performance Tips

• Set powerPreference: "high-performance" on the renderer
• Enable shadow maps only when necessary
• Use Draco-compressed models with DRACOLoader
• Update renderer and camera on window resize

Conclusion

Three.js is a powerful foundation for 3D product viewing projects requiring full customization. While the learning curve is steeper than model-viewer, the flexibility and control it offers are unmatched.