Creating T-shirt Mockups with Three.js

While I don't have specific information about how Redbubble implements their T-shirt mockups, I can provide guidance on how you might achieve a similar effect using Three.js.

This type of product visualization typically involves texture mapping on a 3D model. Here's an approach you could take:

General Steps

1. Create or obtain a 3D model of a T-shirt
2. Set up proper UV mapping on the model
3. Apply your design as a texture
4. Render the scene with appropriate lighting

Implementation with Three.js

You could use a combination of Three.js for the 3D rendering and one of the specialized renderers for certain effects:

Basic Setup

JAVASCRIPTCopied
// Set up scene, camera, and renderer
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Add lighting
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(1, 1, 1);
scene.add(directionalLight);

// Position camera
camera.position.z = 5;

Loading the T-shirt Model and Applying Texture

JAVASCRIPTCopied
// Load T-shirt model (OBJ, GLTF, etc.)
const loader = new THREE.GLTFLoader();
loader.load('path/to/tshirt-model.gltf', (gltf) => {
    const tshirt = gltf.scene;
    
    // Load your design as a texture
    const textureLoader = new THREE.TextureLoader();
    const designTexture = textureLoader.load('path/to/your-design.png');
    
    // Find the mesh that represents the front of the shirt
    tshirt.traverse((child) => {
        if (child.isMesh && child.name === 'TshirtFront') {
            // Apply the texture to the material
            child.material.map = designTexture;
            child.material.needsUpdate = true;
        }
    });
    
    scene.add(tshirt);
});

Animation Loop

JAVASCRIPTCopied
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();

Advanced Techniques

For more realistic results, you might want to consider:

1. Using displacement maps to simulate fabric wrinkles
2. Adding normal maps for fabric texture details
3. Implementing environment maps for realistic reflections
4. Using physically-based rendering (PBR) materials

You could also explore the CSS3DRenderer if you want to combine HTML elements with your 3D scene, which might be useful for interactive product customization interfaces.

This is a starting point, and the actual implementation would require more detailed work on the 3D model, textures, and lighting to achieve the realistic look you see on Redbubble.