master

分支 (1)

管理

管理

master

verge3d-code-examples
/
webaudio_sandbox.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Verge3D webaudio - sandbox</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">
  </head>
  <body>
    <div id="overlay">
      <button id="startButton">Play</button>
    </div>
    <div id="info">
      <a href="https://www.soft8soft.com/verge3d" target="_blank" rel="noopener">Verge3D</a> webaudio - sandbox<br/>
      music by <a href="http://www.newgrounds.com/audio/listen/358232" target="_blank" rel="noopener">larrylarrybb</a>,
      <a href="http://www.newgrounds.com/audio/listen/376737" target="_blank" rel="noopener">skullbeatz</a> and
      <a href="http://opengameart.org/content/project-utopia-seamless-loop" target="_blank" rel="noopener">congusbongus</a><br/><br/>
      navigate with WASD / arrows / mouse
    </div>

    <script type="module">

      import * as v3d from '../build/v3d.module.js';

      import { GUI } from './jsm/libs/dat.gui.module.js';

      import { FirstPersonControls } from './jsm/controls/FirstPersonControls.js';

      let camera, controls, scene, renderer, light;

      let material1, material2, material3;

      let analyser1, analyser2, analyser3;

      const clock = new v3d.Clock();

      const startButton = document.getElementById('startButton');
      startButton.addEventListener('click', init);

      function init() {

        const overlay = document.getElementById('overlay');
        overlay.remove();

        camera = new v3d.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
        camera.position.set(0, 25, 0);

        const listener = new v3d.AudioListener();
        camera.add(listener);

        scene = new v3d.Scene();
        scene.fog = new v3d.FogExp2(0x000000, 0.0025);

        light = new v3d.DirectionalLight(0xffffff);
        light.position.set(0, 0.5, 1).normalize();
        scene.add(light);

        const sphere = new v3d.SphereBufferGeometry(20, 32, 16);

        material1 = new v3d.MeshPhongMaterial({ color: 0xffaa00, flatShading: true, shininess: 0 });
        material2 = new v3d.MeshPhongMaterial({ color: 0xff2200, flatShading: true, shininess: 0 });
        material3 = new v3d.MeshPhongMaterial({ color: 0x6622aa, flatShading: true, shininess: 0 });

        // sound spheres

        const audioLoader = new v3d.AudioLoader();

        const mesh1 = new v3d.Mesh(sphere, material1);
        mesh1.position.set(- 250, 30, 0);
        scene.add(mesh1);

        const sound1 = new v3d.PositionalAudio(listener);
        audioLoader.load('sounds/358232_j_s_song.ogg', function(buffer) {

          sound1.setBuffer(buffer);
          sound1.setRefDistance(20);
          sound1.play();

        });
        mesh1.add(sound1);

        //

        const mesh2 = new v3d.Mesh(sphere, material2);
        mesh2.position.set(250, 30, 0);
        scene.add(mesh2);

        const sound2 = new v3d.PositionalAudio(listener);
        audioLoader.load('sounds/376737_Skullbeatz___Bad_Cat_Maste.ogg', function(buffer) {

          sound2.setBuffer(buffer);
          sound2.setRefDistance(20);
          sound2.play();

        });
        mesh2.add(sound2);

        //

        const mesh3 = new v3d.Mesh(sphere, material3);
        mesh3.position.set(0, 30, - 250);
        scene.add(mesh3);

        const sound3 = new v3d.PositionalAudio(listener);
        const oscillator = listener.context.createOscillator();
        oscillator.type = 'sine';
        oscillator.frequency.setValueAtTime(144, sound3.context.currentTime);
        oscillator.start(0);
        sound3.setNodeSource(oscillator);
        sound3.setRefDistance(20);
        sound3.setVolume(0.5);
        mesh3.add(sound3);

        // analysers

        analyser1 = new v3d.AudioAnalyser(sound1, 32);
        analyser2 = new v3d.AudioAnalyser(sound2, 32);
        analyser3 = new v3d.AudioAnalyser(sound3, 32);

        // global ambient audio

        const sound4 = new v3d.Audio(listener);
        audioLoader.load('sounds/Project_Utopia.ogg', function(buffer) {

          sound4.setBuffer(buffer);
          sound4.setLoop(true);
          sound4.setVolume(0.5);
          sound4.play();

        });

        // ground

        const helper = new v3d.GridHelper(1000, 10, 0x444444, 0x444444);
        helper.position.y = 0.1;
        scene.add(helper);

        //

        const SoundControls = function() {

          this.master = listener.getMasterVolume();
          this.firstSphere = sound1.getVolume();
          this.secondSphere = sound2.getVolume();
          this.thirdSphere = sound3.getVolume();
          this.Ambient = sound4.getVolume();

        };

        const GeneratorControls = function() {

          this.frequency = oscillator.frequency.value;
          this.wavetype = oscillator.type;

        };

        const gui = new GUI();
        const soundControls = new SoundControls();
        const generatorControls = new GeneratorControls();
        const volumeFolder = gui.addFolder('sound volume');
        const generatorFolder = gui.addFolder('sound generator');

        volumeFolder.add(soundControls, 'master').min(0.0).max(1.0).step(0.01).onChange(function() {

          listener.setMasterVolume(soundControls.master);

        });
        volumeFolder.add(soundControls, 'firstSphere').min(0.0).max(1.0).step(0.01).onChange(function() {

          sound1.setVolume(soundControls.firstSphere);

        });
        volumeFolder.add(soundControls, 'secondSphere').min(0.0).max(1.0).step(0.01).onChange(function() {

          sound2.setVolume(soundControls.secondSphere);

        });

        volumeFolder.add(soundControls, 'thirdSphere').min(0.0).max(1.0).step(0.01).onChange(function() {

          sound3.setVolume(soundControls.thirdSphere);

        });
        volumeFolder.add(soundControls, 'Ambient').min(0.0).max(1.0).step(0.01).onChange(function() {

          sound4.setVolume(soundControls.Ambient);

        });
        volumeFolder.open();
        generatorFolder.add(generatorControls, 'frequency').min(50.0).max(5000.0).step(1.0).onChange(function() {

          oscillator.frequency.setValueAtTime(generatorControls.frequency, listener.context.currentTime);

        });
        generatorFolder.add(generatorControls, 'wavetype', ['sine', 'square', 'sawtooth', 'triangle']).onChange(function() {

          oscillator.type = generatorControls.wavetype;

        });

        generatorFolder.open();

        //

        renderer = new v3d.WebGLRenderer({ antialias: true });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        //

        controls = new FirstPersonControls(camera, renderer.domElement);

        controls.movementSpeed = 70;
        controls.lookSpeed = 0.05;
        controls.noFly = true;
        controls.lookVertical = false;

        //

        window.addEventListener('resize', onWindowResize, false);

        animate();

      }

      function onWindowResize() {

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize(window.innerWidth, window.innerHeight);

        controls.handleResize();

      }

      function animate() {

        requestAnimationFrame(animate);
        render();

      }


      function render() {

        const delta = clock.getDelta();

        controls.update(delta);

        material1.emissive.b = analyser1.getAverageFrequency() / 256;
        material2.emissive.b = analyser2.getAverageFrequency() / 256;
        material3.emissive.b = analyser3.getAverageFrequency() / 256;

        renderer.render(scene, camera);

      }

    </script>

  </body>
</html>