当前位置：首页 > JavaScript

js实现立体

2026-03-14 11:28:39JavaScript

实现3D效果的基础方法

使用CSS的transform属性可以轻松创建3D效果。通过rotateX、rotateY和rotateZ函数可以让元素在三维空间中旋转。配合perspective属性设置透视距离，增强立体感。

.box {
  transform: rotateX(45deg) rotateY(30deg);
  perspective: 1000px;
}

WebGL技术实现高级3D

对于复杂的3D场景，WebGL是更好的选择。它基于OpenGL ES标准，可以直接操作GPU进行高性能渲染。Three.js等库简化了WebGL的使用流程。

// 使用Three.js创建立方体
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({color: 0x00ff00});
const cube = new THREE.Mesh(geometry, material);

CSS 3D变换组合

结合多个CSS 3D变换可以创建更丰富的效果。translateZ控制深度移动，scale调整大小，配合过渡动画实现平滑的3D变换。

.card {
  transform-style: preserve-3d;
  transition: transform 1s;
}
.card:hover {
  transform: rotateY(180deg) translateZ(50px);
}

使用Canvas绘制3D图形

Canvas 2D API也能模拟3D效果。通过计算投影点坐标，将3D空间中的点映射到2D平面。这种方法适合简单的3D图形需求。

function project3D(x, y, z) {
  const scale = focalLength / (focalLength + z);
  return {
    x: x * scale + canvas.width/2,
    y: y * scale + canvas.height/2
  };
}

SVG实现简单3D效果

SVG通过滤镜和变换也能创建伪3D效果。结合feDiffuseLighting和feSpecularLighting滤镜可以模拟光照效果，增强立体感。

js实现立体

<svg>
  <filter id="3d">
    <feDiffuseLighting in="SourceGraphic" result="diffuse">
      <feDistantLight azimuth="45" elevation="30"/>
    </feDiffuseLighting>
  </filter>
  <rect width="100" height="100" filter="url(#3d)"/>
</svg>