当前位置：首页 > JavaScript

js实现立体

2026-04-06 05:27:03JavaScript

实现立体效果的 JavaScript 方法

在 JavaScript 中实现立体效果通常涉及 CSS 3D 变换、WebGL 或 Canvas 2D 绘图。以下是几种常见的方法：

使用 CSS 3D 变换

通过 CSS 的 transform 属性结合 JavaScript 动态控制，可以创建简单的立体效果。例如旋转一个立方体：

const cube = document.getElementById('cube');
let angle = 0;

function rotateCube() {
  angle += 1;
  cube.style.transform = `rotateX(${angle}deg) rotateY(${angle}deg)`;
  requestAnimationFrame(rotateCube);
}
rotateCube();

对应的 HTML 和 CSS 需要定义立方体的六个面，并通过 transform-style: preserve-3d 启用 3D 空间。

js实现立体

使用 Three.js 库

Three.js 是一个流行的 WebGL 库，适合创建复杂的 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 geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

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

使用 Canvas 2D 模拟立体

通过透视算法在 2D Canvas 上绘制伪 3D 效果：

js实现立体

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

function drawCube(x, y, size, rotation) {
  const points = [
    { x: -size, y: -size, z: -size },
    { x: size, y: -size, z: -size },
    { x: size, y: size, z: -size },
    { x: -size, y: size, z: -size },
    { x: -size, y: -size, z: size },
    { x: size, y: -size, z: size },
    { x: size, y: size, z: size },
    { x: -size, y: size, z: size }
  ];

  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();

  points.forEach(point => {
    const rotatedX = point.x * Math.cos(rotation) - point.z * Math.sin(rotation);
    const rotatedZ = point.x * Math.sin(rotation) + point.z * Math.cos(rotation);
    const scale = 500 / (500 + rotatedZ);
    const projectedX = rotatedX * scale + x;
    const projectedY = point.y * scale + y;
    ctx.lineTo(projectedX, projectedY);
  });

  ctx.stroke();
}

let angle = 0;
setInterval(() => {
  drawCube(300, 200, 50, angle);
  angle += 0.02;
}, 16);

使用 CSS 和 JavaScript 实现视差滚动

对于网页中的立体视差效果：

window.addEventListener('scroll', () => {
  const scrollY = window.scrollY;
  document.querySelector('.layer-1').style.transform = `translateY(${scrollY * 0.5}px)`;
  document.querySelector('.layer-2').style.transform = `translateY(${scrollY * 0.3}px)`;
  document.querySelector('.layer-3').style.transform = `translateY(${scrollY * 0.1}px)`;
});

对应的 CSS 需要为不同层设置不同的 z-index 和初始位置。