用Three.js构建令人惊叹的3D虚拟音乐键盘

2024-02-13 08:10:32

用 Three.js 奏响音乐世界的乐章

随着技术与艺术的完美融合，计算机图形技术已经成为音乐创作和游戏体验不可或缺的一部分。作为一名技术爱好者，我用 Three.js 成功打造了一个令人惊叹的 3D 虚拟音乐键盘，让您在计算机屏幕前也能尽情挥洒音乐才华。

构建 3D 场景，为音乐创作奠定基础

就像在现实中弹奏钢琴需要一个舞台一样，虚拟音乐键盘也需要一个场景作为载体。Three.js 中的场景是一个容器，可以容纳所有的 3D 元素，包括模型、灯光和摄像机。

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

为了让我们的音乐键盘栩栩如生，我们需要为场景添加灯光。我选择了平行光作为主要光源，并设置了适当的强度和颜色。

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

加载模型，让 87 个琴键跃然眼前

有了场景和灯光，我们就需要为我们的键盘模型搭台了。我使用 Three.js 的 GLTFLoader 加载了一个包含 87 个琴键的模型。

// 创建 GLTF 加载器
const loader = new THREE.GLTFLoader();

// 加载键盘模型
loader.load('keyboard.gltf', (gltf) => {
  scene.add(gltf.scene);
});

模型加载完成后，我们将其添加到场景中。此时，您已经可以在屏幕上看到 87 个钢琴键整齐排列。

添加交互功能，让键盘活起来

为了让键盘不仅仅是一个摆设，我们需要赋予它交互功能。我使用 Three.js 的 Raycaster 来检测用户点击的位置，并将其与对应的琴键关联起来。

// 创建射线投射器
const raycaster = new THREE.Raycaster();

// 监听鼠标点击事件
window.addEventListener('click', (event) => {
  // 将鼠标点击位置转换为射线
  const ray = raycaster.setFromCamera(mouse, camera);

  // 检测射线与琴键模型的交点
  const intersects = ray.intersectObjects(scene.children, true);

  // 如果检测到交点，则触发相应的音符
  if (intersects.length > 0) {
    const object = intersects[0].object;
    const note = object.userData.note;

    // 播放音符
    playNote(note);
  }
});