当前位置：首页 > JavaScript

js实现文字立体效果

2026-01-31 03:56:08JavaScript

使用CSS text-shadow实现立体文字效果

CSS的text-shadow属性可以通过叠加多层阴影实现立体效果。以下是一个示例代码：

.threeD-text {
  color: white;
  text-shadow: 
    1px 1px 0 #999,
    2px 2px 0 #888,
    3px 3px 0 #777,
    4px 4px 0 #666;
  font-size: 48px;
  font-weight: bold;
}

使用Canvas绘制3D文字

通过Canvas可以实现更复杂的3D文字效果：

js实现文字立体效果

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

function draw3DText(text, x, y, depth, color) {
  ctx.font = 'bold 60px Arial';

  // 绘制阴影层
  for(let i = depth; i > 0; i--) {
    ctx.fillStyle = `rgba(0, 0, 0, ${0.1 + (i/depth)*0.5})`;
    ctx.fillText(text, x + i, y + i);
  }

  // 绘制前景文字
  ctx.fillStyle = color;
  ctx.fillText(text, x, y);
}

draw3DText('3D TEXT', 50, 100, 10, '#ff3366');

SVG滤镜实现立体效果

SVG滤镜可以创建高质量的立体文字：

js实现文字立体效果

<svg width="500" height="200">
  <defs>
    <filter id="3d-effect" x="-20%" y="-20%" width="140%" height="140%">
      <feOffset in="SourceAlpha" dx="3" dy="3" result="offset1"/>
      <feGaussianBlur in="offset1" stdDeviation="3" result="blur1"/>
      <feFlood flood-color="#333" result="color1"/>
      <feComposite in="color1" in2="blur1" operator="in" result="shadow1"/>

      <feOffset in="SourceAlpha" dx="6" dy="6" result="offset2"/>
      <feGaussianBlur in="offset2" stdDeviation="2" result="blur2"/>
      <feFlood flood-color="#666" result="color2"/>
      <feComposite in="color2" in2="blur2" operator="in" result="shadow2"/>

      <feMerge>
        <feMergeNode in="shadow1"/>
        <feMergeNode in="shadow2"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>

  <text x="50" y="100" font-size="60" font-weight="bold" filter="url(#3d-effect)">SVG 3D</text>
</svg>

使用WebGL实现高级3D文字

Three.js库可以创建真正的3D文字：

import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const loader = new THREE.FontLoader();
loader.load('https://threejs.org/examples/fonts/helvetiker_regular.typeface.json', function(font) {
  const geometry = new THREE.TextGeometry('3D Text', {
    font: font,
    size: 5,
    height: 2,
    curveSegments: 12,
    bevelEnabled: true,
    bevelThickness: 0.5,
    bevelSize: 0.3,
    bevelOffset: 0,
    bevelSegments: 5
  });

  const material = new THREE.MeshPhongMaterial({ color: 0x00ff00 });
  const textMesh = new THREE.Mesh(geometry, material);
  scene.add(textMesh);

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

  camera.position.z = 20;

  function animate() {
    requestAnimationFrame(animate);
    textMesh.rotation.x += 0.01;
    textMesh.rotation.y += 0.01;
    renderer.render(scene, camera);
  }
  animate();
});

使用CSS transform实现伪3D效果

CSS 3D变换可以创建倾斜的立体效果：

.pseudo-3d {
  font-size: 60px;
  color: #3498db;
  transform: perspective(500px) rotateX(30deg);
  text-shadow: 
    1px 1px 0 #2980b9,
    2px 2px 0 #2980b9,
    3px 3px 0 #2980b9,
    4px 4px 5px rgba(0,0,0,0.5);
}

每种方法适用于不同场景，CSS方案最简单，WebGL方案最强大但复杂度最高。