Arranjo simples de carregamento e reprodução de três.js (webgl) sons básicos de três
contente
Arranjo simples de carregamento e reprodução de três.js (webgl) sons básicos de três
2. Três elementos para realizar a reprodução de áudio em três
3. TRÊS.Reprodutor geral de áudio (reprodução sem posição)
5. Analisador de áudio AudioAnalyser (obter dados de som, realizar operações de som visual, etc.)
1. Breve introdução
Algum conhecimento desenvolvido pela Three js é conveniente para encontrar problemas semelhantes no período posterior, e pode ser verificado e usado a tempo.
Esta seção apresenta que som e música em three.js ( webgl ) são indispensáveis, carregamento e reprodução de áudio, aqui está uma breve introdução, se houver alguma deficiência, por favor, aponte, ou se você tiver um método melhor, bem-vindo para deixar um mensagem.
2. Três elementos para realizar a reprodução de áudio em três
Para obter a reprodução de som no Three js, geralmente você precisa usar três elementos (três partes) no Three:
1. AudioListener, ouvinte de áudio, ou seja, os ouvidos que parecem ouvir o som
2. Áudio, que é o que chamamos de fonte de som todos os dias
3, AudioLoader, carregador de áudio, usado para carregar os arquivos de áudio que precisamos reproduzir
Threejs fornece uma série de APIs relacionadas a áudio: Audio Audio , Positional Audio PositionalAudio , Listener AudioListener , Audio Analyzer AudioAnalyser , Audio Loader AudioLoader .
As classes Threejs, como áudio
Audioe áudio posicional,PositionalAudiosão essencialmente encapsulamentos da API de áudio da Web nativa .AudioListener usa um ouvinte virtual para representar todos os efeitos sonoros relacionados à posição e não posicionais na cena.
Um programa three.js geralmente cria um AudioListener. É um parâmetro obrigatório do construtor de entidades de áudio, como Audio e PositionalAudio.
Na maioria casos, O objeto ouvinte é um subobjeto da câmera.A transformação 3D da câmera representa a transformação 3D do ouvinte.
3. THREE.Audio Reprodutor geral (reprodução não posicional)
THREE.AudioCarregue um trecho de áudio para reprodução por meio de um player geral . O efeito de reprodução de áudio não é afetado pelo local específico. Geralmente, ele pode ser usado para a música de fundo global de uma cena 3D .
// 创建一个 AudioListener 并将其添加到 camera 中
const listener = new THREE.AudioListener();
camera.add( listener );
// 创建一个全局 audio 源
const sound = new THREE.Audio( listener );
// 加载一个 sound 并将其设置为 Audio 对象的缓冲区
const audioLoader = new THREE.AudioLoader();
audioLoader.load( 'sounds/ambient.ogg', function( buffer ) {
sound.setBuffer( buffer );
sound.setLoop( true );
sound.setVolume( 0.5 );
sound.play();
});4. THREE.PositionalAudio Reprodutor de posição (um reprodutor de som mais realista, quanto mais alto o som ao entrar, menor o som ao sair)
Na vida real, o efeito de ouvir o som é afetado pela posição e ângulo da fonte sonora em relação ao ouvinte. A posição da fonte de áudio muda e o som ouvido muda, como o nível de volume. O Threejs fornece um THREE.Audioáudio posicional de API THREE.PositionalAudiodiferente do áudio não posicional. O efeito de reprodução de áudio criado pelo áudio posicional THREE.PositionalAudiopode imitar os efeitos sonoros de pessoas que ouvem diferentes fontes de áudio posicionais na natureza.
// create an AudioListener and add it to the camera
const listener = new THREE.AudioListener();
camera.add( listener );
// create the PositionalAudio object (passing in the listener)
const sound = new THREE.PositionalAudio( listener );
// load a sound and set it as the PositionalAudio object's buffer
const audioLoader = new THREE.AudioLoader();
audioLoader.load( 'sounds/song.ogg', function( buffer ) {
sound.setBuffer( buffer );
sound.setRefDistance( 20 );
sound.play();
});
// create an object for the sound to play from
const sphere = new THREE.SphereGeometry( 20, 32, 16 );
const material = new THREE.MeshPhongMaterial( { color: 0xff2200 } );
const mesh = new THREE.Mesh( sphere, material );
scene.add( mesh );
// finally add the sound to the mesh
mesh.add( sound );5. Analisador de áudio AudioAnalyser (obter dados de som, realizar operações de som visual, etc.)
Crie o objeto AudioAnalyser, use AnalyserNode para analisar dados de áudio.
Exemplos de código baseados em Threejs GitHub - mrdoob/three.js: JavaScript 3D Library.
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webaudio - visualizer</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link type="text/css" rel="stylesheet" href="main.css">
<script id="vertexShader" type="x-shader/x-vertex">
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = vec4( position, 1.0 );
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
uniform sampler2D tAudioData;
varying vec2 vUv;
void main() {
vec3 backgroundColor = vec3( 0.125, 0.125, 0.125 );
vec3 color = vec3( 1.0, 1.0, 0.0 );
float f = texture2D( tAudioData, vec2( vUv.x, 0.0 ) ).r;
float i = step( vUv.y, f ) * step( f - 0.0125, vUv.y );
gl_FragColor = vec4( mix( backgroundColor, color, i ), 1.0 );
}
</script>
</head>
<body>
<div id="overlay">
<button id="startButton">Play</button>
</div>
<div id="container"></div>
<div id="info">
<a href="https://threejs.org" target="_blank" rel="noopener noreferrer">three.js</a> webaudio - visualizer<br/>
music by <a href="http://www.newgrounds.com/audio/listen/376737" target="_blank" rel="noopener">skullbeatz</a>
</div>
<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "../build/three.module.js"
}
}
</script>
<script type="module">
import * as THREE from 'three';
let scene, camera, renderer, analyser, uniforms;
const startButton = document.getElementById( 'startButton' );
startButton.addEventListener( 'click', init );
function init() {
const fftSize = 128;
//
const overlay = document.getElementById( 'overlay' );
overlay.remove();
//
const container = document.getElementById( 'container' );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0x000000 );
renderer.setPixelRatio( window.devicePixelRatio );
container.appendChild( renderer.domElement );
scene = new THREE.Scene();
camera = new THREE.Camera();
//
const listener = new THREE.AudioListener();
const audio = new THREE.Audio( listener );
const file = './sounds/376737_Skullbeatz___Bad_Cat_Maste.mp3';
if ( /(iPad|iPhone|iPod)/g.test( navigator.userAgent ) ) {
const loader = new THREE.AudioLoader();
loader.load( file, function ( buffer ) {
audio.setBuffer( buffer );
audio.play();
} );
} else {
const mediaElement = new Audio( file );
mediaElement.play();
audio.setMediaElementSource( mediaElement );
}
analyser = new THREE.AudioAnalyser( audio, fftSize );
//
const format = ( renderer.capabilities.isWebGL2 ) ? THREE.RedFormat : THREE.LuminanceFormat;
uniforms = {
tAudioData: { value: new THREE.DataTexture( analyser.data, fftSize / 2, 1, format ) }
};
const material = new THREE.ShaderMaterial( {
uniforms: uniforms,
vertexShader: document.getElementById( 'vertexShader' ).textContent,
fragmentShader: document.getElementById( 'fragmentShader' ).textContent
} );
const geometry = new THREE.PlaneGeometry( 1, 1 );
const mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
//
window.addEventListener( 'resize', onWindowResize );
animate();
}
function onWindowResize() {
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
analyser.getFrequencyData();
uniforms.tAudioData.value.needsUpdate = true;
renderer.render( scene, camera );
}
</script>
</body>
</html>