h5实现透视

使用CSS 3D变换实现透视效果

在HTML5中可以通过CSS的transform属性配合perspective函数实现3D透视效果。以下是一个基础实现示例：

<div class="perspective-container">
  <div class="cube">
    <div class="face front">Front</div>
    <div class="face back">Back</div>
    <div class="face left">Left</div>
    <div class="face right">Right</div>
    <div class="face top">Top</div>
    <div class="face bottom">Bottom</div>
  </div>
</div>

<style>
.perspective-container {
  perspective: 1000px;
  width: 200px;
  height: 200px;
}

.cube {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(20deg) rotateY(30deg);
}

.face {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.8;
}

.front { transform: translateZ(100px); background: red; }
.back { transform: translateZ(-100px); background: blue; }
.left { transform: rotateY(-90deg) translateZ(100px); background: green; }
.right { transform: rotateY(90deg) translateZ(100px); background: yellow; }
.top { transform: rotateX(90deg) translateZ(100px); background: purple; }
.bottom { transform: rotateX(-90deg) translateZ(100px); background: orange; }
</style>

使用WebGL实现高级透视

对于更复杂的3D场景，可以使用WebGL API：

const canvas = document.getElementById('glcanvas');
const gl = canvas.getContext('webgl');

// 顶点着色器
const vsSource = `
  attribute vec4 aVertexPosition;
  uniform mat4 uModelViewMatrix;
  uniform mat4 uProjectionMatrix;
  void main() {
    gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
  }
`;

// 片段着色器
const fsSource = `
  void main() {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
  }
`;

// 初始化着色器程序
const shaderProgram = initShaderProgram(gl, vsSource, fsSource);

使用Three.js简化3D开发

Three.js库封装了WebGL的复杂操作：

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);
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();

响应式透视调整

通过监听窗口大小变化动态调整透视：

window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});

移动设备陀螺仪控制

利用设备方向API增强交互：

window.addEventListener('deviceorientation', (event) => {
  cube.rotation.x = event.beta * Math.PI / 180;
  cube.rotation.y = event.gamma * Math.PI / 180;
});