Three JS Editor를 사용한 Trippy 8D 오디오.

ThreeJS 편집기로 8D 오디오 효과를 만들어 보겠습니다. 8D 음악은 오디오 파일에 패닝, 리버브 및 기타 음향 효과를 추가하여 생성되지만 여기서는 threeJs "THREE.PositionalAudio"개체를 사용하여 동적 8D 오디오 효과를 생성합니다.

먼저 찾은 threeJs 편집기here를 실행합니다. 상자 개체를 추가하고 오른쪽 하단 모서리에 스크립트를 첨부합니다.



다음으로 구 또는 원하는 3d 개체를 추가하고 위치를 상자 오른쪽으로 약 2 단위로 설정합니다. 이제 편집기의 오른쪽 상단 모서리에 있는 SCENE 트리 보기의 상자 핸들 아래에 있는 구체 핸들을 드래그하여 상자의 자식으로 만들어야 합니다. 상자 3d 개체에서 수행한 것과 같이 구형 3d 개체에 스크립트를 추가합니다.



Box(상위) 스크립트:

player.listener = null

var tOld = 0
var rotX = 1
var rotY = 1
var rotZ = 1

function update( event ) {
    var ds = new Date().getSeconds()

    var dn = Date.now()

    if(tOld < dn) {

        tOld = dn+5000

        rotX = ds % 4 == 0 ? 1 : 0

        rotY = ds % 3 == 0 ? 1 : 0

        rotZ = ds % 2 == 0 ? 1 : 0

        console.log(rotX, rotY, rotZ)

        console.log(tOld, dn, ds)

    }

    this.rotateOnAxis(new THREE.Vector3(rotX,rotY,rotZ), deg2rad(.1))


}

function init(){

    player.listener = new THREE.AudioListener();
    console.log(player)
    this.add(player.listener)


}

먼저 player.listener를 null로 설정한 다음 초기화 후크에서 THREE.audioListener를 player.listener로 설정하여 구체 스크립트 자식에서 액세스할 수 있도록 합니다.

function init(){

    player.listener = new THREE.AudioListener();
    console.log(player)
    this.add(player.listener)


}

다음으로 tOld, rotX, rotY, rotZ를 초기화합니다. 나중에 무작위 회전에 이것을 사용할 것입니다. Date() 클래스에서 현재 초를 가져오고 Date.now() 함수에서 현재 밀리초를 얻습니다.

이전 시간(tOld)이 여전히 새 밀리초보다 크면 회전 설정을 조정하지 마십시오. 5초마다 갱신됩니다.

마지막으로 상자 3d 개체를 회전합니다.
this.rotateOnAxis(new THREE.Vector3(rotX,rotY,rotZ), deg2rad(.1))
Sphere 스크립트:

function init(){
    console.log('ball', player)

    var i = setInterval( () => {

        if(player.listener === null) return

        player.sound = new THREE.PositionalAudio( player.listener );

        this.add(player.sound)


        const audioLoader = new THREE.AudioLoader();
        audioLoader.load( 'https://cdn.jsdelivr.net/gh/ellenprobst/web-audio-api-with-Threejs@57582104/lib/TheWarOnDrugs.m4a', function( buffer ) {
            player.sound.setBuffer( buffer );
            player.sound.setLoop( false );
            player.sound.setVolume( 1 );
            player.sound.play();
        });
        console.log('loaded sound!')

        if(player.listener !== null){
            clearInterval(i)
        }   

    }, 1000)

}


function stop(){
    player.sound.stop()
}

스크립트가 수행하는 작업:

초기화 후크에서 다른 전역 변수가 될 player.sound에 player.listener 전역 변수를 THREE.PositionalAudio로 설정합니다. 오디오를 중지 후크에서 중지하려면 이것이 필요합니다. 그런 다음 오디오 파일을 로드하고 버퍼, 루프, 볼륨을 설정하고 마지막으로 재생합니다.

이제 자신의 mp4 또는 ogg 음악 파일로 8D 위치 오디오를 즐길 수 있습니다.

demo!을 확인하십시오.