three实现三维粒子跟随音乐跳动音频可视化效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three实现三维粒子跟随音乐跳动音频可视化效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  


  
  
  
<style>
html, body {
        margin: 0;
        overflow: hidden;
        font-family: sans-serif;
        background: #13091B;
        height: 100%;
}
#three-container {
        position: absolute;
        left: 0;
        top: 0;
}
.container {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
}
.play-btn {
        color: #13091B;
        background: #007A99;
        display: inline-block;
        padding: 16px 48px;
        font-size: 18px;
        cursor: pointer;
        border-radius: 4px;
        letter-spacing: 0.1em;
        z-index: 1;
}
</style>

  
</head>

<body >
  <audio id="song" src="" style="display:none;"></audio>
<div class="container">
        <div class="play-btn">PLAY</div>
</div>
<div id="three-container"></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.72.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.72.js"></script>
      <script >
var mContainer;
var mCamera, mRenderer;
var mControls;

var mShadowColor = 0x13091B; //0x1B0914

var mScene;
var mLight;
var mLight2;
var mLight3;

var mUseAA = true;
var mParticleCount = 250000;
var mParticleSystem;

var mDuration;
var mPathLength = 32;

var mAudioElement = document.getElementById('song');
var mAnalyser;

var mPlayBtn = document.querySelector('.play-btn');
var mPlayBtnContainer = document.querySelector('.container');

mPlayBtn.addEventListener('click', function () {

  mAnalyser.context.resume().then(() => {
    console.log('Playback resumed successfully');
  });

  mPlayBtnContainer.style.display = 'none';
  mAudioElement.currentTime = 0;
  mAudioElement.play();

  mCamera.position.set(0, 0, 1200);
});
mAudioElement.addEventListener('ended', function () {
  mPlayBtnContainer.style.display = 'flex';
});


window.onload = function () {
  init();
};

function init() {
  initAudio();
  initTHREE();
  initControls();
  initParticleSystem();

  requestAnimationFrame(tick);
  window.addEventListener('resize', resize, false);
}

function initAudio() {
  mAudioElement.crossOrigin = "anonymous";
  mAudioElement.src = '//repo.bfw.wiki/bfwrepo/sound/63e1f2ab02799.mp3';

  mAnalyser = new SpectrumAnalyzer(mPathLength * 0.5, 0.80);
  mAnalyser.setSource(mAudioElement);
}

function initTHREE() {
  mRenderer = new THREE.WebGLRenderer({ antialias: mUseAA });
  mRenderer.setSize(window.innerWidth, window.innerHeight);
  //mRenderer.setClearColor(0xffffff);
  mRenderer.setClearColor(mShadowColor);

  mContainer = document.getElementById('three-container');
  mContainer.appendChild(mRenderer.domElement);

  mCamera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 5000);
  mCamera.position.set(0, 0, 1200);

  mScene = new THREE.Scene();

  mLight = new THREE.PointLight(0xffffff, 1, 1200, 2);
  mLight.position.set(0, 0, 0);
  mScene.add(mLight);

  mLight2 = new THREE.DirectionalLight(0xFF311F, 0.25);
  mLight2.position.set(0, 1, 1);
  mScene.add(mLight2);

  mLight3 = new THREE.DirectionalLight(0x007A99, 0.25);
  mLight3.position.set(0, 1, -1);
  mScene.add(mLight3);
}

function initControls() {
  mControls = new THREE.OrbitControls(mCamera, mRenderer.domElement);
  mControls.autoRotate = true;
  mControls.enableZoom = true;
  mControls.enablePan = false;
  mControls.constraint.minDistance = 10;
  mControls.constraint.maxDistance = 1200;
  mControls.constraint.minPolarAngle = Math.PI * 0.4;
  mControls.constraint.maxPolarAngle = Math.PI * 0.6;
}

function initParticleSystem() {
  var prefabGeometry = new THREE.PlaneGeometry(4, 4);
  var bufferGeometry = new THREE.BAS.PrefabBufferGeometry(prefabGeometry, mParticleCount);

  //bufferGeometry.computeVertexNormals();

  // generate additional geometry data
  var aDelayDuration = bufferGeometry.createAttribute('aDelayDuration', 2);
  var aPivot = bufferGeometry.createAttribute('aPivot', 3);
  var aAxisAngle = bufferGeometry.createAttribute('aAxisAngle', 4);
  var aColor = bufferGeometry.createAttribute('color', 3);

  var i, j, offset;

  // buffer time offset
  var delay;
  var duration;
  var prefabDelay = 0.00015;
  var vertexDelay = 0.0175;
  var minDuration = 32.0;
  var maxDuration = 56.........完整代码请登录后点击上方下载按钮下载查看