Threejs实现音乐节奏表演

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

这只是做个简单的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;      // // 最大角度
    },
initAnimate() {
      requestAnimationFrame(this.initAnimate);
      this.renderer.render(scene, this.camera);
}

然后在地板上放小方块，如果直接循环放置会放在同一个位置重叠，因为这里要在循环里控制每个小方块之间的距离，大概意思就是每个小方块长宽高为10，每个小方块间隔1，且每铺满11个小方