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

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

代码语言：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);
  //mR.........完整代码请登录后点击上方下载按钮下载查看