Three.js实现3D乒乓球小游戏(物理效果)

Three.js实现3D乒乓球小游戏(物理效果)攻略

简介

Three.js是一个轻量级的JavaScript库，它能够在网页上创建和渲染3D图形。这篇攻略将讲解如何使用Three.js实现3D乒乓球小游戏，并对其中的物理效果进行详细剖析。

准备工作

在开始之前，你需要准备以下工具和环境：

• 浏览器：推荐使用Chrome或Firefox浏览器；
• 代码编辑器：推荐使用Visual Studio Code；
• 本地服务器：你可以使用Python搭建一个本地服务器或者使用其他Web服务器。

创建场景和相机

首先，我们需要创建一个Three.js场景并添加一个透视相机。代码如下：

// 创建场景和相机
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
camera.position.z = 5;

变量scene和camera分别代表创建的场景和相机。相机的位置设置为(0, 0, 5)，这样可以让物体离我们更近，方便我们观察和交互。

创建乒乓球和桌子

接下来，我们需要创建一个乒乓球并添加到场景中。代码如下：

// 创建乒乓球和桌子
const ballRadius = 0.3;
const ballDetail = 32;
const ballGeometry = new THREE.SphereGeometry(ballRadius, ballDetail, ballDetail);
const ballMaterial = new THREE.MeshPhongMaterial({ color: 0xff0000 });
const ball = new THREE.Mesh(ballGeometry, ballMaterial);
ball.position.y = ballRadius;

const tableWidth = 3;
const tableHeight = 5;
const tableDepth = 0.5;
const tableGeometry = new THREE.BoxGeometry(
  tableWidth,
  tableHeight,
  tableDepth
);
const tableMaterial = new THREE.MeshPhongMaterial({ color: 0x00ff00 });
const table = new THREE.Mesh(tableGeometry, tableMaterial);
table.position.y = -tableHeight / 2;

变量ball和table分别代表创建的乒乓球和桌子。乒乓球使用SphereGeometry来创建，桌子则使用BoxGeometry来创建。SphereGeometry和BoxGeometry分别代表球体和立方体的三维几何模型，ballRadius和ballDetail则是乒乓球的半径和细节程度。

添加光源和阴影

为了让乒乓球和桌子更有真实感，我们需要添加一个光源和阴影。代码如下：

// 添加光源和阴影
const ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(0, 10, 5);
directionalLight.castShadow = true;
directionalLight.shadow.camera.near = 0.1;
directionalLight.shadow.camera.far = 100;
directionalLight.shadow.mapSize.width = 1024;
directionalLight.shadow.mapSize.height = 1024;
scene.add(directionalLight);

变量ambientLight和directionalLight分别代表环境光和方向光。环境光是无处不在的光，用于模拟天空光线的照射；方向光是从特定方向照射的光，可用于模拟太阳光线的照射。directionalLight还设置了阴影的相关属性。

添加物理效果

通过添加Cannon.js物理引擎，我们可以实现物理效果，并模拟球和球拍相互碰撞的关系。代码如下：

// 添加物理效果
const world = new CANNON.World();
world.gravity.set(0, -9.82, 0);
world.broadphase = new CANNON.NaiveBroadphase();

const ballShape = new CANNON.Sphere(ballRadius);
const ballBody = new CANNON.Body({ mass: 1 });
ballBody.addShape(ballShape);
ballBody.position.set(0, ballRadius, 0);
world.addBody(ballBody);

const planeShape = new CANNON.Plane();
const planeBody = new CANNON.Body({ mass: 0 });
planeBody.addShape(planeShape);
planeBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), -Math.PI / 2);
world.addBody(planeBody);

const timeStep = 1 / 60;
function animate() {
  requestAnimationFrame(animate);
  world.step(timeStep);

  ball.position.copy(ballBody.position);
}

animate();

新建一个Cannon.js物理引擎的实例world，设置重力为(0, -9.82, 0)，即常见的重力加速度的大小。world还设置了一个基础的碰撞检测器。接下来，我们分别创建了乒乓球和地面的刚体，并以球的中心点为基准进行位置设置，并将两个刚体添加到世界中。

由于物理引擎计算物理效果的帧率比Three.js库处理渲染的帧率更低，因此需要使用requestAnimationFrame循环，以保证物理引擎在每一帧都能计算出适当的效果，并将球的位置赋给Three.js库中的球体，从而实现物理仿真的效果。

我们可以通过world.addBody()将所需的物体添加至物理引擎中，并在animate()函数中进行循环，将物理引擎中的物体位置更新至Three.js库中的位置。

示例说明

下面我们来看两个示例，分别是更改球体材质的示例和添加球拍的示例。

示例一：更改球体材质

我们可以通过更改球体材质的方式，让乒乓球看起来更真实。

// 更改球体材质
const ballRadius = 0.3;
const ballDetail = 32;
const ballGeometry = new THREE.SphereGeometry(ballRadius, ballDetail, ballDetail);
const ballMaterial = new THREE.MeshStandardMaterial({ color: 0xff0000 });
const ball = new THREE.Mesh(ballGeometry, ballMaterial);

示例中，我们将球体材质从之前的MeshPhongMaterial改为了MeshStandardMaterial，修改后的球体材质更真实。

示例二：添加球拍

我们可以通过添加球拍的方式，让游戏更有趣，增加游戏的难度。

// 添加球拍
const paddleWidth = 1;
const paddleHeight = 0.2;
const paddleDepth = 1;
const paddleGeometry = new THREE.BoxGeometry(
  paddleWidth,
  paddleHeight,
  paddleDepth
);
const paddleMaterial = new THREE.MeshPhongMaterial({ color: 0x0000ff });
const paddle = new THREE.Mesh(paddleGeometry, paddleMaterial);
paddle.position.y = -tableHeight / 2 - paddleHeight / 2;
paddle.castShadow = true;
paddle.receiveShadow = true;
scene.add(paddle);

示例中，我们创建了一个球拍并将其添加到了场景中。球拍的大小设定为(1, 0.2, 1)，并将球拍的位置设置为桌子的下方，让球拍与桌面相切，在animate()函数中判断球体和球拍之间的碰撞情况，实现更加有趣的游戏效果。

总结

通过三个步骤，我们使用Three.js创建了乒乓球小游戏并添加了物理效果。同时，我们通过两个示例，更改了球体材质和添加了球拍，让游戏变得更加有趣。