JS实现骰子3D旋转效果

JS实现骰子3D旋转效果是一个比较有趣的前端动画效果，可以用来增加网页的视觉效果，下面是详细的攻略：

1. 绘制立方体并实现基本旋转

我们可以通过HTML5 canvas模块来绘制立方体，然后通过JavaScript来控制立方体的旋转效果。绘制立方体的代码如下：

<canvas id="cube" width="200" height="200"></canvas>

const canvas = document.getElementById('cube');
const ctx = canvas.getContext('2d');

// 定义立方体的六个面
const faces = [
  { points: [[0, 0], [1, 0], [1, 1], [0, 1]], color: 'blue' }, // 面1
  { points: [[0, 0], [0, 1], [-1, 1], [-1, 0]], color: 'yellow' }, // 面2
  { points: [[0, 0], [-1, 0], [-1, -1], [0, -1]], color: 'green' }, // 面3
  { points: [[0, 0], [0, -1], [1, -1], [1, 0]], color: 'red' }, // 面4
  { points: [[0, 1], [1, 1], [1, 0], [0, 0]], color: 'orange' }, // 面5
  { points: [[0, -1], [-1, -1], [-1, 0], [0, 0]], color: 'purple' }, // 面6
];

// 旋转立方体的角度
let angle = 0;

// 绘制立方体
function draw() {
  // 清空画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 保存当前画布状态
  ctx.save();

  // 平移坐标系到画布中心
  ctx.translate(canvas.width / 2, canvas.height / 2);

  // 旋转坐标系
  ctx.rotate(angle * Math.PI / 180);

  // 绘制立方体的每个面
  faces.forEach((face) => {
    // 绘制面的路径
    ctx.beginPath();
    ctx.moveTo(face.points[0][0] * 50, face.points[0][1] * 50);

    face.points.slice(1).forEach((point) => {
      ctx.lineTo(point[0] * 50, point[1] * 50);
    });

    ctx.closePath();
    ctx.fillStyle = face.color;
    ctx.fill();
  });

  // 恢复画布状态
  ctx.restore();

  // 更新角度
  angle += 1;

  // 循环动画
  window.requestAnimationFrame(draw);
}

// 开始动画
draw();

运行上面的代码，可以看到一个立方体在canvas画布中不停地旋转。注意，这里我们只实现了立方体的旋转，没有实现掷骰子的效果。

1. 实现3D掷骰子效果

为了实现3D掷骰子效果，我们需要借鉴物理引擎的思路。具体来说，我们需要模拟骰子掷出去后的旋转、滚动、弹跳以及最后稳定在桌面上的效果。下面是完整代码：

<canvas id="dice" width="200" height="200"></canvas>

const canvas = document.getElementById('dice');
const ctx = canvas.getContext('2d');

// 定义立方体的六个面
const faces = [
  { points: [[0, 0], [1, 0], [1, 1], [0, 1]], color: 'blue' }, // 面1
  { points: [[0, 0], [0, 1], [-1, 1], [-1, 0]], color: 'yellow' }, // 面2
  { points: [[0, 0], [-1, 0], [-1, -1], [0, -1]], color: 'green' }, // 面3
  { points: [[0, 0], [0, -1], [1, -1], [1, 0]], color: 'red' }, // 面4
  { points: [[0, 1], [1, 1], [1, 0], [0, 0]], color: 'orange' }, // 面5
  { points: [[0, -1], [-1, -1], [-1, 0], [0, 0]], color: 'purple' }, // 面6
];

// 常量定义
const G = 0.0005; // 重力加速度
const FRICTION = 0.99; // 摩擦系数
const ANGLE_THRESHOLD = 0.01; // 角度阈值
const SPEED_THRESHOLD = 0.01; // 速度阈值

// 骰子对象
const dice = {
  position: { x: 0, y: 0 },
  velocity: { x: 0, y: 0 },
  acceleration: { x: 0, y: G },
  angle: { x: 0, y: 0 },
  angularVelocity: { x: 0, y: 0 },
};

// 随机生成一个初速度
const speed = (Math.random() * 5 + 10) * (Math.random() > 0.5 ? 1 : -1);
dice.velocity.x = dice.velocity.y = speed;

// 旋转立方体的角度
let angle = 0;

// 检查骰子是否停止滚动
function isDiceStopped() {
  return Math.abs(dice.velocity.x) < SPEED_THRESHOLD && Math.abs(dice.velocity.y) < SPEED_THRESHOLD
    && Math.abs(dice.angularVelocity.x) < ANGLE_THRESHOLD && Math.abs(dice.angularVelocity.y) < ANGLE_THRESHOLD;
}

// 绘制立方体
function draw() {
  // 清空画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 保存当前画布状态
  ctx.save();

  // 平移坐标系到骰子的位置
  ctx.translate(canvas.width / 2 + dice.position.x, canvas.height / 2 + dice.position.y);

  // 旋转坐标系
  ctx.rotate(Math.PI / 180 * dice.angle.y);

  // 绘制立方体的每个面
  faces.forEach((face) => {
    // 绘制面的路径
    ctx.beginPath();
    ctx.moveTo(face.points[0][0] * 50, face.points[0][1] * 50);

    face.points.slice(1).forEach((point) => {
      ctx.lineTo(point[0] * 50, point[1] * 50);
    });

    ctx.closePath();
    ctx.fillStyle = face.color;
    ctx.fill();
  });

  // 恢复画布状态
  ctx.restore();

  // 更新骰子的状态
  dice.velocity.x += dice.acceleration.x;
  dice.velocity.y += dice.acceleration.y;
  dice.position.x += dice.velocity.x;
  dice.position.y += dice.velocity.y;

  // 模拟骰子的滚动
  dice.angularVelocity.x += (dice.velocity.y - dice.velocity.x) * G;
  dice.angularVelocity.x *= FRICTION;
  dice.angularVelocity.y += (dice.velocity.x - dice.velocity.y) * G;
  dice.angularVelocity.y *= FRICTION;
  dice.angle.x += dice.angularVelocity.x;
  dice.angle.y += dice.angularVelocity.y;

  // 循环动画
  if (!isDiceStopped()) {
    window.requestAnimationFrame(draw);
  } else {
    console.log('Stopped.');
  }
}

// 开始动画
draw();

上述代码基于上一步的基础上，首先定义了一个骰子对象，记录了骰子的位置、速度、加速度、旋转角度、角速度等状态。然后，我们随机生成一个初速度，模拟骰子掷出去的效果。

在绘制立方体的时候，我们先平移画布的坐标系到骰子的位置。然后，我们对坐标系进行旋转，使得骰子沿着x轴始终正面面向屏幕。最后，我们绘制立方体的每个面，使用fillStyle来设置面的颜色。

在骰子的状态更新过程中，我们首先更新骰子的位置和速度，模拟骰子的弹跳和滚动效果。然后，我们计算骰子的角加速度，并根据摩擦系数将其慢慢减少，模拟骰子旋转的摩擦效果。最后，我们计算骰子的旋转角度，并判断骰子是否已经停止滚动，如果还在滚动，则继续循环动画，否则输出停止信息。

在实时模拟骰子掷出去的过程中，我们模拟了骰子的旋转、滚动、弹跳等物理效果，并通过在HTML5 canvas模块中绘制立方体来展示3D掷骰子的效果。这是一个比较高级的动画效果，需要我们对JavaScript和HTML5 canvas的使用都有一定的掌握。