3D Playing cards in Webflow Utilizing Three.js and GLB Fashions

I’ve all the time been curious about discovering easy methods to deliver extra depth into net interfaces, not simply by means of visuals, however by means of interplay and area.

On this demo, I explored how flat UI playing cards can turn out to be interactive 3D scenes utilizing GLB fashions, Three.js, and Webflow. Every card begins as a fundamental structure however reveals a small, self-contained atmosphere constructed with real-time rendering and delicate movement.

It’s a light-weight method to including spatial storytelling to acquainted parts, utilizing instruments many designers already work with.

Welcome to My Inventive World

I’m all the time drawn to visuals that blend the futuristic with the acquainted — space-inspired kinds, minimal layouts, and on a regular basis components seen from a distinct angle.

Most of my tasks begin this manner: by reimagining strange concepts by means of a extra immersive or atmospheric lens.

It All Began with a Moodboard

This one started with a easy inspiration board:

From that board, I picked a number of of my favourite visuals and ran them by means of an AI software that converts photos into GLB 3D fashions.

The outcomes had been surprisingly good! Summary, textured, and stuffed with character.

The Idea: Flat to Deep

After I noticed the output from the AI-generated GLB fashions, I began enthusiastic about how we understand depth in UI design, not simply visually, however interactively.

That led to a easy concept: what if flat playing cards may reveal a hidden spatial layer? Not by means of animation alone, however by means of precise 3D geometry, lighting, and digital camera motion.

I designed three UI playing cards, every styled with minimal HTML and CSS in Webflow. On interplay, they load a singular GLB mannequin right into a Three.js scene straight throughout the card container. Every mannequin is lit, framed, and animated to create the sensation of a self-contained 3D area.

Constructing the Internet Expertise

The structure was in-built Webflow utilizing a easy flexbox construction with three playing cards inside a wrapper. Every card incorporates a div that serves because the mounting level for a 3D object.

The GLB fashions are rendered utilizing Three.js, which is built-in into the challenge with customized JavaScript. Every scene is initialized and dealt with individually, giving every card its personal interactive 3D area whereas holding the structure light-weight and modular.

Scene Design with Blender

Every GLB mannequin was ready in Blender, the place I added a surrounding sphere to create a way of depth and environment. This easy form helps simulate background distinction and encloses the item in a self-contained area.

Lighting performed an necessary position; particularly with reflective supplies like glass or steel. Highlights and comfortable shadows had been used to create that delicate, futuristic glow.

The result’s that every 3D mannequin feels prefer it lives inside its personal ambient atmosphere, even when rendered in a small card.

Bringing It Along with Three.js

As soon as the fashions had been exported from Blender as .glb information, I used Three.js to render them inside every card. Every card container acts as its personal 3D scene, initialized by means of a customized JavaScript operate.

The setup includes making a fundamental scene with a perspective digital camera, ambient and directional lighting, and a WebGL renderer. I used GLTFLoader to load every .glb file and OrbitControls to allow delicate rotation. Zooming and panning are disabled to maintain the interplay targeted and managed.

Every mannequin is loaded right into a separate container, making it modular and simple to handle. The digital camera is offset barely for a extra dynamic beginning view, and the background is stored darkish to assist the lighting pop.

Right here’s the complete JavaScript used to load and render the fashions:

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

/**
 * This operate initializes a Three.js scene inside a given container
 * and hundreds a .glb mannequin into it.
 */
operate createScene(containerSelector, glbPath) {
  const container = doc.querySelector(containerSelector);

  // 1. Create a scene
  const scene = new THREE.Scene();
  scene.background = new THREE.Coloration(0x202020); // darkish background

  // 2. Arrange the digital camera with perspective
  const digital camera = new THREE.PerspectiveCamera(
    45, // Discipline of view
    container.clientWidth / container.clientHeight, // Side ratio
    0.1, // Close to clipping airplane
    100  // Far clipping airplane
  );
  digital camera.place.set(2, 0, 0); // Offset to the facet for higher viewing

  // 3. Create a renderer and append it to the container
  const renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(container.clientWidth, container.clientHeight);
  container.appendChild(renderer.domElement);

  // 4. Add lighting
  const gentle = new THREE.DirectionalLight(0xffffff, 4);
  gentle.place.set(30, -10, 20);
  scene.add(gentle);

  const ambientLight = new THREE.AmbientLight(0x404040); // comfortable gentle
  scene.add(ambientLight);

  // 5. Arrange OrbitControls to permit rotation
  const controls = new OrbitControls(digital camera, renderer.domElement);
  controls.enableZoom = false; // no zooming
  controls.enablePan = false;  // no dragging
  controls.minPolarAngle = Math.PI / 2; // lock vertical angle
  controls.maxPolarAngle = Math.PI / 2;
  controls.enableDamping = true; // easy motion

  // 6. Load the GLB mannequin
  const loader = new GLTFLoader();
  loader.load(
    glbPath,
    (gltf) => {
      scene.add(gltf.scene); // Add mannequin to the scene
    },
    (xhr) => {
      console.log(`${containerSelector}: ${(xhr.loaded / xhr.whole) * 100}% loaded`);
    },
    (error) => {
      console.error(`Error loading ${glbPath}`, error);
    }
  );

  // 7. Make it responsive
  window.addEventListener("resize", () => {
    digital camera.side = container.clientWidth / container.clientHeight;
    digital camera.updateProjectionMatrix();
    renderer.setSize(container.clientWidth, container.clientHeight);
  });

  // 8. Animate the scene
  operate animate() {
    requestAnimationFrame(animate);
    controls.replace(); // updates rotation easily
    renderer.render(scene, digital camera);
  }

  animate(); // begin the animation loop
}

// 9. Initialize scenes for every card (exchange together with your URLs)
createScene(".div",  "https://yourdomain.com/fashions/yourmodel.glb");
createScene(".div2", "https://yourdomain.com/fashions/yourmodel2.glb");
createScene(".div3", "https://yourdomain.com/fashions/yourmodel3.glb");

This script is added through a <script sort="module"> tag, both within the Webflow web page settings or as an embedded code block. Every name to createScene() initializes a brand new card, linking it to its corresponding .glb file.

How This Works in Follow

In Webflow, create three containers with the lessons .div, .div2, and .div3. Every one will act as a canvas for a distinct 3D scene.

Embed the JavaScript module proven above by inserting it simply earlier than the closing </physique> tag in your Webflow challenge, or through the use of an Embed block with <script sort="module">.

As soon as the web page hundreds, every container initializes its personal Three.js scene and hundreds the corresponding GLB mannequin. The end result: flat UI playing cards turn out to be interactive, scrollable 3D objects — all straight inside Webflow.

This method is light-weight, clear, and performance-conscious, whereas nonetheless providing you with the flexibleness to work with actual 3D content material.

Vital Word for Webflow Customers

This setup works in Webflow, however provided that you construction it appropriately.

To make it work, you’ll have to:

• Host your Three.js code externally utilizing a bundler like Vite, Parcel, or Webpack
• Or bundle the JavaScript manually and embed it as a <script sort="module"> in your exported web site

Bear in mind: Webflow’s Designer doesn’t assist ES module imports (import) straight. Pasting the code into an Embed block received’t work except it’s already constructed and hosted elsewhere.

You’ll have to export your Webflow challenge or host the script externally, then hyperlink it through your challenge settings.

Closing Ideas

Thanks for following together with this challenge. What began as a easy moodboard became a small experiment in mixing UI design with real-time 3D.

Taking flat playing cards and turning them into interactive scenes was a enjoyable strategy to discover how a lot depth you possibly can add with only a few instruments: Webflow, Three.js, and GLB fashions.

If this gave you an concept or made you need to attempt one thing comparable, that’s what issues most.
Hold experimenting, continue learning, and preserve constructing.