玩转 Three.js：从零开发跳一跳小游戏（上）

用 Three.js 制作令人惊叹的跳一跳游戏

简介

准备好用 Three.js 踏上一段激动人心的旅程，制作一款令人着迷的跳一跳游戏。本指南将引导你完成每一步，从设置到游戏逻辑，让你亲身体验创建自己游戏的乐趣。

场景设置

首先，我们需要一个容器来容纳我们的游戏世界。这就是场景。通过 Scene() 函数创建一个场景，为游戏世界奠定基础。

const scene = new THREE.Scene();

摄像机设置

要看到场景，我们需要一个摄像机。使用 PerspectiveCamera() 函数创建摄像机，为玩家提供第一人称视角。

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

渲染器设置

现在，我们需要一个渲染器将场景呈现到屏幕上。使用 WebGLRenderer() 函数创建渲染器，让游戏世界栩栩如生。

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

光照设置

好的光照对任何游戏都至关重要。使用 AmbientLight() 函数创建环境光，为场景增添深度和真实感。

const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);

物体创建

是时候让我们的游戏角色和障碍物登场了。使用 BoxGeometry() 函数创建几何形状，然后使用 MeshLambertMaterial() 函数添加颜色和纹理。

// 玩家方块
const playerGeometry = new THREE.BoxGeometry(1, 1, 1);
const playerMaterial = new THREE.MeshLambertMaterial({ color: 0x00ff00 });
const player = new THREE.Mesh(playerGeometry, playerMaterial);
scene.add(player);

// 障碍物方块
const obstacleGeometry = new THREE.BoxGeometry(1, 1, 1);
const obstacleMaterial = new THREE.MeshLambertMaterial({ color: 0xff0000 });
const obstacle = new THREE.Mesh(obstacleGeometry, obstacleMaterial);
obstacle.position.x = 5;
scene.add(obstacle);

游戏逻辑

现在是让游戏动起来的时候了。使用 requestAnimationFrame() 函数创建游戏循环，不断更新场景并处理玩家输入。

function animate() {
  requestAnimationFrame(animate);

  // 更新游戏逻辑

  // 渲染场景
  renderer.render(scene, camera);
}

animate();

完成

恭喜！你的跳一跳游戏已经准备就绪。通过在控制台中运行 animate() 函数来启动它，体验你自己的游戏创作。

常见问题解答

1. 如何控制玩家？

你可以使用键盘事件监听器来捕获玩家输入并控制玩家的移动。

2. 如何创建更多障碍物？

你可以使用循环或数组创建多个障碍物并将其添加到场景中。

3. 如何让障碍物移动？

你可以使用 TweenMax 或其他库为障碍物添加移动动画。

4. 如何添加分数跟踪？

你可以使用 HTML 元素或 Three.js 的 TextGeometry 函数创建分数文本并将其添加到场景中。

5. 如何实现游戏结束条件？

你可以检查玩家是否与障碍物碰撞或超出场景边界，以触发游戏结束。