Thee.js Letter Looping

by smombartz

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Animated 3D Text Path (Rotated 180°) with Uniform Lighting</title>
  <style>
    /* -------------------------------
       Basic Page Styles
    --------------------------------- */
    body { margin: 0; padding: 0; overflow: hidden; background-color: #ffffff; }
    canvas { display: block; }
  </style>
</head>
<body>
<div style="width:200px; height:200px;">
  <canvas id="canvas3d"></canvas>
</div>

<!-- ================================
     Load Three.js and Add-ons
==================================== -->
<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 src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/loaders/FontLoader.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/geometries/TextGeometry.js"></script>

<script>
  // Get the canvas and its parent container
  const canvas_loop = document.getElementById('canvas3d');
  const container = canvas_loop.parentElement;  // Assumes the <div> is the immediate parent

  // Obtain container dimensions
  const containerWidth = container.clientWidth;
  const containerHeight = container.clientHeight;

  // =======================================================
  // Section 1: Setup - Scene, Camera, and Renderer
  // =======================================================
  const scene = new THREE.Scene();
  scene.background = null;

  // Use container dimensions for the camera's aspect ratio
  const camera = new THREE.PerspectiveCamera(
    45,
    containerWidth / containerHeight,
    0.1,
    1000
  );
  camera.position.set(0, 5, 25);

  // Initialize renderer using the container's dimensions
  const renderer = new THREE.WebGLRenderer({ 
    canvas: canvas_loop, 
    antialias: true, 
    alpha: true  // Enable transparency
  });
 ...