BufferGeometry
Object3D
Raycaster
Camera
CubeCamera
PerspectiveCamera
OrthographicCamera
StereoCamera
Clock
Curve
CurvePath
Path
Shape
ShapePath
ArrowHelper
AxesHelper
BoxHelper
Box3Helper
CameraHelper
DirectionalLightHelper
GridHelper
PolarGridHelper
HemisphereLightHelper
PlaneHelper
PointLightHelper
SkeletonHelper
SpotLightHelper
Light
PointLight
RectAreaLight
SpotLight
DirectionalLight
HemisphereLight
LightShadow
PointLightShadow
AnimationLoader
AudioLoader
BufferGeometryLoader
CompressedTextureLoader
CubeTextureLoader
DataTextureLoader
FileLoader
ImageBitmapLoader
ImageLoader
Loader
LoaderUtils
MaterialLoader
ObjectLoader
TextureLoader
LoadingManager
Material
Box2
Box3
Color
Cylindrical
Euler
Frustum
Interpolant
Line3
MathUtils
Matrix3
Matrix4
Plane
Quaternion
AnimationAction
AnimationClip
AnimationMixer
AnimationObjectGroup
AnimationUtils
keyframeTrack
PropertyBinding
PropertyMixer
BooleanKeyframeTrack
QuaternionKeyframeTrack
StringKeyframeTrack
Audio
AudioAnalyser
AudioContext
AudioListener
PositionalAudio

Audio.setNodeSource()

介绍

该方法是three.js中的Audio类的一部分。它用于设置音频节点的音频数据源。

音频节点或音频缓冲区节点是Web Audio API的概念,表示可以播放的音频源,比如从服务器下载的音频文件或从用户计算机上的硬盘读取的音频文件。

语法

audio.setNodeSource(audioNode)

参数

  • audioNode :Web Audio API中的音频节点。传递给该方法的节点必须是AudioBufferSourceNode或MediaElementAudioSourceNode中的一个。

用法

//创建一个新的音频对象
const audio = new THREE.Audio(listener);

//从URL加载音频文件
const audioLoader = new THREE.AudioLoader();
audioLoader.load('path/to/audio/file.mp3', function(buffer){
  //在回调函数中设置音频数据源
  const source = listener.context.createBufferSource();
  source.buffer = buffer;
  audio.setNodeSource(source);
});

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Audio.setNodeSource() example</title>
    <style>
        body{
            margin: 0;
        }
    </style>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script>
        //创建一个场景
        const scene = new THREE.Scene();
        
        //创建一个平面作为场景背景
        const geometry = new THREE.PlaneGeometry(10, 10);
        const material = new THREE.MeshBasicMaterial({color: 0xffffff});
        const plane = new THREE.Mesh(geometry, material);
        plane.rotation.x = -Math.PI/2;
        scene.add(plane);

        //创建一个Renderer
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        //创建一个相机
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
        camera.position.set(0, 1, -3);

        //创建一个监听器
        const listener = new THREE.AudioListener();
        camera.add(listener);

        //创建一个音频对象
        const audio = new THREE.Audio(listener);

        //从URL加载音频文件
        const audioLoader = new THREE.AudioLoader();
        audioLoader.load('https://threejs.org/examples/misc/sound.mp3', function(buffer){

            //创建一个音频节点
            const source = listener.context.createBufferSource();
            source.buffer = buffer;
            audio.setNodeSource(source);

            //播放音频
            audio.play();

        });

        //添加光源
        const light = new THREE.PointLight(0xffffff, 1, 100);
        light.position.set(0, 2, -2);
        scene.add(light);

        //渲染函数
        function render(){
            renderer.render(scene, camera);
            requestAnimationFrame(render);
        }
        requestAnimationFrame(render);

    </script>
</body>
</html>

注意事项

  • AudioBufferSourceNode和MediaElementAudioSourceNode是Web Audio API的两种不同的音频节点,它们具有不同的工作方式。了解他们的区别后,才能选择正确的事件源进行设置。
  • 此方法应该在同步Web Audio API中的加载音频文件的回调函数中进行调用。具体实现可以在Web Audio API教程中找到。
  • 如果你之前已经调用了setBuffer()方法,则需要在之前的基础上,使用此方法进行设置,因为setBuffer()设置的是AudioBuffer类型数据。