html实现3D旋转地球

要实现3D旋转地球，需要使用HTML5中的canvas元素和JavaScript编写代码。以下是一个简单的示例：

1. HTML代码

首先，在HTML文件中添加一个canvas元素，设置宽高和id属性：

<canvas id="myCanvas" width="500" height="500"></canvas>

2. JavaScript代码

接下来，使用JavaScript来绘制地球并实现旋转效果。首先，创建一个画布对象和一个Image对象：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = "earth.jpg";

然后，使用drawImage()方法将地球图片绘制在画布上：

img.onload = function() {
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
}

接着，在绘制地球之前，需要设置一些属性来实现3D效果。这些属性包括：

- 视角距离（distance）：表示视角与画布的距离，值越小，地球看起来越大；
- 光源方向（light）：表示光源的方向，使用三维向量表示；
- 旋转角度（angle）：表示地球的旋转角度，由用户控制。

var distance = canvas.width * 0.8;
var light = {x: 0.5, y: 0.5, z: -0.5};
var angle = 0;

接下来，编写一个函数来绘制地球并实现旋转效果：

function drawEarth() {
  // 清空画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 计算旋转角度
  angle += 0.01;

  // 计算地球的中心点和半径
  var centerX = canvas.width / 2;
  var centerY = canvas.height / 2;
  var radius = canvas.width * 0.4;

  // 计算地球的旋转矩阵
  var rotateMatrix = [
    [Math.cos(angle), 0, -Math.sin(angle)],
    [0, 1, 0],
    [Math.sin(angle), 0, Math.cos(angle)]
  ];

  // 绘制地球
  ctx.save();
  ctx.translate(centerX, centerY);
  ctx.transform(rotateMatrix[0][0], rotateMatrix[0][1], rotateMatrix[0][2], rotateMatrix[1][0], rotateMatrix[1][1], rotateMatrix[1][2], rotateMatrix[2][0], rotateMatrix[2][1], rotateMatrix[2][2]);
  ctx.drawImage(img, -radius, -radius, radius * 2, radius * 2);
  ctx.restore();

  // 绘制光源
  ctx.save();
  ctx.translate(centerX, centerY);
  var lightX = light.x * canvas.width;
  var lightY = light.y * canvas.height;
  var lightZ = light.z * distance;
  var lightRadius = 10;
  var lightGradient = ctx.createRadialGradient(lightX, lightY, lightRadius / 3, lightX, lightY, lightRadius);
  lightGradient.addColorStop(0, "white");
  lightGradient.addColorStop(1, "rgba(255, 255, 255, 0)");
  ctx.fillStyle = lightGradient;
  ctx.beginPath();
  ctx.arc(lightX, lightY, lightRadius, 0, Math.PI * 2);
  ctx.fill();
  ctx.restore();

  // 绘制阴影
  ctx.save();
  ctx.translate(centerX, centerY);
  ctx.transform(rotateMatrix[0][0], rotateMatrix[0][1], rotateMatrix[0][2], rotateMatrix[1][0], rotateMatrix[1][1], rotateMatrix[1][2], rotateMatrix[2][0], rotateMatrix[2][1], rotateMatrix[2][2]);
  ctx.fillStyle = "rgba(0, 0, 0, 0.5)";
  ctx.beginPath();
  ctx.arc(0, 0, radius, 0, Math.PI * 2);
  ctx.fill();
  ctx.restore();

  // 递归调用自身，实现动画效果
  requestAnimationFrame(drawEarth);
}

最后，在页面加载完成后，调用drawEarth()函数开始绘制地球：

window.onload = function() {
  drawEarth();
};

3. CSS样式

为了让canvas元素居中显示，可以添加以下CSS样式：

canvas {
  display: block;
  margin: 0 auto;
}

完整的HTML、CSS和JavaScript代码如下：