Three-js 實現 3D 開放世界小遊戲：阿狸的多元宇宙

本文由好友 Dragonir 授權轉發

原文鏈接：https://juejin.cn/post/7081429595689320478

背景

2545 光年之外的開普勒 1028 星系，有一顆色彩斑斕的宜居星球 🌑，星際移民 👨‍🚀 必須穿戴基地發放的防輻射服才能生存。阿狸 🦊 駕駛星際飛行器 🚀 降臨此地，快幫它在限定時間內使用輪盤移動找到基地獲取防輻射服吧！

本文使用 Three.js + React + CANNON 技術棧，實現通過滑動屏幕控制模型在 3D 世界裏運動的 Low Poly 低多邊形風格小遊戲。本文主要涉及到的知識點包括：Three.js 陰影類型、創建粒子系統、cannon.js 基本用法、使用 cannon.js 高度場 Heightfield 創建地形、通過輪盤移動控制模型動畫等。

效果

• 遊戲玩法：點擊開始遊戲按鈕，通過操作屏幕底部輪盤來移動阿狸，在倒計時限定時間內找到基地。

• 主線任務：限定時間內找到庇護所。

• 支線任務：自由探索開放世界。

在線預覽：

• 👀 地址 1：https://3d-eosin.vercel.app/#/metaverse

• 👀 地址 2：https://dragonir.github.io/3d/#/metaverse

已適配:

• 💻 PC 端

• 📱 移動端

🚩 小提示：站得越高看得越遠，隱隱約約聽說基地位於初始位置的西面，開始時應該向左前方前進哦。

設計

遊戲流程如下圖所示：頁面加載完成後玩家 👨‍🚀 點擊開始按鈕，然後在限定時間內通過控制頁面底部輪盤 🕹 移動模型，找到目標基地所在的位置。尋找成功或失敗都會顯示結果頁 🏆，結果上面有兩個按鈕再試一次和自由探索，點擊再試一次時間會重置，然後重新回到起點開始倒計時。點擊自由探索則不在計時，玩家可以在 3D 開放世界裏操作模型自由探索。同時，遊戲內頁面也提供一個時光倒流按鈕，它的作用是玩家 👨‍🚀 可以在失敗前自己手動重置倒計時 ⏳，重新回到起點開始遊戲。

實現

加載資源

加載開發所需的必備資源：GLTFLoader 用於加載狐狸 🦊 和基地 🏠 模型、CANNON 是用於創建 3D 世界的物理引擎；CannonHelper 是對 CANNON 一些使用方法的封裝；JoyStick 用於創建通過監聽鼠標移動位置或觸碰屏幕產生的位移來控制模型移動的輪盤 🕹。

import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import CANNON from 'cannon';
import CannonHelper from './scripts/CannonHelper';
import JoyStick from './scripts/JoyStick';

頁面結構

頁面結構比較簡單，.webgl 用於渲染 WEBGL；.tool 是遊戲內的工具欄，用於重置遊戲和顯示一些提示語；.loading 是遊戲加載頁面，用來顯示遊戲加載進度、介紹遊戲規則、顯示遊戲開始按鈕；.result 是遊戲結果頁面，用於顯示遊戲成功或失敗結果，並提供再試一次和自由探索兩個按鈕 🔘。

(<div id="metaverse">
  <canvas className='webgl'></canvas>
  <div className='tool'>
    <div className='countdown'>{ this.state.countdown }</div>
    <button className='reset_button' onClick={this.resetGame}>時光倒流</button>
    <p className='hint'>站得越高看得越遠</p>
  </div>
  { this.state.showLoading ? (<div className='loading'>
    <div className='box'>
      <p className='progress'>{this.state.loadingProcess} %</p>
      <p className='description'>遊戲描述</p>
      <button className='start_button' style={{'visibility': this.state.loadingProcess === 100 ? 'visible' : 'hidden'}} onClick={this.startGame}>開始遊戲</button>
    </div>
  </div>) : '' }
  { this.state.showResult ? (<div className='result'>
    <div className='box'>
      <p className='text'>{ this.state.resultText }</p>
      <button className='button' onClick={this.resetGame}>再試一次</button>
      <button className='button' onClick={this.discover}>自由探索</button>
    </div>
  </div>) : '' }
</div>)

數據初始化

數據變量包括加載進度、是否顯示加載頁面、是否顯示結果頁、結果頁文案、倒計時、是否開啓自由探索等。

state = {
  loadingProcess: 0,
  showLoading: true,
  showResult: false,
  resultText: '失敗',
  countdown: 60,
  freeDiscover: false
}

場景初始化

初始化場景 🏔、相機 📷、光源 💡。

const renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector('canvas.webgl'),
  antialias: true,
  alpha: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
const scene = new THREE.Scene();
// 添加主相機
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, .01, 100000);
camera.position.set(1, 1, -1);
camera.lookAt(scene.position);
// 添加環境光
const ambientLight = new THREE.AmbientLight(0xffffff, .4);
scene.add(ambientLight)
// 添加平行光
var light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(1, 1, 1).normalize();
scene.add(light);

💡 Three.js 陰影類型

本文使用了 THREE.PCFSoftShadowMap 以開啓效果更加柔和的陰影，Three.js 提供以下幾種陰影類型：

• THREE.BasicShadowMap：提供未經過濾的陰影貼圖，性能最快，但質量最低。

• THREE.PCFShadowMap：使用 Percentage-Closer Filtering (PCF) 算法過濾陰影貼圖，是默認類型。

• THREE.PCFSoftShadowMap：使用 PCF 算法過濾的更加柔和的陰影貼圖，尤其是在使用低分辨率陰影貼圖時。

• THREE.VSMShadowMap：使用方差陰影貼圖 VSM 算法過濾的陰影貼圖。使用 VSMShadowMap 時，所有陰影接收者也會投射陰影。

創建世界

使用 Cannon.js 初始化物理世界 🌏。

// 初始化物理世界
const world = new CANNON.World();
// 在多個步驟的任意軸上測試剛體的碰撞
world.broadphase = new CANNON.SAPBroadphase(world);
// 設置物理世界的重力爲沿y軸向上-10米每二次方秒
world.gravity.set(0, -10, 0);
// 創建默認聯繫材質
world.defaultContactMaterial.friction = 0;
const groundMaterial = new CANNON.Material("groundMaterial");
const wheelMaterial = new CANNON.Material("wheelMaterial");
const wheelGroundContactMaterial = new CANNON.ContactMaterial(wheelMaterial, groundMaterial, {
  // 摩擦係數
  friction: 0,
  // 恢復係數
  restitution: 0,
  // 接觸剛度
  contactEquationStiffness: 1000
});
world.addContactMaterial(wheelGroundContactMaterial);

💡 Cannon.js

Cannon.js 是用 JavaScript 實現的物理引擎庫，可以與任何支持瀏覽器的渲染或遊戲引擎，可以用於模擬剛體，實現 3D 世界 🌏 中更加真實的物理形式的移動和交互。更多 Cannon.js 相關 API 文檔和示例可以參考文章末尾鏈接。

創建星空

創建 1000 個粒子用於模型星空 ✨，並將它們添加到場景中。本示例中通過着色器形式創建粒子，這樣更有利於 GPU 渲染效率。

const textureLoader = new THREE.TextureLoader();
const shaderPoint = THREE.ShaderLib.points;
const uniforms = THREE.UniformsUtils.clone(shaderPoint.uniforms);
uniforms.map.value = textureLoader.load(snowflakeTexture);
for (let i = 0; i < 1000; i++) {
  sparkGeometry.vertices.push(new THREE.Vector3());
}
const sparks = new THREE.Points(new THREE.Geometry(), new THREE.PointsMaterial({
  size: 2,
  color: new THREE.Color(0xffffff),
  map: uniforms.map.value,
  blending: THREE.AdditiveBlending,
  depthWrite: false,
  transparent: true,
  opacity: 0.75
}));
sparks.scale.set(1, 1, 1);
sparks.geometry.vertices.map(spark => {
  spark.y = randnum(30, 40);
  spark.x = randnum(-500, 500);
  spark.z = randnum(-500, 500);
  return true;
});
scene.add(sparks);

創建地形

通過 CANNON.Heightfield 高度場創建 128 x 128 x 60 可視化漸變色地形。地形的凹凸起伏狀態是通過以下高度圖 HeightMap 實現，它是一張黑白圖片 🖼，通過像素點的顏色深淺來記錄高度信息，根據高度圖數據信息創建地形網格。可通過文章末尾提供的鏈接在線生成隨機高度圖。地形生成完成並將它添加到世界 🌏 中，然後在 animate 方法中頁面重繪時調用 check 方法，用於檢測和更新模型在地形上的位置。

const cannonHelper = new CannonHelper(scene);
var sizeX = 128, sizeY = 128, minHeight = 0, maxHeight = 60, check = null;
Promise.all([
  // 加載高度圖
  img2matrix.fromUrl(heightMapImage, sizeX, sizeY, minHeight, maxHeight)(),
]).then(function (data) {
  var matrix = data[0];
  // 地形體
  const terrainBody = new CANNON.Body({ mass: 0 });
  // 地形形狀
  const terrainShape = new CANNON.Heightfield(matrix, { elementSize: 10 });
  terrainBody.addShape(terrainShape);
  // 地形位置
  terrainBody.position.set(-sizeX * terrainShape.elementSize / 2, -10, sizeY * terrainShape.elementSize / 2);
  // 設置從軸角度
  terrainBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), -Math.PI / 2);
  world.add(terrainBody);
  // 將生成的地形剛體可視化
  cannonHelper.addVisual(terrainBody, 'landscape');
  var raycastHelperGeometry = new THREE.CylinderGeometry(0, 1, 5, 1.5);
  raycastHelperGeometry.translate(0, 0, 0);
  raycastHelperGeometry.rotateX(Math.PI / 2);
  var raycastHelperMesh = new THREE.Mesh(raycastHelperGeometry, new THREE.MeshNormalMaterial());
  scene.add(raycastHelperMesh);
  // 使用 Raycaster檢測並更新模型在地形上的位置
  check = () => {
    var raycaster = new THREE.Raycaster(target.position, new THREE.Vector3(0, -1, 0));
    var intersects = raycaster.intersectObject(terrainBody.threemesh.children[0]);
    if (intersects.length > 0) {
      raycastHelperMesh.position.set(0, 0, 0);
      raycastHelperMesh.lookAt(intersects[0].face.normal);
      raycastHelperMesh.position.copy(intersects[0].point);
    }
    target.position.y = intersects && intersects[0] ? intersects[0].point.y + 0.1 : 30;
    var raycaster2 = new THREE.Raycaster(shelterLocation.position, new THREE.Vector3(0, -1, 0));
    var intersects2 = raycaster2.intersectObject(terrainBody.threemesh.children[0]);
    shelterLocation.position.y = intersects2 && intersects2[0] ? intersects2[0].point.y + .5 : 30;
    shelterLight.position.y = shelterLocation.position.y + 50;
    shelterLight.position.x = shelterLocation.position.x + 5
    shelterLight.position.z = shelterLocation.position.z;
  }
});

💡 CANNON.Heightfield

本示例中凹凸不平的地形是通過 CANNON.Heightfield 實現的，它是 Cannon.js 物理引擎的高度場。在物理學中把某個物理量在空間中一個區域內的分佈稱爲場，高度場就是與高度相關的場。Heightfield 的高度就是關於兩個變量的函數，可以表達爲 HEIGHT(i,j)。

Heightfield(data, options)

• data 是一個 y值 數組，將用於構建地形。

• options 是一個配置項，有三個可配置參數：

• minValue 是數據數組中數據點的最小值。如果未給出，將自動計算。

• maxValue 最大值。

• elementSize 是 x軸 方向上數據點之間的世界間距。

加載進度管理

使用 LoadingManager 管理加載進度，當頁面模型加載完成之後，加載進度頁面顯示開始遊戲菜單。

const loadingManager = new THREE.LoadingManager();
loadingManager.onProgress = async (url, loaded, total) => {
  this.setState({ loadingProcess: Math.floor(loaded / total * 100) });
};

創建基地模型

加載基地模型 🏠 前先創建一個 shelterLocation 網格用來放置基地模型，該網格對象還用於後續地形檢測。然後使用 GLTFLoader 加載基地模型，然後把它添加到 shelterLocation 網格上。最後添加一個 PointLight 💡 給基地模型添加彩色點光源，添加一個 DirectionalLight 💡 用於生成陰影。

const shelterGeometry = new THREE.BoxBufferGeometry(0.15, 2, 0.15);
const shelterLocation = new THREE.Mesh(shelterGeometry, new THREE.MeshNormalMaterial({
  transparent: true,
  opacity: 0
}));
shelterLocation.position.set(this.shelterPosition.x, this.shelterPosition.y, this.shelterPosition.z);
shelterLocation.rotateY(Math.PI);
scene.add(shelterLocation);
// 加載模型
gltfLoader.load(Shelter, mesh => {
  mesh.scene.traverse(child => {
    child.castShadow = true;
  });
  mesh.scene.scale.set(5, 5, 5);
  mesh.scene.position.y = -.5;
  shelterLocation.add(mesh.scene)
});
// 添加光源
const shelterPointLight = new THREE.PointLight(0x1089ff, 2);
shelterPointLight.position.set(0, 0, 0);
shelterLocation.add(shelterPointLight);
const shelterLight = new THREE.DirectionalLight(0xffffff, 0);
shelterLight.position.set(0, 0, 0);
shelterLight.castShadow = true;
shelterLight.target = shelterLocation;
scene.add(shelterLight);

創建阿狸模型

狐狸 🦊 模型的加載也是類似的，需要先創建一個目標網格，後續用於地形檢測，然後把狐狸 🦊 模型添加到目標網格上。狐狸 🦊 模型完成加載後，需要保存它的 clip1、 clip1 兩種動畫效果，後續需要通過判斷輪盤 🕹 的移動狀態來判斷播放哪種動畫。最後添加一個 DirectionalLight 💡 光源來產生陰影。

var geometry = new THREE.BoxBufferGeometry(.5, 1, .5);
geometry.applyMatrix4(new THREE.Matrix4().makeTranslation(0, .5, 0));
const target = new THREE.Mesh(geometry, new THREE.MeshNormalMaterial({
  transparent: true,
  opacity: 0
}));
scene.add(target);

var mixers = [], clip1, clip2;
const gltfLoader = new GLTFLoader(loadingManager);
gltfLoader.load(foxModel, mesh => {
  mesh.scene.traverse(child => {
    if (child.isMesh) {
      child.castShadow = true;
      child.material.side = THREE.DoubleSide;
    }
  });
  var player = mesh.scene;
  player.position.set(this.playPosition.x, this.playPosition.y, this.playPosition.z);
  player.scale.set(.008, .008, .008);
  target.add(player);
  var mixer = new THREE.AnimationMixer(player);
  clip1 = mixer.clipAction(mesh.animations[0]);
  clip2 = mixer.clipAction(mesh.animations[1]);
  clip2.timeScale = 1.6;
  mixers.push(mixer);
});

const directionalLight = new THREE.DirectionalLight(new THREE.Color(0xffffff), .5);
directionalLight.position.set(0, 1, 0);
directionalLight.castShadow = true;
directionalLight.target = target;
target.add(directionalLight);

控制阿狸運動

使用輪盤控制器移動阿狸 🦊 模型時，實時更新模型的方向，若輪盤產生位移，更新模型位移並播放奔跑動畫，否則播放禁止動畫。同時根據模型目標的位置，實時更新相機 📷 的位置，生成第三人稱視角。輪盤移動控制模型移動功能是通過引入 JoyStick 類來實現，它的主要實現原理是監聽鼠標或點觸位置，然後通過計算映射到模型位置變化上。

var setup = { forward: 0, turn: 0 };
new JoyStick({ onMove: (forward, turn) => {
  setup.forward = forward;
  setup.turn = -turn;
}});
const updateDrive = (forward = setup.forward, turn = setup.turn) => {
  let maxSteerVal = 0.05;
  let maxForce = .15;
  let force = maxForce * forward;
  let steer = maxSteerVal * turn;
  if (forward !== 0) {
    target.translateZ(force);
    clip2 && clip2.play();
    clip1 && clip1.stop();
  } else {
    clip2 && clip2.stop();
    clip1 && clip1.play();
  }
  target.rotateY(steer);
}
// 生成第三人稱視角
const followCamera = new THREE.Object3D();
followCamera.position.copy(camera.position);
scene.add(followCamera);
followCamera.parent = target;
const updateCamera = () => {
  if (followCamera) {
    camera.position.lerp(followCamera.getWorldPosition(new THREE.Vector3()), 0.1);
    camera.lookAt(target.position.x, target.position.y + .5, target.position.z);
  }
}

🚩 輪盤控制器 JoyStick 類具體實現可參考文章末尾 Codepen 鏈接 [5]。

動畫更新

在頁面重繪動畫中，更新相機、模型狀態、Cannon 世界、場景渲染等。

var clock = new THREE.Clock();
var lastTime;
var fixedTimeStep = 1.0 / 60.0;
const animate = () => {
  updateCamera();
  updateDrive();
  let delta = clock.getDelta();
  mixers.map(x => x.update(delta));
  let now = Date.now();
  lastTime === undefined && (lastTime = now);
  let dt = (Date.now() - lastTime) / 1000.0;
  lastTime = now;
  world.step(fixedTimeStep, dt);
  cannonHelper.updateBodies(world);
  check && check();
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
};

頁面縮放適配

頁面產生縮放時，更新渲染場景 🏔 和相機 📷。

window.addEventListener('resize', () => {
  var width = window.innerWidth, height = window.innerHeight;
  renderer.setSize(width, height);
  camera.aspect = width / height;
  camera.updateProjectionMatrix();
}, false);

到此，遊戲三維世界 🌏 已經全部實現完畢了。

添加遊戲邏輯

根據前面的遊戲流程設計，現在添加遊戲邏輯，開始遊戲時重置數據並開始 60s 倒計時 ⏳ ；重置遊戲時將阿狸 🦊 位置、方向及相機位置設置爲初始狀態；自由探索時開啓自由探索狀態，並清除倒計時。⏳

startGame = () => {
  this.setState({
    showLoading : false,
    showResult: false,
    countdown: 60,
    resultText: '失敗',
    freeDiscover: false
  },() => {
    this.interval = setInterval(() => {
      if (this.state.countdown > 0) {
        this.setState({
          countdown: --this.state.countdown
        });
      } else {
        clearInterval(this.interval)
        this.setState({
          showResult: true
        });
      }
    }, 1000);
  });
}
resetGame = () => {
  this.player.position.set(this.playPosition.x, this.playPosition.y, this.playPosition.z);
  this.target.rotation.set(0, 0, 0);
  this.target.position.set(0, 0, 0);
  this.camera.position.set(1, 1, -1);
  this.startGame();
}
discover = () => {
  this.setState({
    freeDiscover: true,
    showResult: false,
    countdown: 60
  }, () => {
    clearInterval(this.interval);
  });
}

毛玻璃效果

Loading 頁面、結果頁面以及回到過去按鈕都採用了毛玻璃效果樣式 💧，通過以下幾行樣式代碼，即可實現驚豔的毛玻璃。

background rgba(0, 67, 170, .5)
backdrop-filter blur(10px)
filter drop-shadow(0px 1px 1px rgba(0, 0, 0, .25))

總結

本文涉及到的新知識點主要包括：

• Three.js 陰影類型

• 創建粒子系統

• cannon.js 基本用法

• 使用 cannon.js 高度場 Heightfield 創建地形

• 通過輪盤移動控制模型動畫

附錄

[1]

Three.js 火焰效果實現艾爾登法環動態 logo: https://juejin.cn/post/7077726955528781832

[2]

Three.js 實現神奇的 3D 文字懸浮效果: https://juejin.cn/post/7072899771819622413

[3]

Three.js 實現讓二維圖片具有 3D 效果: https://juejin.cn/post/7067344398912061454

[4]

Three.js 實現 2022 冬奧主題 3D 趣味頁面，冰墩墩 🐼: https://juejin.cn/post/7060292943608807460

[5]

Three.js 製作一個專屬 3D 獎牌: https://juejin.cn/post/7055079293247815711

[6]

Three.js 實現虎年春節 3D 創意頁面: https://juejin.cn/post/7051745314914435102

[7]

Three.js 實現臉書元宇宙 3D 動態 Logo: https://juejin.cn/post/7031893833163997220

[8]

Three.js 實現 3D 全景偵探小遊戲: https://juejin.cn/post/7042298964468564005

[9]

Three.js 實現炫酷的酸性風格 3D 頁面: https://juejin.cn/post/7012996721693163528

[10]

threejs.org: https://threejs.org/

[11]

cannonjs.org: http://www.cannonjs.org/

[12]

heightmap-generator: http://heightmap-generator.com/

[13]

three.js cannon.js 物理引擎之 Heightfield: https://www.mrguo.link/article?id=53

[14]

Joggin' version 0.1: https://codepen.io/b29/pen/JjyJWEg

iCSS，不止於 CSS，如果你也對各種新奇有趣的前端（CSS）知識感興趣，歡迎關注 。同時如果你有任何想法疑問，或者也想入羣參與大前端技術討論，圍觀答疑解惑，共同成長進步，可以關注公衆號加我微信，拉你入羣：

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/TgXJNPWPHxAZT1Z8-zT_Ag