3d地球旋转html

在HTML中创建一个3D地球旋转效果，通常需要结合CSS3和JavaScript（如Three.js库），因为纯HTML和CSS无法直接实现复杂的3D图形渲染。以下是简单的步骤：

1. 引入Three.js库：首先，在HTML头部引入Three.js的script标签，可以从其官网下载或通过CDN获取。

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

2. 创建场景、相机和渲染器：在JavaScript里初始化这些基本组件。

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

3. 地球模型：使用Three.js的几何体（例如`THREE.SphereGeometry`）创建地球的形状，并应用材质和纹理。

const geometry = new THREE.SphereGeometry(1, 60, 40);
const earthMaterial = new THREE.MeshStandardMaterial({ map: THREE.ImageUtils.loadTexture('earth_texture.jpg') });
const earthMesh = new THREE.Mesh(geometry, earthMaterial);
scene.add(earthMesh);

4. 旋转动画：设置定时器或者事件监听器，更新地球的位置并让其绕自身轴线旋转。

function animate() {
  requestAnimationFrame(animate);
  earthMesh.rotation.y += 0.01; // 每帧增加一点旋转
  renderer.render(scene, camera);
}
animate();