Threejs实现模型对接音乐节奏

baker_zhuang

已于 2024-11-22 11:13:59 修改

阅读量621

点赞数 16

分类专栏： ThreeJs 文章标签： Threejs

于 2024-03-13 11:29:14 首次发布

本文链接：https://blog.youkuaiyun.com/qq_26881073/article/details/136669443

版权

本文介绍了如何利用Three.js库结合音乐频谱分析，制作一个简单的3D场景，使小方块随音乐节奏变化位置和颜色，展示了从获取音乐数据到动态渲染的详细步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

昨天看到一个网站是2维的柱形图随着音乐节奏起伏，我突然想到二维形状可以起伏，三维应该也可以，最终原理应该都是将音乐频谱分解为数据，通过数据的切换不断地改变图形的形状来实现，因为找了分析音乐频谱的源码，解析完，再通过threejs的动画实现了3D场景下的模型随着音乐的节奏而变化，下面做详细步骤的说明：

先上个视频效果

threejs做音乐节奏

这只是做个简单的demo，主要是有了音乐的数据，后面的效果可以任意发挥，首先需要新建一个场景，还是之前的老样子，创建场景，相机，灯光，渲染器等，代码如下：

initScene(){
      scene = new THREE.Scene();
    },
    initCamera(){
      this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);
      this.camera.position.set(200,400,200);
    },
    initLight(){
      //添加两个平行光
      const directionalLight1 = new THREE.DirectionalLight(0xffffff, 1.5);
      directionalLight1.position.set(300,300,600)
      scene.add(directionalLight1);
      const directionalLight2 = new THREE.DirectionalLight(0xffffff, 1.5);
      directionalLight2.position.set(600,200,600)
      scene.add(directionalLight2);
    },
initFloor(){
      let floorGeometry = new THREE.BoxGeometry( 200,1,200);
      let floorMaterial = new THREE.MeshBasicMaterial({color:'#03133E'});
      let floor = new THREE.Mesh( floorGeometry, floorMaterial );
      floor.position.set(0,2,0)
      scene.add(floor)
    },
initRenderer(){
      this.renderer = new THREE.WebGLRenderer({ antialias: true });
      this.container = document.getElementById("container")
      this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);
      this.renderer.setClearColor('#AAAAAA', 1.0);
      this.container.appendChild(this.renderer.domElement);
    },
    initControl(){
      this.controls = new OrbitControls(this.camera, this.renderer.domElement);
      this.controls.enableDamping = true;
      this.controls.maxPolarAngle = Math.PI / 2.2;      // // 最大