Postcard

by smombartz

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3D Postcard with Bevel Effect</title>
  <style>
    body { margin: 0; }
    canvas { display: block; }
  </style>
</head>
<body>
  <!-- Include Three.js and OrbitControls from a CDN -->
  <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/controls/OrbitControls.js"></script>
  <script>
    // Set up scene, camera, and renderer
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(
      45,
      window.innerWidth / window.innerHeight,
      0.1,
      1000
    );
    camera.position.set(0, 0, 5);
    
    // Create renderer with transparent background and set pixel ratio
    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setClearColor(0x000000, 0); // transparent background
    document.body.appendChild(renderer.domElement);
    
    // Add orbit controls with zoom disabled
    const controls = new THREE.OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true;
    controls.enableZoom = false;
    
    // Card dimensions
    const width = 2, height = 3, thickness = 0.01;
    
    // Create a BoxGeometry for the postcard.
    // Face order: 0: right (+X), 1: left (-X), 2: top (+Y), 3: bottom (-Y), 4: front (+Z), 5: back (-Z)
    const geometry = new THREE.BoxGeometry(width, height, thickness);
    
    // Load textures for the front and back images
    const loader = new THREE.TextureLoader();
    const textureFront = loader.load('https://as1.ftcdn.net/v2/jpg/05/02/20/46/1000_F_502204655_gaP7DOGDBYCGdJChispROdaio6TCQzrC.jpg');
    const textureBack  = loader.load('https://as1.ftcdn.net/v2/jpg/05/02/20/46/1000_F_502204655_gaP7DOGDBYCGdJChispROdaio6TCQzrC.jpg');
    
    // Create...