用Three.js构建趣味升降机游戏，开启掘金成长之旅！

2023-04-30 20:58:54

Three.js的新手之旅：创建你的第一个电梯游戏

作为一名Three.js初学者，我迫不及待地想分享我的第一次冒险之旅——制作一个电梯游戏。虽然我最初只是照着代码编写，但这趟旅程让我对Three.js有了深入的了解。

Three.js：WebGL的强大助手

Three.js是一个JavaScript库，它利用WebGL来轻松创建和渲染3D图形。我的电梯游戏看似简单，却涵盖了Three.js的基础元素，包括场景、相机和光源。借助Three.js，我将创建电梯、乘客和楼层，并使用键盘控制电梯上下移动。

电梯游戏的玩法

想象一下这样一个场景：玩家负责控制电梯上下移动，将乘客送往各个楼层。电梯只能在一层停靠，每次只能运送一名乘客。乘客会在不同楼层随机出现，玩家必须及时将他们送往指定目的地。

深入探讨Three.js

Three.js是一个功能强大的库，能够实现各种3D效果。在我的电梯游戏中，我使用了Three.js来构建场景、相机、光源、电梯、乘客和楼层：

场景： 这是一个容器，容纳了所有对象。我创建了一个场景，并将其他元素添加到其中。
相机： 这是一个视角，让我们可以看到场景。我使用透视相机将场景呈现在屏幕上。
光源： 为了照亮场景，我加入了一个平行光，让物体变得可见。
电梯： 作为一个立方体，电梯是游戏的主要对象。
乘客： 作为球体，乘客是游戏中的次要对象。
楼层： 作为平面，楼层构成了游戏的背景。

挑战与收获

制作电梯游戏并非一帆风顺，但也让我学到了宝贵经验：

碰撞检测： 为了让乘客进入电梯，我需要检测两者之间的碰撞。Three.js的Raycaster类帮助我解决了这一难题。
键盘控制： 使用键盘State类，我可以通过键盘输入控制电梯的移动。
乘客随机出现： Math.random()函数让我得以在不同楼层随机生成乘客。

尽管制作电梯游戏是一个挑战，但它让我受益匪浅：

对Three.js的深入了解： 通过实践，我对Three.js各个组件有了更透彻的理解。
3D图形创建技巧： 我学会了使用Three.js创建场景、相机、光源、模型和动画。
碰撞检测实战： 我运用了Three.js的Raycaster类，实现了碰撞检测。
键盘控制的实现： 我学会了使用KeyboardState类进行键盘控制。

代码示例

// 场景
const scene = new THREE.Scene();

// 相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// 光源
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(0, 1, 0);
scene.add(light);

// 电梯
const elevator = new THREE.BoxGeometry(1, 2, 1);
const elevatorMaterial = new THREE.MeshLambertMaterial({color: 0x00ff00});
const elevatorMesh = new THREE.Mesh(elevator, elevatorMaterial);
elevatorMesh.position.y = 1;
scene.add(elevatorMesh);

// 乘客
const passenger = new THREE.SphereGeometry(0.5, 16, 16);
const passengerMaterial = new THREE.MeshLambertMaterial({color: 0xffff00});
const passengerMesh = new THREE.Mesh(passenger, passengerMaterial);
passengerMesh.position.y = 0.5;
scene.add(passengerMesh);

// 楼层
const floor = new THREE.PlaneGeometry(10, 10);
const floorMaterial = new THREE.MeshLambertMaterial({color: 0xcccccc});
const floorMesh = new THREE.Mesh(floor, floorMaterial);
floorMesh.rotation.x = -Math.PI / 2;
floorMesh.position.y = -0.5;
scene.add(floorMesh);

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

// 动画循环
function animate() {
  requestAnimationFrame(animate);

  // 键盘控制
  const keyboard = new THREEx.KeyboardState();
  if (keyboard.pressed("up")) {
    elevatorMesh.position.y += 0.1;
  } else if (keyboard.pressed("down")) {
    elevatorMesh.position.y -= 0.1;
  }

  // 碰撞检测
  const raycaster = new THREE.Raycaster();
  raycaster.setFromCamera(mouse, camera);
  const intersects = raycaster.intersectObject(passengerMesh);
  if (intersects.length > 0) {
    if (keyboard.pressed("space")) {
      passengerMesh.position.set(elevatorMesh.position.x, elevatorMesh.position.y + 1, elevatorMesh.position.z);
    }
  }

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

animate();