js实现立体

实现3D立体效果的JavaScript方法

使用CSS 3D变换和JavaScript结合可以实现立体效果。通过操作元素的transform属性，可以创建旋转、缩放和平移等3D效果。

// 获取DOM元素
const cube = document.getElementById('cube');

// 设置初始3D样式
cube.style.transformStyle = 'preserve-3d';
cube.style.width = '200px';
cube.style.height = '200px';
cube.style.position = 'relative';

// 创建立方体的六个面
const faces = ['front', 'back', 'left', 'right', 'top', 'bottom'];
faces.forEach((face, index) => {
  const faceElement = document.createElement('div');
  faceElement.className = `face ${face}`;
  faceElement.style.position = 'absolute';
  faceElement.style.width = '100%';
  faceElement.style.height = '100%';
  faceElement.style.backgroundColor = `hsl(${index * 60}, 100%, 50%)`;
  faceElement.style.opacity = '0.8';
  faceElement.style.border = '2px solid black';

  // 为每个面设置不同的3D变换
  switch(face) {
    case 'front':
      faceElement.style.transform = 'translateZ(100px)';
      break;
    case 'back':
      faceElement.style.transform = 'rotateY(180deg) translateZ(100px)';
      break;
    case 'left':
      faceElement.style.transform = 'rotateY(-90deg) translateZ(100px)';
      break;
    case 'right':
      faceElement.style.transform = 'rotateY(90deg) translateZ(100px)';
      break;
    case 'top':
      faceElement.style.transform = 'rotateX(90deg) translateZ(100px)';
      break;
    case 'bottom':
      faceElement.style.transform = 'rotateX(-90deg) translateZ(100px)';
      break;
  }

  cube.appendChild(faceElement);
});

// 添加动画效果
let angle = 0;
function animate() {
  angle += 1;
  cube.style.transform = `rotateX(${angle}deg) rotateY(${angle}deg)`;
  requestAnimationFrame(animate);
}
animate();

使用Three.js创建3D场景

Three.js是流行的WebGL库，可以更高效地创建复杂3D图形：

// 初始化场景、相机和渲染器
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();

CSS 3D变换基础

纯CSS也能实现简单3D效果，结合JavaScript可以动态控制：

.container {
  perspective: 1000px;
}
.cube {
  width: 200px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1s;
}
.face {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.8;
}

性能优化技巧

使用will-change属性提示浏览器元素将进行3D变换：

.cube {
  will-change: transform;
}

对于复杂场景，考虑使用Web Workers处理计算密集型任务。减少重绘区域，使用transform和opacity属性实现动画，这些属性不会触发布局重绘。