Custom 3D Name Keyring

<div style="width:100%; height:300px;">
  <canvas id="preview3d"></canvas>
</div>

<div style="margin-top:10px;">
  <input id="name3d" type="text" value="YourName" placeholder="Enter name">
  <input id="color3d" type="color" value="#ff9900">
</div>

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

<script>
const canvas = document.getElementById("preview3d");
const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(
  45,
  canvas.clientWidth / 300,
  1,
  1000
);
camera.position.z = 60;

const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
renderer.setSize(canvas.clientWidth, 300);

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

let textMesh, loadedFont;

const loader = new THREE.FontLoader();
loader.load(
  "https://threejs.org/examples/fonts/helvetiker_regular.typeface.json",
  font => {
    loadedFont = font;
    updateText();
  }
);

function updateText() {
  if (!loadedFont) return;
  if (textMesh) scene.remove(textMesh);

  const geo = new THREE.TextGeometry(
    document.getElementById("name3d").value || "Name",
    { font: loadedFont, size: 6, height: 2 }
  );
  geo.center();

  const mat = new THREE.MeshStandardMaterial({
    color: document.getElementById("color3d").value
  });

  textMesh = new THREE.Mesh(geo, mat);
  scene.add(textMesh);
}

document.getElementById("name3d").oninput = updateText;
document.getElementById("color3d").oninput = () =>
  textMesh.material.color.set(document.getElementById("color3d").value);

function animate() {
  requestAnimationFrame(animate);
  if (textMesh) textMesh.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();
</script>